Как сделать фотографию типичного формата, например, PNG, JPG и т. Д., HTML-элемент canvas для стилей и сценариев на уровне пикселей?

Question

У меня есть фотография, скажем, flower.png, и на этой фотографии шестой пиксель вниз в третьем столбце - #23997E, и я хочу условно изменить цвет этого пикселя, скажем, #E54864.

Как это сделано? Мне сказали, что холст HTML - это то, как можно манипулировать изображениями попиксельно. Как можно конвертировать, я полагаю, фотографию в холст, а затем указать конкретные пиксели этой фотографии для стилизации и написания сценариев?

Answer 1

В простейшем виде:

1. Создайте JavaScript-объект Image(): var img=new Image() ...
2. Нарисуйте это изображение на холсте, используя context.drawImage(img,0,0)
3. Установите желаемый цвет заливки холста: context.fillStyle='#E54864'
4. Заполните пиксель [3,6] желаемым цветом: context.fillRect(3,6,1,1)

Пример кода и демонстрация:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

// create an Image() object
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/colorwheel1.png";
function start(){

  // draw the image onto the canvas
  ctx.drawImage(img,0,0);

  // change pixel[3,6] to  #E54864
  ctx.fillStyle='#E54864';
  ctx.fillRect(3,6,1,1);

}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<p>Pixel[3,6] is now colored #E54864</p>
<canvas id="canvas" width=300 height=300></canvas>