vue 在后端存储的图片通过url可以正常在img标签中显示,在fabric.js canvas标签中无法显示,,是因为fabric.js对跨域的限制吗?如何解决呢? 是否可以通过将图片转换为base64来解决
时间: 2024-03-28 18:41:18 浏览: 9
是的,fabric.js对跨域有限制,如果图片不在同一个域名下,就无法在canvas中显示。解决方法有两种:
1. 在服务器端设置跨域
可以在服务器端设置允许跨域,具体方式可以根据服务器类型进行设置。例如,对于Nginx服务器,可以在nginx.conf文件中添加以下配置:
```
location / {
add_header Access-Control-Allow-Origin *;
}
```
这样就可以允许所有域名的请求跨域访问了。
2. 将图片转换为base64格式
将图片转换为base64格式可以避免跨域的问题,因为base64编码的图片是作为字符串嵌入到HTML中,不需要从外部加载。可以使用JavaScript的FileReader对象将图片转换为base64格式,然后将base64字符串作为fabric.Image对象的src属性值即可。
示例代码如下:
```javascript
var reader = new FileReader();
reader.onload = function(event){
var imgObj = new Image();
imgObj.src = event.target.result;
imgObj.onload = function() {
var fabricImage = new fabric.Image(imgObj);
canvas.add(fabricImage);
}
};
reader.readAsDataURL(file);
```
其中,file为文件对象,可以通过input[type='file']元素获取。