javascript - Problems with getting canvas dataURI from svg with foreignObject - Stack Overflow

IT技术

更新时间：2025-04-050

admin管理员组
文章数量:1344465

Hi I have the following problem.

I'm generating a SVG image ().

The image is generated correctly and looks ok. Now I need to get the data URI, but everytime I try to get that from canvas.toDataURL() this message appears Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.(…)

I've created some sample code to illustrate the situation.

</!DOCTYPE html>
<html>
<head>
    <title>SVG to PNG</title>
</head>
<body>
    <canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>


<script type="text/javascript">

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="" width="200" height="200">' +
               '<foreignObject width="100%" height="100%">' +
               '<div xmlns="" style="font-size:40px">' +
                 '<em>I</em> like ' + 
                 '<span style="color:white; text-shadow:0 0 2px blue;">' +
                 'beer</span>' +
               '</div>' +
               '</foreignObject>' +
            '</svg>';

var domURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = domURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  domURL.revokeObjectURL(url);
  var dataURL = canvas.toDataURL();
  console.log(dataURL);
};

img.src = url;

</script>
</body>
</html>

This code generates the following image

This is correct, but then when these lines are executed

var dataURL = canvas.toDataURL(); console.log(dataURL);

It throws the error. I'm doing this inside the image onload method to allow the image finish drawing to the canvas. If I try to get the dataURL from outside the onload method, the canvas hasn't finished loading, so it would give me an empty image. I've been searching a lot but I couldn't find the answer yet. This is something related to CORS. I've installed the chrome plugin CORS and added the img, the thing is that this is just an example, and a CORS based solution would not be useful, because I'm working on an application that's running over a crippled chromium browser (I mean the browser just shows the web app, you can't do anything there except interact with the app).

To notice you can obtain the data URI, with

inspect --> network --> select the image and open in sources panel and there it is just copy image as data uri. I get the base64 image that way, and if I use some decoder like this (/) it's showing the image correctly. So definitely the problem is that I'm getting the data URI before the canvas is drawn.

Any ideas?

Thanks in advance!

Regards

Mauro

Hi I have the following problem.

I'm generating a SVG image (https://developer.mozilla/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas).

The image is generated correctly and looks ok. Now I need to get the data URI, but everytime I try to get that from canvas.toDataURL() this message appears Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.(…)

I've created some sample code to illustrate the situation.

</!DOCTYPE html>
<html>
<head>
    <title>SVG to PNG</title>
</head>
<body>
    <canvas id="canvas" style="border:2px solid black;" width="200" height="200">
</canvas>


<script type="text/javascript">

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3/2000/svg" width="200" height="200">' +
               '<foreignObject width="100%" height="100%">' +
               '<div xmlns="http://www.w3/1999/xhtml" style="font-size:40px">' +
                 '<em>I</em> like ' + 
                 '<span style="color:white; text-shadow:0 0 2px blue;">' +
                 'beer</span>' +
               '</div>' +
               '</foreignObject>' +
            '</svg>';

var domURL = window.URL || window.webkitURL || window;

var img = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = domURL.createObjectURL(svg);

img.onload = function () {
  ctx.drawImage(img, 0, 0);
  domURL.revokeObjectURL(url);
  var dataURL = canvas.toDataURL();
  console.log(dataURL);
};

img.src = url;

</script>
</body>
</html>

This code generates the following image

This is correct, but then when these lines are executed

var dataURL = canvas.toDataURL(); console.log(dataURL);

It throws the error. I'm doing this inside the image onload method to allow the image finish drawing to the canvas. If I try to get the dataURL from outside the onload method, the canvas hasn't finished loading, so it would give me an empty image. I've been searching a lot but I couldn't find the answer yet. This is something related to CORS. I've installed the chrome plugin CORS and added the img, the thing is that this is just an example, and a CORS based solution would not be useful, because I'm working on an application that's running over a crippled chromium browser (I mean the browser just shows the web app, you can't do anything there except interact with the app).

To notice you can obtain the data URI, with

inspect --> network --> select the image and open in sources panel and there it is just copy image as data uri. I get the base64 image that way, and if I use some decoder like this (http://base64online/decode/) it's showing the image correctly. So definitely the problem is that I'm getting the data URI before the canvas is drawn.

Any ideas?

Thanks in advance!

Regards

Mauro

Share Improve this question edited May 17, 2017 at 0:39 Kaiido 138k14 gold badges259 silver badges324 bronze badges asked Nov 30, 2016 at 19:55 Mauro Alvarez 6121 gold badge10 silver badges30 bronze badges

What is a "tainted" canvas? Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error. This protects users from having private data exposed by using images to pull information from remote web sites without permission – Tim Vermaelen Commented Nov 30, 2016 at 20:11
@TimVermaelen, there is no cross-origin involved here... – Kaiido Commented Dec 1, 2016 at 5:12
Just wanted to know what a tainted canvas is. Hence the italic description which es close to the reason why you can't do what you're trying. – Tim Vermaelen Commented Dec 1, 2016 at 10:23

Add a ment |

1 Answer 1

Sorted by: Reset to default 12

This has nothing to do with CORS. You are not doing any request to an external resource.

The issue is that drawing an svg (moreover when it contains html elements) is a really sensitive action for browsers.

That's why there are a lot of limitations on this technique (you can't load external resources, scripts are ignored, you can't style the content from external CSS, all default browser and OS styles are disabled to avoid fingerprinting etc.).
I don't work for safari nor chrome, so I can't tell for sure, but I think they aren't able to provide enough security on one of these points (safari realised it in v9, and it's a known issue in chrome too).

So what they do, is that they taint the canvas, locking any of its export methods. (Note that IE < Edge did also taint the canvas whenever any svg had been drawn to the canvas for similar security reasons).

If what you want is to rasterize DOM elements, then you should parse the DOM and all its applied styles, and reproduce it with canvas drawings methods.
Doing so, you can bypass most security issues, and no UA will taint the canvas. Some library out there do exactly this, the most famous being html2canvas.

If what you want is to draw this image, then you can rewrite it without using a foreignObject (svg text has more options than canvas one), then use a library like canvg to render it on your canvas _{(because otherwise IE will taint the canvas as said previously)}.

Note : chrome's issue can be workedaround, but I'm not sure it's a good idea, it will still not work in Safari, nor in IE < Edge, and chrome may just have forgotten to block it too and will in next releases, anyway, here is how :

var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');

var data = '<svg xmlns="http://www.w3/2000/svg" width="200" height="200">' +
  '<foreignObject width="100%" height="100%">' +
  '<div xmlns="http://www.w3/1999/xhtml" style="font-size:40px">' +
  '<em>I</em> like ' +
  '<span style="color:white; text-shadow:0 0 2px blue;">' +
  'beer</span>' +
  '</div>' +
  '</foreignObject>' +
  '</svg>';


var img = new Image();
// instead of a blobURL, if we use a dataURL, chrome seems happy...
var url = 'data:image/svg+xml; charset=utf8, ' + encodeURIComponent(data);

img.onload = function() {
  c.width = this.width;
  c.height = this.height;
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL();
  console.log(dataURL);
};

img.src = url;

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

本文标签： javascriptProblems with getting canvas dataURI from svg with foreignObjectStack Overflow

版权声明：本文标题：javascript - Problems with getting canvas dataURI from svg with foreignObject - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1743800614a2541241.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

javascript - Problems with getting canvas dataURI from svg with foreignObject - Stack Overflow

1 Answer 1

更多相关文章