Update: A similar request was posted on MetaSE two years ago, but still has no official response.
Researching a potential answer for a <canvas>
question, I ran into a problem that breaks the snippet but has little to do with the OP's issue.
The code fails because Cross-origin resource sharing (CORS) is not enabled on Stack Exchange's image server.
Code like this:
var srcImg = document.getElementById ("payldImg");
if (srcImg.complete) runCanvasCode ();
else srcImg.onload = runCanvasCode;
function runCanvasCode () {
var imgCanvas = $('<canvas />')[0];
imgCanvas.width = srcImg.width;
imgCanvas.height = srcImg.height;
imgCanvas.getContext ('2d').drawImage (srcImg, 0, 0, srcImg.width, srcImg.height);
var pixelData = imgCanvas.getContext ('2d').getImageData (3, 3, 1, 1).data;
console.log ("pixelData: ", pixelData);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img id="payldImg" src="https://i.sstatic.net/Gnd80.jpg">
... fails with:
"message": "SecurityError: The operation is insecure.",
or,
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
etc., depending on your browser.
The same code works fine when everything is hosted on my private server.
The prescribed workaround would add confusing complexity, if it worked at all for i.stack.imgur.com. (It doesn't, but it does just fine for i.chzbgr.com):
$("button").click ( function () {
var srcDesired = $("input[name=iSrc]:checked").val ();
var abnormalImg = new Image();
$("#imgCntnr").append (abnormalImg);
abnormalImg.crossOrigin = "Anonymous"; // Works for chzbgr, but not imgur.
abnormalImg.onload = function (zEvent) {
var imgCanvas = $('<canvas />')[0];
imgCanvas.width = abnormalImg.width;
imgCanvas.height = abnormalImg.height;
imgCanvas.getContext ('2d').drawImage (abnormalImg, 0, 0, abnormalImg.width, abnormalImg.height);
//-- CORS needed for this.
var pixelData = imgCanvas.getContext('2d').getImageData(3, 3, 1, 1).data;
console.log ("pixelData: ", pixelData);
};
if (srcDesired === "chzbgr")
abnormalImg.src = "https://i.chzbgr.com/maxW500/1691290368/h07F7F378/"; // Works
else if (srcDesired === "plnImgur")
abnormalImg.src = "https://i.imgur.com/PvrNtnLm.jpg"; // Normal fails but workaround works.
else
abnormalImg.src = "https://i.sstatic.net/Gnd80.jpg"; // Fails!
} );
label, input {
cursor: pointer;
margin: 0.85ex 0 3ex 2ex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Select image source:<br>
<label><input type="radio" value="iStack" name="iSrc"> i.stack.imgur.com</label>
<label><input type="radio" value="chzbgr" name="iSrc" checked> i.chzbgr.com</label>
<label><input type="radio" value="plnImgur" name="iSrc"> i.imgur.com</label><br>
<button>Attempt canvas code</button>
</p>
<p id="imgCntnr"></p>
The above code fails with:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://i.sstatic.net/Gnd80.jpg. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
... for i.stack.imgur.com but not i.chzbgr.com, nor i.imgur.com.
But i.imgur.com restricts Methods to GET, OPTIONS
, so it crashes the simple, optimal code snippet at the top of this post.
Please set CORS on i.stack.imgur.com, to allow for robust image use in concise working snippets.
(Can we be at least as good as chzbgr.com?)
i.stack.imgur.com
is currently less permissive thani.imgur.com
.