ホームページ >ウェブフロントエンド >htmlチュートリアル >CanvasのImageDataの使い方
以前にもcanvasに関する記事がたくさんありますので、興味のある方はご覧ください。実際、canvasには多くの機能があります。物体。 。
キャンバスの ImageData オブジェクト
ImageData オブジェクトには、次の読み取り専用属性が含まれます:
幅
画像幅、単位はピクセル
画像の高さ、単位はピクセル
データ
Uint8ClampedArray 型一次元配列で、0 から 255 (255 を含む) の範囲の RGBA 形式の整数データが含まれます。
ImageData オブジェクトを作成する
新しい空の ImageData オブジェクトを作成するには、createImageData() メソッドを使用する必要があります。
var myImageData = ctx.createImageData(width, height);
上記のコードは、特定のサイズの新しい ImageData オブジェクトを作成します。すべてのピクセルは透明な黒にプリセットされています。
シーンのピクセル データを取得する
キャンバス シーンのピクセル データを含む ImageData オブジェクトを取得するには、getImageData() メソッドを使用できます:
var myImageData = ctx.getImageData(left, top, width, height);
このメソッドは、キャンバス領域のオブジェクト データを表す ImageData オブジェクトを返します。この方法 キャンバスの四隅は、(左、上)、(左+幅、上)、(左、上+高さ)、(左+幅、上+高さ)の4点で表されます。これらの座標点はキャンバス座標空間要素として設定されます。
シーンにピクセル データを書き込む
putImageData() メソッドを使用して、ピクセル データをシーンに書き込むことができます。
ctx.putImageData(myImageData, dx, dy);
dx パラメータと dy パラメータは、シーンの左上隅に描画するピクセル データから取得したデバイス座標を表します。
たとえば、myImageData で表される画像をシーンの左上隅に描画するには、次のコードを作成できます。ビデオの単色の背景フィルタリング
今日は、getImageData を使用して単色の背景をフィルタリングします。
ctx.putImageData(myImageData, 0, 0); toDataURL 将canvas转为 data URI格式アプリケーション 3: 画像のグレースケールと反転カラー この例では、すべてのピクセルを反復処理して値を変更します。次に、変更したピクセル配列を putImageData() を通じてキャンバスに戻します。 invert 関数は、色の最大値を 255 減算するだけです。グレースケール関数は、赤、緑、青の平均を使用するだけです。式 x = 0.299r + 0.587g + 0.114b などの加重平均を使用することもできます。
<canvas id="canvas" width="5" height="5"></canvas> var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); console.log(dataURL); // "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby // blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC" var fullQuality = canvas.toDataURL("image/jpeg", 1.0); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z" var mediumQuality = canvas.toDataURL("image/jpeg", 0.5); var lowQuality = canvas.toDataURL("image/jpeg", 0.1); 应用一:颜色选择器 var img = new Image(); img.src = 'haorooms.jpg'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); img.onload = function() { ctx.drawImage(img, 0, 0); img.style.display = 'none'; }; var color = document.getElementById('color'); function pick(event) { var x = event.layerX; var y = event.layerY; var pixel = ctx.getImageData(x, y, 1, 1); var data = pixel.data; console.log(data); var rgba = 'rgba(' + data[0] + ',' + data[1] + ',' + data[2] + ',' + (data[3] / 255) + ')'; color.style.background = rgba; color.textContent = rgba; } canvas.addEventListener('mousemove', pick);
アプリケーション 4 - ズームとアンチエイリアス
let processor = { timerCallback: function() { if (this.video.paused || this.video.ended) { return; } this.computeFrame(); let self = this; setTimeout(function () { self.timerCallback(); }, 0); }, doLoad: function() { this.video = document.getElementById("video"); this.c1 = document.getElementById("c1"); this.ctx1 = this.c1.getContext("2d"); this.c2 = document.getElementById("c2"); this.ctx2 = this.c2.getContext("2d"); let self = this; this.video.addEventListener("play", function() { self.width = self.video.videoWidth / 2; self.height = self.video.videoHeight / 2; self.timerCallback(); }, false); }, computeFrame: function() { this.ctx1.drawImage(this.video, 0, 0, this.width, this.height); let frame = this.ctx1.getImageData(0, 0, this.width, this.height); let l = frame.data.length / 4; for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } this.ctx2.putImageData(frame, 0, 0); return; } };
アプリケーション 5 - キャンバスの手描きと画像のダウンロード
var img = new Image(); img.src = 'rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); img.style.display = 'none'; var imageData = ctx.getImageData(0,0,canvas.width, canvas.height); var data = imageData.data; var invert = function() { for (var i = 0; i < data.length; i += 4) { data[i] = 225 - data[i]; // red data[i + 1] = 225 - data[i + 1]; // green data[i + 2] = 225 - data[i + 2]; // blue } ctx.putImageData(imageData, 0, 0); }; var grayscale = function() { for (var i = 0; i < data.length; i += 4) { var avg = (data[i] + data[i +1] + data[i +2]) / 3; data[i] = avg; // red data[i + 1] = avg; // green data[i + 2] = avg; // blue } ctx.putImageData(imageData, 0, 0); }; var invertbtn = document.getElementById('invertbtn'); invertbtn.addEventListener('click', invert); var grayscalebtn = document.getElementById('grayscalebtn'); grayscalebtn.addEventListener('click', grayscale); }
これらの事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングなコンテンツについては、注意してください。 PHP 中国語 Web サイトの他の関連記事へ!
関連書籍:
CSS3のローディングエフェクトを作成する方法CSS3を使用してアイコンエフェクトを作成する方法
以上がCanvasのImageDataの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。