Холст JavaScript DrawImage getImageData

Я не могу понять, как работают 2 метода с холстом: drawImage getImageData на самом деле, я хотел бы разобрать растровое изображение в массив точек RGBA, иметь возможность преобразовать его и отобразить с помощью метода putImageData. Но работает только одно: drawImage или getImageData. Прошу помощи - объясните, как эти методы влияют друг на друга.

<!DOCTYPE html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
      <title> Canvas to array </title>
     </head>
<body>
    <canvas id="canvas" width="1200" height="600" />
    <script>
      "use strict"
      let imageData;
      let My_img = new Image();
      My_img.src = 'test1.jpg';
      let cnv = document.getElementById("canvas");
      let ctx = cnv.getContext("2d");
      My_img.onload = function() {
          ctx.drawImage(My_img, 0, 0);
          imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          for (let i=0; i<imageData.data.length; i+=4){
             imageData.data[i]=0;
             imageData.data[i+1]=255;
             imageData.data[i+2]=0;
             imageData.data[i+3]=222;
          }
         ctx.putImageData(imageData,300,300);
      };
    </script>
</body>
</html>

javascript canvas drawimage getimagedata
person Alexandr Turin    schedule 11.02.2020    source источник
comment
Боюсь, ваш вопрос не слишком ясен - в чем ваша конкретная проблема? (кстати, цикл for манипулирует данными, и вы фактически устанавливаете зеленый цвет для каждого пикселя — для чего это нужно?)   -  person obscure    schedule 11.02.2020
comment
ctx.putImageData (данные изображения, 300 300); // ничего не отображает, зеленый — просто пример изменения массива.   -  person Alexandr Turin    schedule 11.02.2020
comment
Да я вижу, это просто не имеет смысла. ;) Или вы имеете в виду, что проблема в том, что на самом деле ваши данные не помещаются на холст?   -  person obscure    schedule 11.02.2020
comment
да - я не могу их разместить, или я не могу их прочитать с помощью getImageData   -  person Alexandr Turin    schedule 11.02.2020
comment
Ну, ваш фрагмент кода просто отлично работает - в чем именно проблема?   -  person obscure    schedule 11.02.2020
comment
Я вижу только свою картинку, нарисованную с помощью метода drawImage. Где все мои зеленые пиксели?)   -  person Alexandr Turin    schedule 11.02.2020
comment
Давайте продолжим это обсуждение в чате.   -  person obscure    schedule 11.02.2020
comment
@AlexandrTurin В моем примере ниже вам нужно СОХРАНИТЬ исходные значения пикселей и масштабировать их с коэффициентом (при этом привязывая их как минимум к 255, то есть 0xFF).   -  person Mr. Polywhirl    schedule 11.02.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вам необходимо установить флаг перекрестного происхождения на объекте изображения как «Анонимный».

My_img.crossOrigin = "Anonymous";

См. также: Как исправить ошибку getImageData() Холст был испорчен данными из разных источников?

Демо

let ctx = document.getElementById("canvas").getContext("2d");
let img = new Image();
img.crossOrigin = "Anonymous";
img.src = 'https://placekitten.com/200/138';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
  setTimeout(() => filterImage(ctx), 1000);
};

// Multiply the value of the red channel by 2 and the blue channel by 3.
function filterImage(ctx) {
  let d = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
  for (let i = 0; i < d.data.length; i += 4) {
    d.data[i + 0] = Math.min(Math.floor(d.data[i + 0] * 2.0), 0xFF); // R
    d.data[i + 1] = Math.min(Math.floor(d.data[i + 1] * 1.0), 0xFF); // G
    d.data[i + 2] = Math.min(Math.floor(d.data[i + 2] * 3.0), 0xFF); // B
    d.data[i + 3] = 0xFF;                                            // A
  }
  ctx.putImageData(d, 0, 0);
}
<canvas id="canvas" width="200" height="138" />

person Mr. Polywhirl    schedule 11.02.2020