Fabricjs 无法在"WebGLRenderingContext"上执行'texImage2D'：图像元素包含跨源数据，可能无法加载

Question

我使用的是AmazonS3和云前端。图像url看起来像https://t.pimg.jp/061/089/535/2/61089535.jpg

我的代码看起来像

const imgUrl = 'https://t.pimg.jp/061/089/535/2/61089535.jpg';
fabric.util.loadImage(imgUrl, function(imgObj) {
const oImg = new fabric.Image(imgObj, {
crossOrigin: 'anonymous',
});
...
});

图像加载成功。但当我对该图像应用过滤器时，会出现错误。

已经在s3 bucket 上应用了cors配置

<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

有人知道怎么修吗？

Answer 1

1. 如果您想使用util.loadImage()，您应该为它提供crossOrigin参数。在您的代码中，您正在设置回调中的crossOrigin: 'anonymous'-图像已经下载时使用错误的CORS策略
2. 你问题中的图像实际上没有access-control-allow-origin标头集，至少在我写因此，我使用了一个不同的图像作为示例：

const canvas = new fabric.Canvas('c')
const imgUrl = 'https://c1.staticflickr.com/9/8873/18598400202_3af67ef38f_q.jpg'
fabric.util.loadImage(imgUrl, (imgObj) => {
const img = new fabric.Image(imgObj)
img.filters.push(new fabric.Image.filters.Grayscale())
img.applyFilters()
canvas.add(img)
}, null, 'anonymous')

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.js"></script>
<canvas id="c" width="300" height="200"></canvas>

我还建议使用fabric.Image.fromURL()——这是一种更干净的加载图像的方式：

fabric.Image.fromURL(imgUrl, (img) => {
img.filters.push(new fabric.Image.filters.Grayscale())
img.applyFilters()
canvas.add(img)
}, {crossOrigin: 'anonymous'})