reactjs - Fabricjs 无法在“WebGLRenderingContext”上执行“texImage2D”:图像元素包含跨域数据,可能无法加载
问题描述
我正在使用 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 存储桶上应用了 cors 配置
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
有谁知道如何解决?
解决方案
- 如果要使用
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'})
推荐阅读
- docker - 为什么 Google Cloud Build 中的数据库连接速度很慢?
- python - 如何在 Ubuntu 中使用 python 以非 root 用户身份运行 root 用户命令
- git - Git Flow:Bitbucket - 无法同步分支
- php - Laravel,带有连接的匿名全局范围
- installation - 我在 as400 中使用 RPGLE 和 CL 语言开发了一个应用程序,我在客户的 IBM i OS 上的安装计划应该是什么
- microsoft-graph-api - Outlook api $search 不返回不可变 ID
- python - 自定义损失函数 Tensorflow / Keras 惩罚相对距离
- sql - ORA-01722: 无效的数字 where 子句
- django - Django - TestCase - response.status 代码失败
- r - 提取r中具有相同名称的子列表的所有元素