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

【问题标题】：load base64 image with fabric.Image.fromURL使用 fabric.Image.fromURL 加载 base64 图像
【发布时间】：2012-07-12 13:22:11
【问题描述】：

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

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

当我插入静态 url 时它工作正常，例如：

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 图像。我该如何解决这个问题？

【问题讨论】：

发布你正在使用的dataurl
对我来说很好，可以像这样发送base64：data:image/png;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kz....。我正在使用从这里fabricjs.com/build 生成的custom fabric build。但我正在寻找另一个选项，因为我需要让它在离线模式下工作，显然fabric.Image.fromURL 只在在线模式下工作。

标签： backbone.js base64 fabricjs

【解决方案1】：

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

Data URI

【讨论】：

【解决方案2】：

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

数据：[][;base64]，

MDN

上面的

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

如果你想测试是不是fabric没有渲染url或者url不正确，尝试在浏览器中打开整个数据url，如果是正确的数据url，浏览器会渲染图像。

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

【讨论】：

【解决方案3】：

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

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

【讨论】：