今回はJSで白黒画像を設定する方法を紹介します。JSで白黒画像を設定する場合の注意点を以下に具体例として挙げていきます。
HTML5 では
まずはレンダリングを見てみましょう
左側がimgタグ、右側がcanvas要素タグです
<img src="1.jpg" style="width: 200px; height: 199px"/> <canvas id="drawing" width="200" height="199" ></canvas>
JSコードはとてもシンプルです。たった 20 行しかありませんが、人々に釣り方を教えるという精神で、ソースコードを一番下に載せておきます。
1. 画像について
いわゆる画像はピクセルで構成されている、つまり 300*300 の画像には合計 300*300 のピクセルがあり、各ピクセルのポイントは次のように構成されていることを誰もが知っているはずです。 3 原色 (赤、緑、青) と透明度 (アルファ)。したがって、画像の画像データを変更したい場合は、実際には画像の各ピクセルのデータを変更します。
2. APIについて
var drawing = <a href="//m.sbmmt.com/code/658.html" target="_blank">document<code>var drawing = <a href="//m.sbmmt.com/code/658.html" target="_blank">document</a>.getElementById('drawing')
; 这个方法可以拿到 canvas对象,canvas对象提供了 2D、3D两种绘图方式,这里我们使用2D绘图
使用 context2d = drawing.getContext('2d');
方法获得context2d对象。拿到context2d对象之后,我们通过context2d提供的方法getImageData(),来获取图像数据,getImageData()有4个参数,分别表示画面区域的 x 和 y 坐标以及该区域的像素宽度和高度 var imagedata = context2d.getImageData(0, 0, image.width, image.height);
.getElementById( 'drawing'); このメソッドは、キャンバス オブジェクトを取得できます。キャンバス オブジェクトには 2D と 3D の 2 つの描画メソッドが用意されています
context2d = drawing.getContext('2d'); を使用します。
context2d オブジェクトを取得するメソッド。 context2d オブジェクトを取得した後、context2d が提供する getImageData() メソッドを通じて画像データを取得します。 getImageData() には 4 つのパラメーターがあり、それぞれ画面領域の x 座標と y 座標、領域のピクセル幅と高さを表します。 code> var imagedata = context2d.getImageData(0, 0, image.width, image.height);
ImageData オブジェクトには、width、height、data の 3 つのプロパティがあります。データ属性は配列
function drawImageData () { var context2d = null; if(drawing.getContext) { context2d = drawing.getContext('2d'); } if (context2d == null) { return; } var image = document.images[0]; context2d.drawImage(image, 0 , 0); var imagedata = context2d.getImageData(0, 0, image.width, image.height); var data = imagedata.data; console.log('data: ' + data); var i,len,red,green,blue,alpha,average; for (i = 0 , len = data.length; i < len; i+=4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; average = Math.floor((red + green + blue) / 3); data[i] = average; data[i+1] = average; data[i+2] = average; } imagedata.data = data; context2d.putImageData(imagedata, 0, 0); }
アップロードされた画像のタイプとサイズを決定するために必要な手順
React props と state 属性の使用の詳細な説明
以上が画像のJS白黒設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。