Dentro do <body>:
<input type="file" id="myFile">Load image</input>
<br>
<img id="myImage" style="border:1px" />Marcação muito simples, apenas para fins de demonstração.
Quando o arquivo é selecionado, o onchangeevento é disparado. Usamos isso para carregar o arquivo do sistema de arquivos.
Quando o arquivo é carregado, o onloadevento dispara, () => showImage(fr)captura a frreferência do leitor de arquivos , para que possa ser passada como parâmetro.
showImagedefine a fonte na tag da imagem, informando ao navegador para carregar a imagem. O onloadevento captura a referência do elemento de imagem, finalmente extraindo os dados da imagem e armazenando-os na imageDatavariável para processamento posterior.
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var imageData;
document.getElementById('myFile').onchange = function (evt) {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
// FileReader support
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = () => showImage(fr);
fr.readAsDataURL(files[0]);
}
}
function showImage(fileReader) {
var img = document.getElementById("myImage");
img.onload = () => getImageData(img);
img.src = fileReader.result;
}
function getImageData(img) {
ctx.drawImage(img, 0, 0);
imageData = ctx.getImageData(0, 0, img.width, img.height).data;
console.log("image data:", imageData);
}