Я сделал этот скрипт, который наложит фильтр на изображения. Но кажется, что это работает только в Inte rnet explore и в Microsoft Edge.
Может кто-нибудь, возможно, направит меня в правильном направлении, чтобы заставить его работать в Google chrome и Firefox?
<html>
<style>
h1 { font-size:2rem; }
p { font-size:1rem; }
canvas { display:block; margin:15px; }
button { margin:15px; }
img { display:block;}
</style>
<script>
function filter() {
//canvas settings
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("picture");
//matches the image size to the canvas
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
//overfører billedet til canvas
context.drawImage(img,0,0);
//Loads data from the image var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
var data = imageData.data;
//Runs all the pixel
for (var i = 0; i < data.length; i += 4) {
//fetch the RGB values from the pixels
var red = data[i];
var green = data[i + 1];
var blue = data[i + 2];
// på pladsen i+3 sidder alpha (gennemsigtigheden)
//FILTER START
//puts the avarage for red green and blue
imageData.data[i] = Math.round(red*0.5);
imageData.data[i+1] = Math.round(green*0.5);
imageData.data[i+2] = Math.round(blue*0.5);
}
// overrides the original image on the canvas
context.putImageData(imageData, 0, 0);
}
</script>
<body>
<div align="center">
<h1>Use a filter</h1>
<button onclick="filter()">Use filter</button>
<img src="https://videnskab.dk/files/article_media/golden_gate_bridge.jpg" id='picture'>
<canvas id="canvas"></div>
</div>
</body>
</html>