在不创建CORS限制的情况下将HTML插入画布

Question

I am trying to get the image data from a canvas to which I added a HTML element's data by using MDN's method . After I insert the HTML data, I can't access the canvas' image data anymore though (in Chrome):

 //This function is a direct copy of https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas#JavaScript onload = function() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px">' + 'example' + '</div>' + '</foreignObject>' + '</svg>'; var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var svg = new Blob([data], {type: 'image/svg+xml;charset=utf-8'}); var url = DOMURL.createObjectURL(svg); img.onload = function () { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); getData(ctx); }; img.src = url; }; //the part where it goes wrong: function getData(ctx) { try { ctx.getImageData(0,0,100,100); } catch(e) { alert(e); } } 

 <canvas id="canvas"></canvas> 

My question is: is it possible to insert the HTML data, and still be able to access the image data?

Answer 1

After looking around a bit more, I found out that data: URIs do still permit access to image data after inserting the exact same bit of HTML. Even though data: URIs are slower than blob s, this does seem like the best way to go here.

 onload = function() { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' + '<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:14px">' + 'example' + '</div>' + '</foreignObject>' + '</svg>'; var DOMURL = window.URL || window.webkitURL || window; var img = new Image(); var url = 'data:image/svg+xml;base64,' + btoa(data); img.onload = function () { ctx.drawImage(img, 0, 0); DOMURL.revokeObjectURL(url); getData(ctx); }; img.src = url; }; function getData(ctx) { try { ctx.getImageData(0,0,100,100); alert('Finished without errors'); } catch(e) { alert(e); } } 

 <canvas id="canvas"></canvas> 

Answer 2

No, the canvas becomes tainted with the SVG and therefore context.getImageData is no longer allowed. This has become necessary because of cross-domain security issues.

The (sometimes unsatisfactory) workaround is to bounce the html off your server and use a headless browser (I recommend PhantomJS) to convert the html into an image. Then serve that image back to the client. Since the html-as-image is not cross-domain, it will not taint the canvas and you can use context.getImageData .