使用 foreignObject 从 svg 获取画布 dataURI 的问题
Mau*_*rez 3 javascript svg canvas image
嗨，我有以下问题。
我正在生成一个 SVG 图像（https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas）。
图像生成正确，看起来不错。现在我需要获取数据 URI，但是每次我尝试从 canvas.toDataURL() 获取该信息时，都会出现此消息Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': 受污染的画布可能无法导出。(...)
我已经创建了一些示例代码来说明这种情况。
</!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(); 控制台日志（数据URL）；
它抛出错误。我在图像onload方法中执行此操作，以允许图像完成绘制到画布上。如果我尝试从 onload 方法外部获取 dataURL，则画布尚未完成加载，因此它会给我一个空图像。我已经搜索了很多，但我还没有找到答案。这与CORS有关。我已经安装了 chrome 插件CORS并添加了 img，问题是这只是一个例子，基于 CORS 的解决方案没有用，因为我正在开发一个在残缺的 Chrome 浏览器上运行的应用程序（我意味着浏览器只显示网络应用程序，除了与应用程序交互之外，你不能在那里做任何事情）。
要注意，您可以获取数据 URI，使用
检查-->网络-->选择图像并在源面板中打开，它只是将图像复制为数据 uri。我以这种方式获得 base64 图像，如果我使用这样的解码器（http://base64online.org/decode/），它会正确显示图像。所以肯定的问题是我在绘制画布之前获取了数据 URI。
有任何想法吗？
提前致谢！
问候
毛罗
这与 CORS 无关。您没有向外部资源发出任何请求。
问题是绘制 svg（而且当它包含 html 元素时）对于浏览器来说是一个非常敏感的操作。
这就是为什么这种技术有很多限制的原因（你不能加载外部资源，脚本被忽略，你不能从外部 CSS 设置内容样式，所有默认浏览器和操作系统样式都被禁用以避免指纹识别等）。
我不为 safari 或 chrome 工作，所以我不能肯定，但我认为他们无法在其中之一上提供足够的安全性（safari 在 v9 中实现了这一点，这是chrome 中的一个已知问题太）。
所以他们所做的是污染画布，锁定其任何导出方法。（请注意，出于类似的安全原因，每当将任何 svg 绘制到画布时，IE < Edge 也会污染画布）。
如果你想要光栅化 DOM 元素，那么你应该解析 DOM 及其所有应用的样式，并使用画布绘图方法重现它。
这样做，您可以绕过大多数安全问题，并且没有 UA 会污染画布。一些图书馆正是这样做的，最著名的是html2canvas。
如果您想要绘制此图像，那么您可以在不使用foreignObject 的情况下重写它（svg 文本比画布有更多选项），然后使用像canvg这样的库在画布上呈现它（因为否则IE 会污染画布如前所述）。
注意：chrome 的问题可以解决，但我不确定这是个好主意，它仍然无法在 Safari 中工作，也不能在 IE < Edge 中工作，而且 chrome 可能只是忘记了阻止它，无论如何都会在下一个版本中，这里是如何：
var canvas = document.getElementById('c');
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 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>