javascript - IE Canvas dataURI 安全错误

Question

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

This is a link to a codepen

这是 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 版本，但仍然出现相同的错误。

Answer 1

尝试:

img.crossOrigin = "Anonymous";

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