◆ ホント クロスドメイン制約邪魔!消えろ!!💢
◆ 画像貼っただけで汚染(taint)って何なの

canvas へ画像データの表示はすでに img タグで読み込んでるものからでもできると知って canvas からバイナリデータ取り出せないか調べてたらいけるみたいです
これは来たんじゃないの!?? ……と すごく期待したのに別ドメインの画像データを追加した canvas では toDataURL などのエクスポート系関数ができなくなっていました

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported.


https://developer.mozilla.org/ja/docs/Web/HTML/CORS_enabled_image
CORS を用いずとも Canvas で画像は扱えますが、この場合 Canvas は汚染 (taint) されてしまいます。Canvas が一度汚染されてしまうと、その Canvas からデータを取り出すことはできなくなります。つまり、toBlob(), toDataURL(), getImageData() などのメソッドが利用できません。利用するとセキュリティエラーが投げられます。
だそうです

画像埋め込んだだけで汚染とか言われても 別に問題ないので余計なことしないで欲しいです
なんですか 閲覧注意な画像や見せられないよ!な画像で汚染されてるですか


最初試したのが別ドメインだと思ってうまく言ったから関数まで作ったのに結局使えないってねー
function imgToBinary(img, type, opt){
var b64 = imgToBase64(img, type, opt)
var bstr = atob(b64.split(',')[1]);
var buf = new Uint8Array(bstr.length);
for(var i=0;i<bstr.length;i++){
buf[i] = bstr.charCodeAt(i);
}
return buf
}

function imgToBase64(img, type, opt){
var c = document.createElement("canvas")
c.width = img.naturalWidth
c.height = img.naturalHeight
c.getContext("2d").drawImage(img, 0, 0)
return c.toDataURL(type || detectMimeType(img.src), opt)
}


function detectMimeType(url){
var match = url.match(/^data:(.*?);/)
return match ? match[1] : {
jpg: "image/jpeg",
jpeg: "image/jpeg",
png: "image/png",
webp: "image/webp"
}[new URL(url).pathname.split(".").pop()]
}

試してみる用に HTML と同じドメインで画像置いてるサイト探しましたが 大手ポータルサイトやブログなどは画像用の別ドメインがあって個人のホームページくらいしか同じドメインに画像があるところが見当たらなかったです

せめて許可制じゃなくて拒否制にしてくれればいいのに

やっぱりブラウザ拡張機能でパーミッション全部許可ってするのが便利でいいです
インストールしてる人しか使えないのが欠点ですけど