状況
Webでcanvasを使った開発をしている際にエラーに遭遇（iOS13 safari）
※しかし何故かPC ChromeやiOS14ではエラーが出ず正常に動作。
エラー内容
SecurityError: The operation is insecure
このようなエラーがcanvas.toDataURL();の部分に出ていました。
このcanvas書き出し前に、srcが外部ページの静止画をdrawImageしていたのでどうやらここのCORSが原因ぽい。
試して失敗したこと
canvasにdrawImageしている画像は、JS側でnew Image();で生成していたので
同じようにJS側で以下のようにcrossOriginを設定しました。
script.js
img.crossOrigin = "Anonymous";
これでPC Chrome、iOS14などではエラーがなくなりましたが
iOS13ではエラーが出現。。。
成功したこと
JSで生成していた画像をそもそもhtml側で用意して置いとくことにしたらエラーが消えました。
index.html
<img crossOrigin="Anonymous" id="canvas-img" class="canvas-img" src="">
style.css
.canvas-img {
display: none;
}
script.js
canvasImg = document.getElementById("canvas-img");
context.drawImage(canvasImg, x, y, w, h);