crossorign属性は、img, script, audio, video, link要素で指定できます。同一生成元ポリシー(Same-Origin Policy) に対する CORS(Cross-Origin Resource Sharing) に関する属性で、異なったオリジン(プロトコル, サーバ名, ポート番号の組み合わせ)間で画像などを共有するために使用します。
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script> window.addEventListener('load', function() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var img = new Image(); img.crossOrigin = "anonymous"; img.src = "http://other-site.exapmple.com/sample.png" + "?" + new Date().getTime(); img.onload = function() { context.drawImage(img, 40, 40); var base64 = canvas.toDataURL("image/png"); // crossorigin無しだとエラー : } }); </script> <canvas id="canvas" width=400 height=400 style="border:1px solid gray;"></canvas>
※ 画像に getTime() をつけているのは、Internet Explorer のキャッシュに対する対策です。