backbone.js - 使用 fabric.Image.fromURL 加载 base64 图像

Question

我正在使用fabric.jsinside backbone.js，并试图弄清楚如何使用fabric's 命令加载 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 图像。我应该如何解决这个问题？

Answer 1

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

数据 URI

Answer 2

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

数据：[<媒体类型>][;base64]，<数据>

MDN

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

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

Fabric 应该适用于base64数据 url，因为它适用于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);       
});