使用结构加载base64图像.图片来自URL

Question

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

Answer 1

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

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

Answer 2

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

数据URI

Answer 3

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

数据：[lt；mediatype>][；base64]，<数据>

MDN-

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

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

结构对于base64数据url应该可以很好地工作，因为它适用于http图像地址。