[SOLVED] How to go from HTML DOM to Texture

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.

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:

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!


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 ??

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);

1 Like