javascript - Canvas 到 png 不工作 fabricjs

Question

这是我使用 FabricJS 将 Canvas 导出到图像的代码:

$("#canvas2png").click(function(){
    canvas.isDrawingMode = false;

    if(!window.localStorage){alert("This function is not supported by your browser."); return;}
    // to PNG
    window.open(canvas.toDataURL('png'));
});

https://jsfiddle.net/ridwanamirsene/nL4jbLon/1/

为什么当我点击 canvas 2 png 按钮时..它不起作用..

它正在运行样本 http://jsfiddle.net/softvar/9hrcp/通过软件

我该如何解决这个问题？

Answer 1

你的图片有跨域问题:

VM71 fabric.min.js:3 Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.(…)

CORS enabled image

What is a "tainted" canvas?

Although you can use images without CORS approval in your canvas, doing so taints the canvas. Once a canvas has been tainted, you can no longer pull data back out of the canvas. For example, you can no longer use the canvas toBlob(), toDataURL(), or getImageData() methods; doing so will throw a security error.

我改变了你的初始化方法:

initialize: function(src) {
        this.image = new Image();
        this.image.crossOrigin = "Anonymous";
        this.image.src = src;
         this.image.onload = (function() {
            this.width = this.image.width;
            this.height = this.image.height;
            this.loaded = true;
            this.setCoords();
            this.fire('image:loaded');
            canvas.renderAll(paper); 
        }).bind(this);
    },

我使用了来自维基媒体的已启用 cors 图像:

var imgs = [

    'https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg', // cat
    'https://upload.wikimedia.org/wikipedia/commons/0/0e/American_Black_Bear_%283405475634%29.jpg' // mouse
];

现在your forked fiddle有效。