7

これが可能かどうかはわかりません。HTMLキャンバスを実際に使用したことはありませんが、認識しています。

var imgPixels = canvasContext.getImageData(0, 0, canvas.width, canvas.height);

しかし、これを使用して、たとえば特定の色のすべてのピクセルを取得し、これらのピクセルを白に変更するにはどうすればよいですか？それで、私が赤に着色されたピクセルを持っているとしましょう：

if(pixel==red){
    pixel = white;
}

それは私が望むものの単純なバージョンですが、それを行う方法がわかりません...

誰かアイデアはありますか？

4

2 に答える 2

7

このようなことをします（これがキャンバスのチートシートです）：

const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");

const { width, height } = canvas;

const gradient = context.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(0.25, "#FF0000");
gradient.addColorStop(0.75, "#000000");

context.fillStyle = gradient;

context.fillRect(0, 0, width, height);

setTimeout(() => {
    const image = context.getImageData(0, 0, width, height);
    const { data } = image;
    const { length } = data;

    for (let i = 0; i < length; i += 4) { // red, green, blue, and alpha
        const r = data[i + 0];
        const g = data[i + 1];
        const b = data[i + 2];
        const a = data[i + 3];

        if (r === 255 && g === 0 && b === 0 && a === 255) { // pixel is red
            data[i + 1] = 255; // green is set to 100%
            data[i + 2] = 255; // blue is set to 100%
            // resulting color is white
        }
    }

    context.putImageData(image, 0, 0);
}, 5000);
<p>Wait for 5 seconds....</p>
<canvas width="120" height="120"></canvas>

お役に立てば幸いです。

于 2012-10-20T21:21:30.943 に答える
4

を取得すると、、、およびをgetImageData()含むオブジェクトが作成されます。datawidthheight

dataピクセルデータを含むをループすることができます。それぞれ赤、緑、青、アルファの4つのチャンクで利用できます。

したがって、コードは赤のピクセルを探し（赤のピクセルを作成するものを決定する必要があります）、赤、緑、青をすべてオンに設定します（白に変更するため）。次に、を使用して、を更新されたピクセルデータputImageData()に置き換えることができます。canvas

// You will need to do this with an image that doesn't violate Same Origin Policy.
var imgSrc = "image.png";
var image = new Image;

image.addEventListener("load", function() {

    var canvas = document.getElementsByTagName("canvas")[0];
    var ctx = canvas.getContext("2d");

    canvas.width = image.width;
    canvas.height = image.height;

    ctx.drawImage(image, 0, 0);

    var imageData = ctx.getImageData(0, 0, image.width, image.height);
    var pixels = imageData.data;
    var i;

    for (i = 0; i < pixels.length; i += 4) {
        // Is this pixel *red* ?
        if (pixels[i] > 100) {
            pixels[i] = 255;
            pixels[i + 1] = 255;
            pixels[i + 2] = 255;
        }
    }

    ctx.putImageData(pixels);

});

image.src = imgSrc;​
于 2012-10-20T21:15:22.607 に答える