fabric.js里添加图片因为跨域问题无法正常渲染和canvas污染无法保存问题

解释：

在Fabric.js中，如果你遇到由于跨域问题导致无法正常渲染添加的图片，这通常是因为浏览器出于安全考虑，阻止了不同源的图片资源加载到canvas上。同时，因为图片不能被渲染到canvas上，也就导致了canvas污染无法保存的问题。

解决方法：

1. 确保图片资源与你的应用域同源。如果图片存储在另外一个域上，你需要将图片下载到同源的服务器上，然后再将其添加到Fabric.js的canvas中。
2. 如果你控制不了图片的服务器设置，可以尝试使用CORS（跨源资源共享）设置来允许跨域请求。确保图片的服务器配置了正确的CORS头部，允许你的应用域可以访问图片资源。
3. 如果你是在开发阶段，可以使用一些开发工具来绕过跨域限制，例如在本地启动一个代理服务器，所有的请求都通过这个服务器转发，或者使用浏览器插件来禁用CORS策略（注意：这仅用于开发环境，不应该在生产环境中使用）。
4. 如果你不需要在最终的canvas保存中包含图片资源的URL，而只是需要将图片渲染到canvas上，你可以先将图片转换为Blob或者DataURL，然后将这个资源添加到Fabric.js中。

示例代码：

// 假设你有一个图片的URL
var imgUrl = 'http://example.com/image.png';
 
// 使用Fabric.Image.fromURL方法加载图片
Fabric.Image.fromURL(imgUrl, function(img) {
  // 图片加载完成后，将其添加到canvas中
  canvas.add(img);
  canvas.renderAll();
});
 
// 如果需要绕过跨域问题，可以使用代理服务器或者CORS设置

确保在实际部署时，遵循最佳的安全和性能实践，避免引入不必要的安全风险。