Uncaught TypeError: ctx.putImagenData is not a function

Рейтинг: 0Ответов: 1Опубликовано: 27.05.2023

Я пытаюсь создать небольшой редактор изображений при помоши canvas.

Выдает ошибку:

Uncaught TypeError: ctx.putImagenData is not a function

let img = new Image();
        img.onload = update;
        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxMAAAsTAQCanBgAAAGiSURBVDhPlZE7rkFRFIYdDiJECCERRGjMQCjUGgOQGIIYggQToDEIrU6iUFDp1FSEICEeEe/7nbs2xa3clZx99lr7///10l6vl+k/pgicmqZJCLvf7xLRdV2F3hjt+XzicPlwer3eeDx2OBzn8zmdTqdSqQ/aQHLjd71e+/3+ZrOBPxgMFouFIGKxGAReo9FoNps1m81GBh6m02m1Wl2v116v12q1BoNBn8+Hu1wuYSIUCoVqtVo4HNYlERput9vpdJ5Op2QyWSqVXC7XbrdrNBqTySSRSEDjCaSZD7NYLHa7fb/fx+PxcrmMcKvVwoUZiUQOh4PNZiOzIki5l8uFLvP5/OPxIHu73a7X6+TJ5XLH41FaVQTQ+GKgESMbA0WSkxEL5hf/LgkfHHqdTodUlUqlUChwbrfbbrdLe0JAUZWEzO1242E2mzWbTbSLxSKToGlGxDC4Y9CMRYo8hcpY2cNoNPL7/avVCi2Px8NaAoEA+Q0wIX5kGA6H8/mcBTMx5sMAEAbEotBig5lMBmnV7qdEiYgr9ieoMnxvakrfmsn0AyLUEuUB9n4LAAAAAElFTkSuQmCC";
   

function editCanvas(inImagen) {
  const width = inImagen.width,
        height = inImagen.height,
        src = inImagen.data;
 updateCanvasPixel(width, height , function(dst) {
  for (let i = 0; i < dst.length; i++) {
      dst[i] = src[i];
    }    
  });

}


function getImageData() {

  const canvas = document.getElementById("canvasEdihion");
  const ctx = canvas.getContext("2d");    
  canvas.width = img.width;
  canvas.height = img.height;

  ctx.drawImage(img, 0, 0); 

  return ctx.getImageData(0, 0, img.width, img.height);
}


function updateCanvasPixel(width, height, func) {
  const canvas = document.getElementById("canvasEdihion");
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext("2d");
  const outImagen = ctx.createImageData(width,height);
  const dst = outImagen.data;
  func(dst);
  ctx.putImagenData(outImagen, 0,0);
}


function update() {
  editCanvas(getImageData());
}
<canvas id="canvasEdihion">Imagen</canvas>

Ответы

▲ 1

Используйте не putImagenData, а putImageData.

У вас опечатка в коде

  ctx.putImagenData(outImagen, 0,0);