画布png不工作fabricjs-Java 学习之路

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

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

它通过softvar获得了样本http://jsfiddle.net/softvar/9hrcp/

我该如何解决这个问题？

1 回答

1
您的图片只有跨域问题：

VM71 fabric.min.js：3未捕获DOMException：无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出受污染的画布 . （...）

CORS enabled image

什么是“受污染”的画布？虽然您可以在画布中使用未经CORS批准的图像，但这样做会污染画布 . 一旦画布被污染，您就无法再将数据从画布中拉回来 . 例如，您不能再使用canvas 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);
    },
```
我使用了来自维基媒体的启用的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有效 .
回复于 2024-05-02T00:36:34+08:00

画布png不工作fabricjs

1 回答

相关问题