あなたのイメージをチェックします✅

最近では、キャンバスと旅をしており、以下の要素を学びました.

Getting started with the HTML canvas

Vanilla JavaScript save canvas as an image

Vanilla JavaScript colouring our canvas elements 🌈

Vanilla JavaScript images in canvas

Vanilla JavaScript canvas images to black and white

今日、私たちは間接的にキャンバスを使って何かをしています.
我々はチェックボックスアートを作成している!✅
私は、これが公式芸術形式であるかどうか、わかりません、しかし、現在、それはそうです.
結果は次のようになります.

HTML構造

HTMLに関しては、サンプル画像、キャンバスを使用して出力部を出力する必要があります.

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1600097347472/FaJTB7UrN.jpeg" id="eeveelutions" />
<canvas id="canvas" width="100" height="100"></canvas>
<div id="output"></div>

この場合、イメージは200x200 キャンバスは100x100 出力が400x400 .

CSSスタイリング

我々はスタイルにチェックボックスを使用しているので、私はそれらをお互いにスナップしてそれらを浮かせている.
と使用<br /> 新しい行を作成するには
BRは実際にはフロートのクリアとして動作します.

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  padding: 0;
}
canvas {
  opacity: 0;
}
input {
  width: 4px;
  height: 4px;
  margin: 0;
  padding: 0;
  float: left;
}
br {
  clear: both;
}
#output {
  width: 400px;
  line-height: 0px;
}

私たちのキャンバス、我々は不透明度を0に設定することによって隠れている.

ジャバスクリプト

まず、すべての変数を定義しましょう.

const img = document.getElementById("eeveelutions");
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const output = document.getElementById("output");
let loaded = 0;

今、我々はそれを行う前に我々のイメージロードを聞く必要があります.

img.onload = function () {
  loaded++;
    // Do stuff
};

我々はそれが2回、実際の負荷を発射し、一度キャンバス上に描画されるので、画像がロードされるときにカウントされます.
次に、我々はキャンバスにイメージを加えることができます

ctx.drawImage(img, 0, 0, 100, 100);

このパラメータは以下の通りです.( source , x , y , width , height )
ので、今私たちのキャンバスを持っているイメージが描かれている.それから、それが2番目の荷であるかどうかチェックしなければならなくて、その荷の中で魔法をし始めます.

if (loaded > 1) {
    // The second draw on the canvas
}

それから、キャンバスからimagedataを得ることができます.( x , y , width , height )

const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

関数の残りの部分を示します

let j = 0;
for (i = 0; i < imgData.data.length; i += 4) {
  let count = imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2];

  let _break = document.createElement("br");
  let checkbox = document.createElement("INPUT");
  checkbox.setAttribute("type", "checkbox");
  checkbox.checked = true;
  if (count > 383) checkbox.checked = false;

  output.appendChild(checkbox);
  j++;
  if (j === 100) {
    j = 0;
    output.appendChild(_break);
  }
}

私たちはj 行をカウントするためのパラメータですので、100行ごとに1行ですので、<br /> 要素.
ImageData APIが私たちに与えるので、主なループはあらゆる4つの要素の上でループだけですrgba 各ピクセルの値、4つの値を1ピクセルを定義します.
それから、我々は我々の色を数えますrgba 最初の3(R G B)を加えることによるピクセル.
そして、このピクセルが大きいか、383(255 + 255 + 255の半分)であるかどうかチェックすることによって、このピクセルが黒か白いピクセルかどうかチェックしてください.
それから、チェックボックスを作ります、そして、我々のピクセルが黒いならば、我々はチェックします.
最後に、出力divにチェックボックスを追加し、必要に応じて行を追加します.
そこで、このcodepenの上で遊びをしてください.

ブラウザサポート

ImageData APIだけでなく、キャンバス、非常に良いサポートを持っている!

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or