[SOLVED] How to go from HTML DOM to Texture

[TechZ]

Hi, I was trying to implement the dom-to-image library for html to texture conversion. I’ve imported the dom-to-image.min.js to my project.

I have a monitor in my environment in which I want to change the screen texture to the image of the html with a button click using this library but I’m getting an error:

oops, something went wrong!
[dom-to-image.min.js?id=122045944&branchId=c6cc8e9c-df65-4192-9dff-3a88df09cb19:2]: a.cloneNode is not a function
TypeError: a.cloneNode is not a function
at d (https://launch.playcanvas.com/api/assets/files/scripts/plugin/dom-to-image.min.js?id=122045944&branchId=c6cc8e9c-df65-4192-9dff-3a88df09cb19:2:1519)

Here’s my code :

Reference: [ GitHub - tsayen/dom-to-image: Generates an image from a DOM node using HTML5 canvas]

Please guide me on what am I doing wrong and how to make this work.

[eproasim]

Hi @TechZ,

Just taking a quick look at your pasted code, I think the problem might be on line 17.

node = texture;

On this line it appears that all you are doing is updating the node variable instead of its actual reference try changing line 10 to:

var node = this.monitor.render.meshInstances[0].material;

and line 17 to:

node.diffuseMap = texture;

This is one step, but I believe that you will also want to generate a playcanvas texture beforehand so that the map is read correctly. Here is a thread that deals specifically with loading an image from a URL and then applying it to a material’s properties:

Load images from URL

Render models and assets weren’t available during the last exchange in the thread. Honestly confused by this one. I don’t use BasicMaterial myself but something is a bit odd. Moving the line where the render material is assigned to the callback after the texture is loaded and assigned to the colorMap makes it work fine: https://playcanvas.com/project/947824/overview/f-debugging-image-loaded-from Maybe @mvaligursky knows more. All I did was go from: var TextureFromUrl = pc.createScript('te…

Of course, the example here isn’t exactly the same, but there should be enough context to modify for your purposes.

I hope this is helpful!

[TechZ]

Hi @eproasim ,
Thanks for guiding !!

Even though I can now convert an image url to texture and put it as a material over a monitor (tested), the issue still persists when I want to do HTML to image conversion and get this error :

This is my current code:

And this texture definition line 53 (where the error is directed to) is working fine in imageUrl-to-texture scenario but it’s not working for me in this html-to-texture scenario, any idea why it’s happening ??

[TechZ]

Thanks to @erickim I was able to solve this issue.

Eric pointed out the fact that the ‘domtoimage’ function is executed through the returned value and dumb me forgot the point that it wouldn’t recognize the existing pc reference using ‘this’ in Line 53.

The following change resolves it:

UrlTest.prototype.htmlToTexture = function() {
var self = this;
~
var texture = new pc.Texture(self.app.graphicsDevice);
~
}