板上各位大大安安,
我最近在写一个网页,可以让使用者上传多个图片或输入网址,读取图片后加到 card-
columns 里,并利用 face-api.js 找出脸孔特征且绘制。
上传的部分比较容易,但在处理网址时我就碰上麻烦惹。明明设好 img 的 src 且图片正常
显示,但使用 faceapi.detectSingleFace(img) 就跳出 Tainted canvases may not be
loaded. 错误。
类似问题在之前写插件的时候也困扰我许久,查惹半天资料还是雾煞煞,最后靠改成
faceapi.detectAllFaces(await faceapi.fetchImage(x.src)) 解决。打开 DevTools
console 试试 await fetchImage($0.src) 毫不意外地被 CORS 挡了下来。因此,我再试
await fetch($0.src, { mode: 'no-cors' }),虽然没有报错,status 却为 0、blob()
size 却也是 0,但在 network 页面 status 都 200,preview 也正常。
请教各位大大,遇到 CORS 这种问题该怎么处理?
感谢
网页:
https://www.kevinweng.tk/ab/bold-training.js
https://www.kevinweng.tk/ab/bold-training.html