HTML5 Canvas画像抽出、ピクセル情報取得、ヒット検出

今日は主にキャンバスのより強力な機能を紹介します

例えば、キャンバスのコンテンツを画像に抽出する
キャンバスのピクセル情報の取得と変更
とキャンバスのヒット検出
まず第一に、まだ作成する必要がありますCanvas

<canvas id="myCanvas" width=500 height=500></canvas>

画像抽出

まず明確な点は、
toDataURL() は環境オブジェクトではなく、 Canvas オブジェクト自体のメソッドであるということです
このメソッドは、キャンバスのコンテンツを画像に抽出します ( Base64エンコード)
使い方を見てみましょう

canvas 画像に変換します

暇なときにCanvasを使って太極図を作りました
jsコードは以下の通りです

let canvas = document.getElementById('myCanvas');
let cxt = canvas.getContext('2d');
let l = canvas.width/2;
const PI = Math.PI;
cxt.translate(l, l);let createTaiChi = () => {
    cxt.clearRect(-l, -l, l, l);
    cxt.arc(0, 0, l, 0, 2*PI, 0);
    cxt.stroke();
    cxt.beginPath();
    cxt.arc(0, -l/2, l/2, -PI/2, PI/2, 0);
    cxt.arc(0, l/2, l/2, 3/2*PI, PI/2, 1);
    cxt.arc(0, 0, l, PI/2, PI*3/2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = '#fff';
    cxt.arc(0, -l/2, l/7, 0, PI*2, 0);
    cxt.fill();
    cxt.beginPath();
    cxt.fillStyle = '#000';
    cxt.arc(0, l/2, l/7, 0, PI*2, 0);
    cxt.fill();
};

createTaiChi();

そしてCSS と一緒に使用すると、回転し続けるように見えます

#myCanvas {    
width: 250px;    
height: 250px;    
margin: 100px;    
animation: rotate 3s linear infinite;
}@keyframes rotate{
    0% {        
    transform: rotateZ(0);    
    }
    100% {        
    transform: rotateZ(360deg);    }}

ここで設定した CSS の幅と高さは、キャンバスの元の幅よりも広いことに注意してください。高さは 2 倍になります
(これにより、キャンバスがより鮮明になります)

---

次に、キャンバスに描いた太極拳図を画像に変換します
まず、キャンバスの Base64 エンコードを取得する必要があります

let data = canvas.toDataURL();console.log(data);

これをコンソールで印刷して、どのように見えるかを確認します

それを画像に変換したいのですが、
img タグを作成し、src を data に設定するだけです

let img = document.createElement('img');
img.src = data;document.body.appendChild(img);

この時点で、ページ内に追加の静的な太極拳図があります
サイズは、キャンバスの幅/高さの属性 500×500

同一オリジンポリシーの制限

このメソッドは同一オリジンポリシーによって制限されていることに注意してください
たとえば、ページにローカル画像を追加します
次に、この画像をキャンバスに描画します

let img = document.getElementsByTagName('img')[0];
cxt.drawImage(img, 0, 0);let data = canvas.toDataURL();

ブラウザはエラーを報告します

ローカルサーバーを使用する場合は、このメソッドを使用できます
このメソッドが同一生成元ポリシーによって制限されていることを証明します

ピクセル情報

getImageData(x , y を使用します) 、dx、dy) はキャンバスのピクセル情報を取得できます
メソッドは環境オブジェクト (ここでは cxt です) によって呼び出されます
(同じ生成元ポリシーにも準拠します)
最初の 2 つのパラメーターは、キャンバスのピクセル情報を取得するための開始座標です画像情報と最後の 2 つのパラメータは画像情報の幅と高さを取得するためのものです
(長方形描画関数と同様)
このメソッドは ImageData オブジェクト (ピクセル情報配列データと幅/高さを含む) を返します
主にこのオブジェクトの data 属性を使用します

キャンバスのサイズは 500×500 です
これがキャンバス上のすべてのピクセル情報を取得する方法です

console.log(cxt.getImageData(0, 0, 500, 500).data);

この配列の長さは 100w であることがわかりました

---

キャンバスに4つのピクセルがある場合
それぞれピクセル情報はRGBAの4つの値に分割されます
その場合、配列の長さは4×4 = 16になるはずです
それらは
1R 1G 1B 1A
2R 2G 2Bです2A
3R 3G 3B 3A
4R 4G 4B 4A

---

ここでのキャンバスには合計 500×500 = 25w ピクセルがあります
したがって、ピクセル情報配列のサイズは 25w×4 = 100w です

createImageData(width 、高さ) メソッド
空白の imageData オブジェクトを作成します

let blankImg = cxt.createImageData(250, 250);
console.log(blankImg);

---

putImageData(imgData, x, y) を使用して、元のキャンバスに画像ピクセルをオーバーレイします
imgData は imgData オブジェクト、x、y は開始座標ですオーバーレイの
例として、上で作成した250×250を作成します 空白の画像が元のキャンバスを覆います

cxt.putImageData(blankImg, 0, 0);

ヒット検出

isPointInPath()はピクセルがパス領域内にあるかどうかを検出できます
メソッド使い方はとても簡単です

cxt.rect(100, 100, 300, 300);if(cxt.isPointInPath(200, 200)){
    cxt.stroke();}

---

isPointInStroke() はピクセルがパス上にあるかどうかを検出するために使用されます、使い方は似ています
ですが互換性はあまり良くありません

上記はHTML5 Canvas画像抽出、ピクセル情報の内容です関連コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) に注目してください。