FabricJS画布到图像问题

时间:2016-06-07 09:50:42

标签: javascript html5 canvas fabricjs

我在我的项目中使用了Fabricjs。如果我在画布上绘制一些东西,那么在将它们转换为dataurl时它可以正常工作。但是,当我绘制任何图像并将其转换为dataurl时,它无法正常工作。

任何人都可以帮忙解决这个问题。

这是我的代码:

从json加载画布:

CANVASOBJ.canvas.loadFromJSON(CANVASOBJ.canJson.items[k].data, CANVASOBJ.canvas.renderAll.bind(CANVASOBJ.canvas), function(o, object) {

 });

转换为blob的函数:

var blob =CANVASOBJ.toBlob(imageFileType,CANVASOBJ.canvas);

toBlob : function (type,canvas) {
         var dataN = canvas.toDataURL({
                width: canvas.getWidth(),
                height:  canvas.getHeight(),
                multiplier: ''
            });
            console.log(canvas.toDataURL("image/png"));
            var data = dataN.replace("data:image/png;base64,", "");
            return CANVASOBJ.b64toBlob(data, 'image/png');



    },
    b64toBlob:function (b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }
    console.log(byteArrays);
    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

0 个答案:

没有答案