JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="c"></canvas>
JavaScript
var ctx = document.getElementById('c').getContext('2d'),
xhr = new XMLHttpRequest();
xhr.open('GET', 'http://chovy.dyndns.org/cdn/16907303_1294527306.jpg');
xhr.overrideMimeType('text/plain;charset=x-user-defined');
xhr.onreadystatechange = loaded;
xhr.send();
function loaded() {
if (xhr.readyState != 4) return;
var resp = xhr.responseText;
var data = 'data:';
data += xhr.getResponseHeader('Content-Type');
data += ';base64,';
var decodedResp = '';
for(var i = 0, L = resp.length; i < L; ++i) {
decodedResp += String.fromCharCode(resp.charCodeAt(i) & 255);
}
data += btoa(decodedResp);
var img = new Image(data);
img.onload = function() {
ctx.drawImage(img, 0, 0);
var pixels = ctx.getImageData(16, 17, 1, 1).data;
alert(pixels[0]);
};
img.src = data;
}