Test Image CORS

by Leo

HTML

<h1>Test Image CORS</h1>
<h2>see <a href = "https://developer.mozilla.org/ru/docs/Web/HTTP/CORS">CORS</a></h2>
<h2>see <a href = "https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">Allowing cross-origin use of images and canvas</a></h2>
<h2>see <a href = "https://html.com/attributes/img-crossorigin/">img crossorigin=””</a></h2>
<h2>see <a href = "https://stackoverflow.com/questions/39148582/javascript-todataurl-throwing-security-error-tainted-canvases-may-not-be-ex">Tainted canvases may not be exported.”</a></h2>
<!-- ---------------------------------------------------------------------------------------------------------------  -->


<img id="imgMarkup1" draggable="false" alt="" role="presentation" 
src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i14!2i2620!3i6333!4i256!2m3!1e0!2sm!3i452161210!3m9!2sen-GB!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&amp;key=AIzaSyAwxGAyoz6Bv5m1OGdojjB94JJl06MrkLk&amp;token=14341" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">

<img id="imgMarkup2" crossOrigin="" draggable="false" alt="" role="presentation" 
src="https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i14!2i2620!3i6333!4i256!2m3!1e0!2sm!3i452161210!3m9!2sen-GB!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&amp;key=AIzaSyAwxGAyoz6Bv5m1OGdojjB94JJl06MrkLk&amp;token=14341" style="width: 256px; height: 256px; user-select: none; border: 0px; padding: 0px; margin: 0px; max-width: none;">

<!-- <canvas id="canvas" width=256 height=256></canvas> -->

JavaScript

console.log("======= case 1 (image in DOM, default crossOrigin)");
    imageReceived("======= case 1", document.getElementById("imgMarkup1"))();
    console.log("  ");
    
    console.log("======= case 2 (image in DOM, anonymous crossOrigin)");
    imageReceived("======= case 2", document.getElementById("imgMarkup2"))();
    console.log("  ");
    
    console.log("======= case 3 (js, default crossOrigin)");
    var imgA = new Image();
    imgA.addEventListener("load", imageReceived("======= case 3", imgA), false);
    //imgA.refererPolicy='';
    imgA.src = 'https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i14!2i2615!3i6334!4i256!2m3!1e0!2sm!3i452161210!3m9!2sen-GB!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&key=AIzaSyAwxGAyoz6Bv5m1OGdojjB94JJl06MrkLk&token=100706';

    console.log("======= case 4 (js, anonymous crossOrigin)");
    var imgB = new Image();
    imgB.crossOrigin = "anonymous";
    imgB.addEventListener("load", imageReceived("======= case 4", imgB), false);
    imgB.src = 'https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i14!2i2618!3i6333!4i256!2m3!1e0!2sm!3i452161210!3m9!2sen-GB!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&key=AIzaSyAwxGAyoz6Bv5m1OGdojjB94JJl06MrkLk&token=27507';
    
    function imageReceived(log, downloadedImg) {
        return function () {
          console.log(log, " - loaded")
          //let canvas = document.getElementById('canvas');
          let canvas = document.createElement("canvas");

          let context = canvas.getContext("2d");

          canvas.width = downloadedImg.width;
          canvas.height = downloadedImg.height;
         
          context.drawImage(downloadedImg, 0, 0);
         
          try {
             console.log(log, "- result -", canvas.toDataURL("image/png").substring(0, 20)+"...");
             console.log("  ");
          }
          catch(err) {
            console.log(log, "- error -", err);
            console.log("  ");
          }  
        }
    }