SVG取得canvas IE安全错误到DataURL [英] SVG tained canvas IE security error toDataURL

问题描述

我在angular JS中有一条指令，该指令允许将SVG导出到PNG.在其他浏览器中，此方法工作正常，但在IE中，我收到一个安全错误. 我已经尝试过各种方法，但是似乎没有用. 我在某处读到，如果我对base64进行编码，那可以用，但不能用.

I have a directive in angular JS that allows exporting SVGs to a PNG. This works fine in other browsers, but in IE I get a security error. I have tried all sorts of things, but it just doesn't seem to work. I read somewhere that if I base64 encode it, then that would work, but it doesn't.

我在画布上绘制SVG的代码是这样的:

The code I have for drawing the SVG on the canvas is this:

// Private function for drawing our images
var drawImage = function (canvas, ctx, svgContainer) {

    // Defer our promise
    var deferred = $q.defer();

    // Remove hidden layers
    removeHidden(angular.element(clone));

    // Create our data
    var clone = angular.element(svgContainer[0].cloneNode(true)),
        child = clone.children()[0];

    // Remove hidden layers
    removeHidden(angular.element(clone));

    var s = new XMLSerializer(),
        t = s.serializeToString(child),
        base64 = 'data:image/svg+xml;base64,' + window.btoa(t);

    console.log(base64);

    var img = new Image();

    // When the image has loaded
    img.onload = function () {

        // Create our dimensions
        var viewBox = child.getAttribute('viewBox').split(' ');

        console.log(viewBox);

        var dimensions = {
            width: viewBox[2],
            height: viewBox[3]
        };

        console.log(img.width);

        // Get our location
        getNextLocation(canvas.width, canvas.height, dimensions);

        // Draw our image using the context
        ctx.drawImage(img, 0, 0, dimensions.width / 2, dimensions.height, location.x, location.y, location.width, location.height);

        // Resolve our promise
        deferred.resolve(location);
    };

    // Set the URL of the image
    img.src = base64;

    // Return our promise
    return deferred.promise;
};

在此之前，我创建了一个Blob，但这也导致了安全错误. 我主要的代码位在这里:

Before this I was creating a blob but that also caused the security error. My main bit of code, is this bit here:

// Public function to generate the image
self.generateImage = function (onSuccess) {

    // Reset our location
    location = null;
    counter = 0;

    // Get our SVG
    var target = document.getElementById(self.options.targets.containerId),
        svgContainers = angular.element(target.getElementsByClassName(self.options.targets.svgContainerClassName)),
        itemCount = svgContainers.length;

    // Get our context
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d');

    // Set our canvas height and width
    setCanvasDimensions(canvas, itemCount);

    // Create our array of promises
    var promises = [];

    // Draw our header and footer
    drawHeader(canvas, ctx);

    //// For each container
    //for (var i = 0; i < itemCount; i++) {

    //    // Get our elements
    //    var svgContainer = svgContainers[i];

    //    // Draw our image and push our promise to the array
    //    promises.push(draw(canvas, ctx, svgContainer));
    //}

    promises.push(draw(canvas, ctx, svgContainers[0]));

    // Finally add our footer to our promises array
    promises.push(drawFooter(canvas, ctx));

    // When all promises have resolve
    $q.all(promises).then(function () {

        console.log('all promises completed');

        // Get our URL as a base64 string
        var dataURL = canvas.toDataURL("image/png");

        console.log('we have the image');

        // Create our model
        var model = {
            teamName: self.options.team.name,
            sport: self.options.team.sport,
            data: dataURL
        };

        // Create our preview
        self.create(model).then(function (response) {

            console.log('saved to the database');

            // Invoke our success callback
            onSuccess(response);
        });
    })
};

如您所见，我遍历每个svg容器并为每个容器绘制SVG.我已经在这段代码中对此进行了注释，然后绘制了第一张图像. canvas.toDateURL 之后的console.log指令从不被调用，并且出现安全错误.

As you can see I loop through each svg container and draw the SVG for each one. I have commented that out in this bit of code and just draw the first image. The console.log directive after canvas.toDateURL never get's invoked and I get a security error.

SVG是内联的.从我所读的内容来看，问题可能是由于xlns声明引起的，但是删除它仍然会给我带来问题:

The SVG is inline. From what I have read the issue might be due to the xlns declaration, but removing it still gives me the issue:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 259.5 131" enable-background="new 0 0 259.5 131" xml:space="preserve">

有人知道我该如何解决这个问题?

Does anyone know how I can solve this issue?

推荐答案

您需要设置 img.crossOrigin= 'anonymous'; 前 img.src=...

但是，要使其正常工作，您还需要 access-control-allow-origin: * 设置在图片的响应标题中.

However, to make this work, you will also need to have access-control-allow-origin: * set in the response header of your image.

要尝试该解决方案，可以使用' http://fabricjs.com/assets/printio. png '(已设置适当的标头)

to try the solution, you can use 'http://fabricjs.com/assets/printio.png'(which has the proper header set) for example

这篇关于SVG取得canvas IE安全错误到DataURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！