🥇 Carregar imagem de arquivo local em JavaScript e obter dados de pixel

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);
}

Related Posts