Advertisemen
Copy and paste the code used in above video :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Color Inverter</title></head><body> <canvas id="imgCanvas" width="600px" height="300px" style="border: 1px solid #000000;"></canvas> <button onclick="ColorInverter()">Color Inverter</button> <script> window.onload= function () { var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d");
var img = new Image(); img.src = "bunny.jpg"; context.drawImage(img, 10, 10); } function ColorInverter() { var canvas = document.getElementById("imgCanvas"); var context = canvas.getContext("2d");
var imgData = context.getImageData(10, 10, 469, 393); var data = imgData.data; for(var i = 0; i < data.length; i += 4){ data[i] = 255 - data[i]; // red data[i+1] = 255 - data[i+1]; // Green data[i+2] = 255 - data[i+2]; // Blue } context.putImageData(imgData, 10, 10); } </script></body></html>
Advertisemen
Tidak ada komentar:
Posting Komentar