这是我的代码,使用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/