|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Color Inverter</title> <style> body { font-family: Arial, sans-serif; text-align: center; margin: 50px; } #output-container { margin-top: 20px; } </style> </head> <body> <h1>Image Color Inverter</h1> <input type="file" id="imageInput" accept="image/*"> <button onclick="invertColors()">Invert Colors</button> <div id="output-container"> <h2>Output Image</h2> <img id="outputImage" alt="Output Image"> </div> <script> function invertColors() { var input = document.getElementById('imageInput'); var outputImage = document.getElementById('outputImage'); var outputContainer = document.getElementById('output-container'); if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { var img = new Image(); img.src = e.target.result; img.onload = function() { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.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 } ctx.putImageData(imageData, 0, 0); outputImage.src = canvas.toDataURL('image/png'); outputContainer.style.display = 'block'; }; }; reader.readAsDataURL(input.files[0]); } } </script> </body> </html> |