画布到png不起作用fabricjs答案

【问题标题】：Canvas to png not working fabricjs画布到png不起作用fabricjs
【发布时间】：2017-08-05 00:39:28
【问题描述】：

这是我使用 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/

我该如何解决这个问题？

【问题讨论】：

标签： javascript jquery canvas fabricjs

【解决方案1】：

您的图片只是存在跨域问题：

VM71 fabric.min.js:3 Uncaught 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 工作。

【讨论】：