如何在 javascript 上设置 img 的跨域

Question

我正在尝试使用 FabricJs 制作 T 恤定制器。
但每次我尝试将 canvas 转换为 Base64

$('#frontCanvas')[0].value = $('canvas')[0].toDataURL("image/png")

我收到此错误：

SecurityError: The operation is insecure.

我确定是关于 crossOrigin 的，但我不知道如何将它添加到我的脚本中。
我尝试了很多不同的方法，但没有成功。

我们将不胜感激。
谢谢你！

$scope.loadImage = function (source) {
    var opacity = (function (min, max) {
        return Math.random() * (max - min) + min;
    })(0.5, 1);

    fabric.Image.fromURL(source, function (image) {
        image.set({
            left: 100,
            top: 100,
            angle: 0,
            padding: 10,
            cornersize: 10,
            hasRotatingPoint: true
        });

        //image.scale(getRandomNum(0.1, 0.25)).setCoords();
        canvas.add(image);
    });
};

Answer 1

您可以这样创建图像：

var image = new Image;
image.crossOrigin="anonymous"; /* THIS WILL MAKE THE IMAGE CROSS-ORIGIN */
image.src = source;

这就是您使用 fabric.js 的方式：http://fabricjs.com/docs/fabric.Image.html#crossOrigin（抱歉，我不知道这个框架）

如何在 javascript 上设置 img 的跨域

how to set crossorigin of img on javascript

javascript

canvas

fabricjs