你好,我有以下问题。
我正在生成一个SVG图像(https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas)。
图像已经正确生成并且看起来不错。现在我需要获取数据URI,但每次我尝试从canvas.toDataURL()获取时都会出现以下信息:未捕获的DOM异常:无法在HTMLCanvasElement上执行'toDataURL':污染的画布可能无法导出。(...)
我创建了一些示例代码来说明这种情况。
</!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.org/2000/svg" width="200" height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="http://www.w3.org/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>
这段代码生成以下图像:
这是正确的,但是当执行以下代码时:
var dataURL = canvas.toDataURL(); console.log(dataURL);
它会抛出错误。我在图片onload方法中执行此操作,以允许图像完成绘制到画布上。如果我尝试从onload方法外获取dataURL,则画布尚未加载完成,因此会给我一个空图像。 我一直在搜索,但还没有找到答案。这与CORS有关。我安装了chrome插件CORS并添加了img,但问题在于这只是一个示例,基于CORS的解决方案将无用,因为我正在使用一个运行在受限制chromium浏览器上的应用程序(我的意思是浏览器只显示web应用程序,您除了与应用程序交互之外什么都不能做)。
请注意,您可以通过以下方式获取数据URI:
检查 --> 网络 --> 选择图像并在源面板中打开,然后就可以复制图像作为数据URI了。 我以这种方式获取base64图像,如果使用此类解码器(http://base64online.org/decode/),则会正确显示图像。 因此,问题肯定是在canvas绘制之前获取数据URI。
有任何想法吗?
谢谢!
敬礼
Mauro