javascript - Canvas 到PNG不起作用Fabric.js

这是我的代码，使用FabricJS将canavs导出到Image：

$("#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按钮..它不起作用..

它对softvar的样本http://jsfiddle.net/softvar/9hrcp/表示敬意

如何解决此问题？

最佳答案

您的图片只有跨域问题：


  VM71 fabric.min.js：3未捕获的DOMException：执行失败
  “ HTMLCanvasElement”上的“ toDataURL”：受污染的画布可能不是
  已导出。（...）


CORS enabled image


  什么是“污点”画布？
  
  尽管您可以使用没有CORS的图像
  画布上的批准，这样做会污染画布。一旦有画布
  被污染后，您将无法再将数据拉出画布。对于
  例如，您不能再使用画布toBlob（），toDataURL（）或
  getImageData（）方法；这样做会引发安全错误。


我更改了您的初始化方法：

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);
    },

并且我使用了来自wikimedia的启用的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可以工作了。

关于javascript - Canvas 到PNG不起作用Fabric.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40993139/