【エラー】canvasでSecurityError: The operation is insecure が出て困った
状況
Webでcanvasを使った開発をしている際にエラーに遭遇（iOS13 safari）
※しかし何故かPC ChromeやiOS14ではエラーが出ず正常に動作。
エラー内容
SecurityError: The operation is insecure
SecurityError: The operation is insecure
このようなエラーがcanvas.toDataURL();の部分に出ていました。
このcanvas書き出し前に、srcが外部ページの静止画をdrawImageしていたのでどうやらここのCORSが原因ぽい。
試して失敗したこと
canvasにdrawImageしている画像は、JS側でnew Image();で生成していたので
同じようにJS側で以下のようにcrossOriginを設定しました。
img.crossOrigin = "Anonymous";
これでPC Chrome、iOS14などではエラーがなくなりましたが
iOS13ではエラーが出現。。。
成功したこと
JSで生成していた画像をそもそもhtml側で用意して置いとくことにしたらエラーが消えました。
<img crossOrigin="Anonymous" id="canvas-img" class="canvas-img" src="">
.canvas-img {
display: none;
}
canvasImg = document.getElementById("canvas-img");
context.drawImage(canvasImg, x, y, w, h);
Author And Source
この問題について(【エラー】canvasでSecurityError: The operation is insecure が出て困った), 我々は、より多くの情報をここで見つけました https://qiita.com/Damien/items/879b52f60e29f1b4125d著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .