Cześć,
piszę aplikacje w js mająca zamieniać zdjęcia zdjęcie na sepię. Napisałem cały kod:
<!DOCTYPE html>
<html>
<head>
<title>Lab 2</title>
</head>
<body>
<canvas id="myCanvas" width="616" height="1392" style="border:1px solid black;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
let image1 = new Image()
let image2 = new Image()
let image3 = new Image()
image1.onload = function()
{
ctx.drawImage(this, 0, 0)
}
image2.onload = function()
{
image1.crossOrigin = "anonymous"
try
{
var sourceWidth = this.width;
var sourceHeight = this.height;
var destX = c.width / 2 - sourceWidth / 2;
var destY = c.height / 2 - sourceHeight / 2;
var sourceX = destX;
var sourceY = destY;
ctx.drawImage(this, destX, destY);
var imageData = ctx.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 *
data[i + 2];
data[i] = brightness;
data[i + 1] = brightness;
data[i + 2] = brightness;
}
ctx.putImageData(imageData, destX, destY);
}
catch (e)
{
alert(e)
}
}
image1.src="photo1.jpg"
image2.src="photo1.jpg"
</script>
</body>
</html>
W wyniku otrzymuję następujący błąd:
Jak w js zabezpieczyć tą operację?