Задать вопрос
@kirillleogky

Как перевести изображение в канвасе в черно белое?

Есть код: https://jsfiddle.net/dm68vjoh/1/

При клике на кнопку Load на канвас загружается изображение
Затем я хочу данное изображение перевести в черно-белый вариант c помощью данного кода:
var imgd = context.getImageData(0, 0, 500, 300);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
var grayscale = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11;
pix[i ] = grayscale; // red
pix[i+1] = grayscale; // green
pix[i+2] = grayscale; // blue
// alpha
}
context.putImageData(imgd, 0, 0);

Оригинал кода для перевода в черно-белый вариант

Но для начала я хочу вывести ImageData из канваса
Но при нажатии на кнопку B&W ошибка:
5dd1281f7f7f1826056983.png
Код из-за которой ошибка:
bAndWButton.addEventListener('click', () => {
 let context = canvas.getContext("2d");
 console.log(context.getImageData(0,0, imageWidth, imageHeight));
});



Подскажите как решить данную проблему

P. S. для примера у меня изображение статичное но я использую fetch API
то что в примере:
loadBtn.addEventListener('click', () => {
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d');
    ctx.imageSmoothingEnabled = false;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    let pic = new Image();
    pic.src = 'http://www.heliotrope-online.com/wp-content/uploads/2019/07/gerard_luthi-400x500.jpg';
    pic.onload = () => {
      imageWidth = pic.width;
      imageHeight = pic.height;
      if (pic.width === pic.height) {
          imageWidth = 128;
          imageHeight= 128;
          ctx.drawImage(pic, 0, 0, 128, 128);
        }
      if (pic.width < pic.height) {
        imageWidth = (pic.width * 128) / pic.height;
        imageHeight= 128;
          ctx.drawImage(pic, (128 - (pic.width * 128) / pic.height) / 2,
            0, (pic.width * 128) / pic.height, 128);
        }
      if (pic.width > pic.height) {
        imageWidth = 128;
        imageHeight= (pic.height * 128) / pic.width;
          ctx.drawImage(pic, 0, (128 - (pic.height * 128) / pic.width) / 2,
            128, (pic.height * 128) / pic.width);
        }
    }
  }
});

bAndWButton.addEventListener('click', () => {
 let context = canvas.getContext("2d");
 console.log(context.getImageData(0,0, imageWidth, imageHeight));
});


А вот что использую я:
loadBtn.addEventListener('click', () => {
const url = `https://api.unsplash.com/photos/random?query=town,Moscow&client_id=код для запроса`;
fetch(url)
  .then(res => res.json())
  .then(data => data.urls.small)
  .then(image => {
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d');
        ctx.imageSmoothingEnabled = false;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        let pic = new Image();
        pic.src = image;
        pic.onload = () => {
          imageWidth = pic.width;
          imageHeight = pic.height;
          if (pic.width === pic.height) {
              imageWidth = 128;
              imageHeight= 128;
              ctx.drawImage(pic, 0, 0, 128, 128);
            }
          if (pic.width < pic.height) {
            imageWidth = (pic.width * 128) / pic.height;
            imageHeight= 128;
              ctx.drawImage(pic, (128 - (pic.width * 128) / pic.height) / 2,
                0, (pic.width * 128) / pic.height, 128);
            }
          if (pic.width > pic.height) {
            imageWidth = 128;
            imageHeight= (pic.height * 128) / pic.width;
              ctx.drawImage(pic, 0, (128 - (pic.height * 128) / pic.width) / 2,
                128, (pic.height * 128) / pic.width);
            }
        }
  })
}
});
  • Вопрос задан
  • 261 просмотр
Подписаться 1 Сложный Комментировать
Пригласить эксперта
Ответы на вопрос 1
dom1n1k
@dom1n1k
Ключевые слова в сообщении об ошибке - "cross-origin data".
Это стандартная и многократно описанная проблема. На тостере тоже была неоднократно.
Просто погуглите "canvas cross-origin".
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы