Fabricjs 无法在“WebGLRenderingContext”上执行“texImage2D”：图像元素包含跨域数据，可能无法加载答案

【问题标题】：Fabricjs Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loadedFabricjs 无法在“WebGLRenderingContext”上执行“texImage2D”：图像元素包含跨域数据，可能无法加载
【发布时间】：2020-07-07 23:46:26
【问题描述】：

我正在使用 Amazon S3 和云前端。图片网址看起来像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>

有人知道怎么解决吗？

【问题讨论】：

标签： reactjs fabricjs

【解决方案1】：

如果你想使用util.loadImage()，你应该提供它 crossOrigin 参数。在您的代码中，您正在设置 crossOrigin: 'anonymous' 在回调中 - 图像已经那时下载时使用了错误的 CORS 政策。
您问题中的图像实际上没有 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'})

【讨论】：