Fabric.js '5.3.0' 如何在画布中加载存储在后端的图片
时间: 2024-03-28 19:37:25 浏览: 68
要在画布中加载存储在后端的图片,你可以使用Fabric.js的`fabric.Image.fromURL()`方法。以下是一个简单的示例代码:
```javascript
// 获取图片URL
var imageUrl = 'http://example.com/image.png';
// 使用fabric.Image.fromURL()加载图片
fabric.Image.fromURL(imageUrl, function(oImg) {
// 将图片添加到画布中
canvas.add(oImg);
});
```
在这个示例中,我们首先获取图片的URL,然后使用`fabric.Image.fromURL()`方法加载图片。一旦图片被加载,我们可以将其添加到画布中,从而显示它。
注意,如果存储在后端的图片需要身份验证,你可能需要在加载图片时提供身份验证凭据。你可以在`fromURL()`方法的第二个参数中提供一个选项对象,以设置任何必要的身份验证凭据。例如:
```javascript
// 设置身份验证凭据
var options = {
headers: {
'Authorization': 'Bearer ' + authToken
}
};
// 使用选项对象加载图片
fabric.Image.fromURL(imageUrl, options, function(oImg) {
// 将图片添加到画布中
canvas.add(oImg);
});
```
在这个示例中,我们在选项对象中设置了身份验证凭据,然后将其传递给`fromURL()`方法。这将确保在加载图片时使用正确的凭据进行身份验证。
阅读全文