帆布为PNG不工作fabricjs

这是我的代码canavs导出到使用Image FabricJS：帆布为PNG不工作fabricjs

$("#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/

为什么当我点击画布2 PNG按钮..它不工作..

它won sample样品http://jsfiddle.net/softvar/9hrcp/ by softvar

我该如何解决这个问题？

来源

2016-12-06 javas

你刚才跨域问题与您的图像：

VM71 fabric.min.js：3未捕获抛出：DOMException：未能执行上 “toDataURL 'HTMLCanvasElement'：被污染的画布可能不会出口。（...）

CORS enabled image

什么是“污染”画布？

尽管您可以在画布中使用没有CORS 批准的图像，但这样做会污染画布。一旦画布被污染，您不能再将数据拉出画布。例如，对于示例，您可以不再使用canvas到Blob（），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); 
    },

，我已经从维基百科使用的启用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作品。

来源

2016-12-06 10:48:55 InferOn

帆布为PNG不工作fabricjs

回答

相关问题