Есть код:
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 ошибка:
Код из-за которой ошибка:
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);
}
}
})
}
});
