图片因为跨域限制无法在fabricjs canvas标签中显示，为何又可以正常在img标签中显示？

这是因为在浏览器中，加载图片的方式和加载其它资源（如脚本、样式表等）的方式是有所不同的。

当使用img标签加载图片时，浏览器会直接向图片所在的URL发送一个GET请求，获取图片的二进制数据，然后将其解析为图片，并以图片形式渲染在页面上。这个过程中不涉及跨域限制，因为浏览器认为图片是一种外部资源，与页面本身没有关系。

而当使用fabric.js的canvas标签加载图片时，浏览器会将图片作为一种纹理（texture）或者图案（pattern）来处理，这就需要涉及到跨域限制了。因为在canvas标签中，图片的加载和显示是通过JavaScript代码来实现的，而JavaScript代码是受到同源策略限制的，只能访问与当前页面具有相同协议、域名和端口号的资源。

因此，为了在fabric.js的canvas标签中显示跨域图片，需要在服务器端设置CORS（跨域资源共享）相关的HTTP响应头，从而使浏览器允许跨域请求。

相关问题

vue 在后端存储的图片通过url可以正常在img标签中显示，在fabric.js canvas标签中无法显示,，是因为fabric.js对跨域的限制吗？如何解决呢？ 是否可以通过将图片转换为base64来解决

是的，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属性值即可。

示例代码如下：

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']元素获取。

vue 在后端存储的图片通过url ‘http://127.0.0.1:8300/media/b002_dimension/b002_08_problemComplain/qd_car_photo/id4/id4_qd_r.png’ 可以正常在img标签中显示，在fabric.js canvas标签中无法显示,，是因为fabric.js对跨域的限制吗？如何解决呢？ 是否可以通过将图片转换为base64来解决

是的，fabric.js中默认对跨域请求是有限制的，如果要在fabric.js中加载跨域图片，需要在服务器端进行跨域设置。可以在服务器端设置Access-Control-Allow-Origin响应头来允许跨域请求。具体的设置可以参考相关的跨域设置资料。

另一种解决方式是将图片转换为base64格式。可以通过使用canvas将图片绘制到canvas画布中，然后使用toDataURL方法将canvas中的图片转换为base64格式。再将base64格式的图片作为fabric.Image对象的source来加载图片。这种方法可以避免跨域问题，但是需要考虑到base64格式的图片会比原始图片文件大很多，可能会影响网页的加载速度和性能。