Question

我正在使用fabric.js内的backbone.js，并试图找出如何使用fabric命令加载Base64图像：

fabric.Image.fromURL( 'url', function(img)....

当我插入静态网址时，它可以正常工作，例如：

fabric.Image.fromURL('http://www.domain.com/image.jpg', function(img) {
    img.set({ left: ui.offset.left, top: ui.offset.top});
    canvas.add(img);       
});

但我无法成功加载Base64图像。我是怎么解决这个问题的？

Answer 1

尝试：data:image/jpeg;base64,"+url。如果这不起作用，那么您的base64可能已损坏，或者您可能需要调整提供here的base64到unit8转化技术并添加图片{{3}放置在画布内的图像对象。

data

Answer 2

确保您的数据网址符合以下格式：

数据：并[d mediatype＆gt;] [; base64]，＆lt;数据＆gt;

MDN

上面的

<data>应该是有效的 base64 字符串。

如果你想测试它的结构是否没有呈现url或url不正确，请尝试在浏览器中打开整个数据网址，如果图像是正确的数据网址，浏览器将呈现图像。

fabric适用于 base64 数据网址，因为它适用于 http 图像地址。

Answer 3

以上所有答案都是正确的。但如果没有例子，答案就不明显了。

fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgo....', function(img) {
    img.set({ left: ui.offset.left, top: ui.offset.top});
    canvas.add(img);       
});

使用fabric.Image.fromURL加载base64图像

3 个答案: