我在我的项目中使用了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;
}