Question

我有问题。首先，我将图像从计算机添加到画布

folderAddGetName.show(getSupportFragmentManager(), "addFolder");

}

接下来，我将数据库保存为String

document.getElementById('imgLoader').onchange = function handleImage(e) {
var reader = new FileReader();
reader.onload = function (event) { console.log('fdsf');
    var imgObj = new Image();
    imgObj.src = event.target.result;
    imgObj.onload = function () {
        // start fabricJS stuff
        var newSize = scaleSize(300, 300, imgObj.width, imgObj.height);
        imgObj.width = newSize[0];
        imgObj.height = newSize[1];
        var image = new fabric.Image(imgObj);
        image.set({
            left: 0,
            top: 0,
            angle: 20,
            padding: 10,
            cornersize: 10
        });
        //image.scale(getRandomNum(0.1, 0.25)).setCoords();
        canvas.add(image);

        // end fabricJS stuff
    }

}
reader.readAsDataURL(e.target.files[0]);

在数据库中我看到了：

JSON.stringify(canvas.toJSON())

我的问题在这里。当我想下载我的Img到画布。我没看到我的img。为什么呢？

我使用这种方法：

{"objects":[{"type":"image","originX":"left","originY":"top","left":0,"top":0,"width":300,"height":155,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":20,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","src":"data:image/jpeg;base64,//.../Z","filters":[],"crossOrigin":""}],"background":""}

Answer 1

尝试：

canvas.loadFromJSON(json, canvas.renderAll.bind(canvas));

json这是一个包含字符串json的变量：

json = JSON.stringify(canvas.toJSON());

它应该工作。我给你了jsFiddle。 canvas.clear()只是为了清楚地看到Load Json的工作原理。

从数据库下载图像到画布

1 个答案: