Canvas.toDataURL() работает во всех браузерах, кроме IE10

Я работаю над проектом, который использует холст для автоматической обрезки изображения, а затем возвращает URL-адрес данных. Он использует образы с внешнего сервера, у которого есть соответствующие заголовки CORS, чтобы позволить изображениям преобразовываться в URI данных после их обрезания, даже если они являются перекрестными.

Код работает отлично (и без ошибок безопасности!) во всех браузерах, кроме IE 10, в котором он выдает "SCRIPT5022: SecurityError", когда вызывается canvas.toDataURL().

Это ошибка в IE или что-то, что мне нужно сделать по-другому в моем коде, чтобы он работал в Idiot Exploder? Благодарю. -Скотт

ИЗМЕНИТЬ Вот (большинство) код, который я использую для создания и рисования холста;

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = imageServerURL + '?id=' + imageIdToGet; // imageServerURL points to a different domain but the server has headers allowing requests from my domain
/*
    code here that defines the cropping area, in variables like ulX, lrY, etc.
*/
ctx.beginPath();
ctx.moveTo(ulX, ulY);
ctx.lineTo(urX, urY);
ctx.lineTo(lrX, lrY);
ctx.lineTo(llX, llY);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0);
var url = canvas.toDataURL(); // This succeeds in all other browsers but throws a SecurityError in IE

Ответ 1

Я не верю, что IE10 поддерживает CORS для изображений. Эта статья MDN, похоже, поддерживает это.

Как говорится в статье:

Хотя вы можете использовать изображения без одобрения CORS в своем холсте, это делает тень холстом. Как только холст испорчен, вы больше не можете извлекать данные из холста. Например, вы больше не можете использовать методы canvas toBlob(), toDataURL() или getImageData(); это приведет к ошибке безопасности.

Итак, похоже, что вам придется проксировать изображение из того же источника/домена, что и тот, где размещен этот код, прежде чем пытаться это сделать, по крайней мере для IE10 и Opera.

Чтобы иметь дело с браузерами, у которых нет поддержки изображений CORS, вам необходимо проксировать сервер изображений. Вы можете сделать это довольно легко, отправив исходный код изображения на известную конечную точку на локальном сервере и передав исходный url изображения в качестве параметра запроса.

Например:

var sourceImageUrl = "https://www.google.com/images/srpr/logo4w.png",  
    localProxyEndpoint = "/imageproxy",   
    image = new Image();   

image.src = localProxyEndpoint + "?source=" + encodeURIComponent(sourceImageUrl);

Теперь, на стороне сервера, вы будете обрабатывать этот запрос GET, разорвать значение параметра source из URI, захватить изображение из источника и вернуть его в ответ.

Ответ 2

К сожалению, IE10 по-прежнему остается единственным популярным браузером, который не поддерживает CORS для изображения, нарисованного на Canvas, даже когда заголовки CORS правильно установлены. Но это обходное решение для этого через XMLHttpRequest даже без проксирования изображения на стороне сервера:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    var url = URL.createObjectURL(this.response);
    img.src = url;

    // here you can use img for drawing to canvas and handling

    // don't forget to free memory up when you're done (you can do this as soon as image is drawn to canvas)
    URL.revokeObjectURL(url);
};
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.send();