Canvas を使用して画像を処理する方法

Canvas (中国語では「キャンバス」と訳されます) には、HTML5 に新しい 要素があり、JavaScript と組み合わせてキャンバス内にグラフィックを動的に描画できます。この記事では主に、Canvas を使用して画像を処理するための関連情報をサンプル コードを通じて詳しく紹介します。この記事は、皆さんの学習や仕事に役立つことを願っています。

プロセスはおそらく非常に簡単で、主に次の 3 つのステップに分かれています:

キャンバス画像処理

はい、象を冷蔵庫に入れるのと同じくらい簡単です(笑)。

1. 主なAPI

プロセス全体で使用される主なCanvas APIは次のとおりです:

• 画像の描画:drawImage()

• 画像データの取得:getImageData()

• 画像データの書き換え:putImageData( )

• 画像のエクスポート: toDataURL()

1.drawImage()

その名前が示すように、このメソッドは Canvas キャンバスに画像を描画するために使用されます。

①位置。キャンバス上の画像: context.drawImage(img,x,y)

② キャンバス上に画像を配置し、画像の幅と高さを指定します: context.drawImage(img,x,y,width,height)

③ 画像を切り取り、切り取った部分をキャンバス上に配置します: context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

上記のパラメータ値は、次の表:

パラメータ	説明
img	は、使用する画像、キャンバス、またはビデオを指定します。
sx	はオプションです。剪断を開始する x 座標の位置。
sy	オプション。せん断を開始する y 座標の位置。
幅	オプション。トリミングされた画像の幅。
身長	はオプションです。切り取られた画像の高さ。
x	画像のx座標位置をキャンバス上に配置します。
y	画像のy座標位置をキャンバス上に配置します。
幅	オプション。使用する画像の幅。 (画像を拡大または縮小)
高さ	オプション。使用する画像の高さ。 (画像を拡大または縮小します)

2. getImageData()

具体的な使い方は以下の通りです:

指定した四角形範囲内のピクセルデータを取得します。キャンバスの: var ImageData = context .getImageData(x,y,width,height)

上記のパラメータ値については、次の表で説明します。 x

コピーを開始する左上隅の位置の x 座標。 y コピーを開始する左上隅の y 座標。 width コピーされる長方形領域の幅。 height コピーされる長方形領域の高さ。 このメソッドは非常に単純で、画像データを Canvas キャンバスに書き換えるために使用されます。具体的な使用方法は次のとおりです。 上記のパラメーター値については、次の表で説明します。

このメソッドは、幅、高さ、データの 3 つの属性を持つ ImageData オブジェクトを返します。これは、画像内の各ピクセルのデータを保存するため、最も重要です。これらのデータを取得した後、それらを処理し、最終的に Canvas キャンバスに書き換えることで、画像の加工と変換を実現します。データ配列の具体的な使用法については、次の例で確認できます。	3. putImageData()
context.putImageData(imgData,x,y,dirtyX,dirtyY, DirtyWidth,dirtyHeight )

Parameter

Description

imgData

キャンバスに戻す ImageData オブジェクトを指定します。 xImageData オブジェクトの左上隅の x 座標 (ピクセル単位)。 yImageData オブジェクトの左上隅の y 座標 (ピクセル単位)。 ダーティXオプション。キャンバス上の画像を配置する水平方向の値 (x) (ピクセル単位)。 汚いオプション。キャンバス上の画像を配置する水平方向の値 (y) (ピクセル単位)。 dirtyWidthオプション。キャンバス上に画像を描画するために使用される幅。 dirtyHeightオプション。キャンバス上に画像が描画される高さ。

4. toDataURL()

このメソッドは、上記の 3 つのメソッドとは異なり、画像のパス アドレスとして直接入力できる、Canvas オブジェクトのメソッドです。 img> タグの src 属性の具体的な使用法は次のとおりです:

var dataURL = Canvas.toDataURL(type, encoderOptions);画像形式、デフォルトはimage/pngです。

encoderOptionsオプション。指定した画像形式がimage/jpegまたはimage/webpの場合、画質を0～1から選択できます。値が範囲外の場合は、デフォルト値の 0.92 が使用されます。他のパラメータは無視されます。 2. 画像処理の例 この例では、コードを通じてカラー画像を白黒画像に処理する方法を簡単に紹介します。

<!--HTML-->
<canvas id="canvas" width="600" height="600"></canvas>
<input id="handle" type="button" value="处理图片" />
<input id="create" type="button" value="生成图片" />
<p id="result"></p>

rree関連する推奨事項: 画像のキャンバス処理

	PHP画像処理で複数の画像を1つに結合する例

キャンバス画像処理

以上がCanvas を使用して画像を処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。