我需要从画布上获取图片,因此我从 Amazon S3 获取图像,我在那里启用了跨源资源共享 (CORS),并将 croseOrigin 属性“匿名”设置为 img,它适用于 Chrome 和FireFox,但在 IE 上,我通过调用 toDataUrl 方法收到安全错误。
那么我该如何解决它呢?我什至看不到有关此安全错误的详细信息。
我通过使用 Fabric js 修复了 IE 11 中的此安全错误。通过 npm 安装 Fabric 或 CDN。
var fabriclib = require("fabric");
var svg = document.querySelector('svg');
var width = $('#chart-container').find('svg').width();
var height = $('#chart-container').find('svg').height();
var DOMURL = window.URL || window.webkitURL || window;
var data = (new XMLSerializer()).serializeToString(svg);
data = data.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
var canvas = new fabriclib.fabric.Canvas();
var svgStr = data;
fabriclib.fabric.loadSVGFromString(svgStr, function(objects, options){
var object = fabriclib.fabric.util.groupSVGElements(objects, options);
canvas.add(object);
var ctx = canvas.getContext('2d');
ctx.canvas.width = width;
ctx.canvas.height = height;
fabriclib.fabric.util.loadImage(svgStr, function(img) {
ctx.drawImage(img, 0, 0, width, height);
img.crossOrigin = "Anonymous";
}, {
crossOrigin: 'anonymous'
});
DOMURL.revokeObjectURL(url);
var dataUrl = canvas.toDataURL({format: "png"});
});
}
img.src = url;
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)