IE Canvas dataURI 安全错误答案

【问题标题】：IE Canvas dataURI Security ErrorIE Canvas dataURI 安全错误
【发布时间】：2015-10-07 16:19:01
【问题描述】：

我从 DOM 中获取一些 SVG，将其转换为 dataURI，将其作为图像绘制到画布元素，然后读取图像数据的像素。这在 chrome 和 FF 中运行良好，但 IE 10 给了我一个安全错误。

这是 JavaScript：

var SVG_DATA_IMG = 'data:image/svg+xml;base64, ';
var utf8_to_b64 = function(str) {
    str = str.replace(/\&nbsp\;/g, ' ');
    return window.btoa(unescape(encodeURIComponent(str)));
};
var svg = document.querySelector('#source-image');
var canvas = document.querySelector('#canv');
var ctx = canvas.getContext('2d');
var img = new Image();
img.crossOrigin = 'anonymous';

img.src = SVG_DATA_IMG + utf8_to_b64(svg.innerHTML);

document.querySelector('#img').appendChild(img);

img.addEventListener('load', function() {
   canvas.width = img.offsetWidth;
   canvas.height = img.offsetHeight;
   console.log('loaded', ctx, canvas);
   ctx.drawImage(img, 0, 0);
   var centerPix = ctx.getImageData(canvas.width / 2, canvas.height / 2, 1, 1).data;
   document.querySelector('#output').innerHTML = [ 
     'center pixel color is:', centerPix[0], centerPix[1], centerPix[2], centerPix[3] ].join(', ')
});

这是html：

<div id="source-image">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="250" width="250" viewBox="-1 -1 250 250">
    <g>
      <path id="uniqueDomId-195" fill="#C0504D" fill-opacity="1" stroke="#8C3836" stroke-opacity="1" stroke-width="1" stroke-linecap="flat" stroke-linejoin="round" d="M50,40 L60,87 12,92 42,129 0,146 37,174 12,201 55,203 55,241 84,203 97,221 109,193 129,211 136,179 166,193 164,159 211,174 184,139 203,126 191,104 241,74 181,72 201,37 161,64 164,2 129,47 109,22 97,72Z" transform="translate(0.5, 0.5)" ></path>
    </g>
  </svg>
</div>


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

<div id="img"></div>

<br />
<p id="output"></p>

安全错误信息不是很丰富：

如您所见，我正在尝试为图像设置 crossOrigin 值。我觉得必须有一个简单的解决方案。

更新

花了一段时间使用new Blob 获取相同内容的 blob 版本，但仍然出现相同的错误。

【问题讨论】：

是的，Internet Explorer 有更严格的安全限制，不会让您在尝试时将 SVG 绘制到画布上。我认为这是因为 MS 知道 IE 中存在相关的安全问题。关于 html5 画布的一个有趣的说明是，当画布输出位图（光栅）图像时，画布使用类似矢量的命令来创建绘图。 Mike Swanson 有一个不错的 Adobe Illustrator 插件，可以将 SVG 导出为原生 html5 画布绘图命令：github.com/mikeswanson/Ai2Canvas。这会将您的 SVG 绘图命令转换为符合 CORS 的 html5 画布绘图命令
感谢@markE - 我的技术实际上效果很好并且速度非常快 - 但是，在绘制 svg 后我无法从画布上读取像素 - 仅用于单独绘制到画布上，这种技术很好。我在 pase 中使用了 canvg - Ai2Canvas 看起来很棒 - 感谢链接 - 最后我使用 canvg 来解决问题 - 但也许 Ai2Canvas 会更合适......再次感谢

标签： javascript html canvas svg internet-explorer-10

【解决方案1】：

尝试：

img.crossOrigin = "Anonymous";

大写“A”因为与“a”不同：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

【讨论】：

设置 cross-origin 标志将无济于事。 Internet Explorer 仍然不允许将 SVG 绘制到 html5 Canvas 而不污染画布。