Javascript 获取图像的像素数据

Question

我需要从我的计算机加载一个 png 文件并循环遍历每个像素值。 我试过 canvas，但它打破了我不明白的跨域内容......

var img = new Image(); 
img.src = "map.png";

var canvas = document.getElementById("secondaryCanvas");
var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, 30, 30);

console.log(ctx.getImageData(0,0,1,1));

...有时有效，有时无效？...我完全迷路了

Answer 1

如果页面直接从文件系统加载，则无法读取像素数据。 您必须从 web 服务器加载页面。 安装 apache 并从 localhost 加载

关于它有时“工作”的事实取决于您调用 getImageData 时图像是否已在 canvas 中绘制。

如果图像尚未加载，您可以调用 getImageData，因为您读取的不是图像数据而是空白 canvas。

如果您在图像 onload 事件中调用 getImageData，则代码将始终失败

var img = new Image(); 
img.onload = function() {
    console.log(this)
    var canvas = document.getElementById("secondaryCanvas");
    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0);

    console.log(ctx.getImageData(100,100,1,1));
}
img.src = "map.png";

Answer 2

这是我在公共汽车上制作的一个快速（虽然不干净）的例子，只是因为我不敢相信没有人回答这个黑客

如果要测试，请将其保存为 index.html 并用 chrome 打开

TLDR； 将文件加载为 base64 然后将其用作图像的 src

<script>

    async function toBase64(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = () => resolve(reader.result);
            reader.onerror = error => reject(error);
        });
    }

    async function reset() {
        const input = document.querySelector('input');
        console.log(input.files)

        const base64 = await toBase64(input.files[0]);
        console.log(base64)

        const src = base64;

        var img = new Image();
        img.onload = function () {
            console.log(this)
            var canvas = document.getElementById("secondaryCanvas");
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);
            console.log(ctx.getImageData(100, 100, 1, 1));
        }
        img.src = src;
    }
</script>
<input type="file" id="input" onchange="reset()" />
<canvas id="secondaryCanvas"></canvas>