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>