Question

我需要从画布上获取我的照片，所以我从Amazon S3获取了我的图像，我在那里启用了跨源资源共享（CORS）并且我将croseOrigin属性设置为“anonymous”到img，它工作得很好对于Chrome和FireFox，但在IE上我通过调用toDataUrl方法得到安全性错误。

那我该如何解决呢？我甚至看不到有关此安全错误的详细信息。

Answer 1

我使用fabric js在IE 11中修复了此安全错误。通过npm install 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;

Answer 2

我不确定这是不是最好的方法，但我找到了解决方法。只是将img转换为base64，没有错误。这有助于 - ＆gt; how to convert to base64

IE toDataUrl（）安全错误

2 个答案: