API tools faq
paste
Advertisement
Thunder-Menu

AddingPictureToZipPakPixel.html

Thunder-Menu
Aug 20th, 2023
813
1
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.44 KB | Source Code | 1 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Comparaison d'Images</title>
  7. </head>
  8. <body>
  9.     <input type="file" id="image1Input">
  10.     <input type="file" id="image2Input">
  11.     <label for="transparency">Transparence (%):</label>
  12.     <input type="range" id="transparency" min="0" max="50" value="50">
  13.     <span id="transparencyValue">50</span>
  14.     <input type="checkbox" id="colorboxEnabled">
  15.     <label for="colorboxEnabled">Utiliser la couleur du colorbox pour les parties opaques similaires</label>
  16.     <input type="color" id="colorbox" value="#FFFFFF">
  17.     <canvas id="canvas"></canvas>
  18.     <button id="compareButton">Comparer</button>
  19.     <button id="saveButton" disabled>Enregistrer</button>
  20.    
  21.     <script>
  22.         const image1Input = document.getElementById("image1Input");
  23.         const image2Input = document.getElementById("image2Input");
  24.         const transparencySlider = document.getElementById("transparency");
  25.         const transparencyValue = document.getElementById("transparencyValue");
  26.         const colorboxEnabled = document.getElementById("colorboxEnabled");
  27.         const colorbox = document.getElementById("colorbox");
  28.         const compareButton = document.getElementById("compareButton");
  29.         const saveButton = document.getElementById("saveButton");
  30.         const canvas = document.getElementById("canvas");
  31.         const context = canvas.getContext("2d");
  32.  
  33.         let image1 = null;
  34.         let image2 = null;
  35.  
  36.         image1Input.addEventListener("change", async function (e) {
  37.             const file = e.target.files[0];
  38.             if (file) {
  39.                 image1 = await loadImage(file);
  40.                 drawImages();
  41.             }
  42.         });
  43.  
  44.         image2Input.addEventListener("change", async function (e) {
  45.             const file = e.target.files[0];
  46.             if (file) {
  47.                 image2 = await loadImage(file);
  48.                 drawImages();
  49.             }
  50.         });
  51.  
  52.         transparencySlider.addEventListener("input", function () {
  53.             transparencyValue.textContent = transparencySlider.value;
  54.         });
  55.  
  56.         compareButton.addEventListener("click", async function () {
  57.             if (image1 && image2) {
  58.                const transparency = parseFloat(transparencySlider.value) / 100;
  59.                 const useColorbox = colorboxEnabled.checked;
  60.                 const color = colorbox.value;
  61.                 const resultImageData = await compareImages(image1, image2, transparency, useColorbox, color);
  62.                 context.canvas.width = resultImageData.width;
  63.                 context.canvas.height = resultImageData.height;
  64.                 context.putImageData(resultImageData, 0, 0);
  65.                 saveButton.disabled = false;
  66.             }
  67.         });
  68.  
  69.         saveButton.addEventListener("click", function () {
  70.             if (context.canvas.toDataURL) {
  71.                 const image = context.canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  72.                 const a = document.createElement("a");
  73.                 const fileName = prompt("Entrez le nom du fichier image :", "result_image.png") || "result_image.png";
  74.                 a.href = image;
  75.                 a.download = fileName;
  76.                 document.body.appendChild(a);
  77.                 a.click();
  78.                 document.body.removeChild(a);
  79.             }
  80.         });
  81.  
  82.         function loadImage(file) {
  83.             return new Promise((resolve, reject) => {
  84.                 const image = new Image();
  85.                 image.onload = function () {
  86.                     resolve(image);
  87.                 };
  88.                 image.src = URL.createObjectURL(file);
  89.             });
  90.         }
  91.  
  92.         async function compareImages(img1, img2, transparency, useColorbox, color) {
  93.             const width = img1.width;
  94.             const height = img1.height;
  95.  
  96.             const resultCanvas = document.createElement("canvas");
  97.             resultCanvas.width = width;
  98.             resultCanvas.height = height;
  99.             const resultContext = resultCanvas.getContext("2d");
  100.  
  101.             resultContext.drawImage(img1, 0, 0, width, height);
  102.             const img1Data = resultContext.getImageData(0, 0, width, height).data;
  103.  
  104.             resultContext.clearRect(0, 0, width, height);
  105.             resultContext.drawImage(img2, 0, 0, width, height);
  106.             const img2Data = resultContext.getImageData(0, 0, width, height).data;
  107.  
  108.             const diffImageData = resultContext.createImageData(width, height);
  109.             const diffData = diffImageData.data;
  110.  
  111.             const whitePixels = copyAllWhitePixels(resultContext);
  112.  
  113.             for (let i = 0; i < img1Data.length; i += 4) {
  114.                const r1 = img1Data[i];
  115.                const g1 = img1Data[i + 1];
  116.                const b1 = img1Data[i + 2];
  117.                const a1 = img1Data[i + 3];
  118.  
  119.                const r2 = img2Data[i];
  120.                const g2 = img2Data[i + 1];
  121.                const b2 = img2Data[i + 2];
  122.                const a2 = img2Data[i + 3];
  123.  
  124.                const luminance = (0.299 * r1 + 0.587 * g1 + 0.114 * b1);
  125.                const isBlack = luminance < 128;
  126.                const isWhite = luminance >= 128 && luminance < 256;
  127.                 const isVivid = Math.max(r1, g1, b1) > 128;
  128.  
  129.                 if (isBlack || (isWhite && !isVivid)) {
  130.                    diffData[i] = 0;
  131.                     diffData[i + 1] = 0;
  132.                     diffData[i + 2] = 0;
  133.                     diffData[i + 3] = a1;
  134.                 } else {
  135.                     const newR = r2 * transparency + r1 * (1 - transparency);
  136.                     const newG = g2 * transparency + g1 * (1 - transparency);
  137.                     const newB = b2 * transparency + b1 * (1 - transparency);
  138.  
  139.                     if (useColorbox && (r1 !== 255 || g1 !== 255 || b1 !== 255)) {
  140.                        const minOpacity = Math.min(r1 / 255, g1 / 255, b1 / 255);
  141.                         const adjustedTransparency = transparency + (1 - transparency) * minOpacity;
  142.                         diffData[i] = newR * adjustedTransparency + r1 * (1 - adjustedTransparency);
  143.                         diffData[i + 1] = newG * adjustedTransparency + g1 * (1 - adjustedTransparency);
  144.                         diffData[i + 2] = newB * adjustedTransparency + b1 * (1 - adjustedTransparency);
  145.                     } else {
  146.                         diffData[i] = newR;
  147.                         diffData[i + 1] = newG;
  148.                         diffData[i + 2] = newB;
  149.                     }
  150.  
  151.                     diffData[i + 3] = a1;
  152.                 }
  153.             }
  154.  
  155.             if (useColorbox) {
  156.                 applyColorbox(diffData, width, height, color);
  157.             }
  158.  
  159.             restoreAllWhitePixels(resultContext, whitePixels);
  160.  
  161.             return diffImageData;
  162.         }
  163.  
  164.         function applyColorbox(data, width, height, color) {
  165.             const colorRgb = hexToRgb(color);
  166.  
  167.             for (let i = 0; i < data.length; i += 4) {
  168.                const r = data[i];
  169.                const g = data[i + 1];
  170.                const b = data[i + 2];
  171.                const a = data[i + 3];
  172.  
  173.                if (r === 0 && g === 0 && b === 0 && a !== 0) {
  174.                    data[i] = colorRgb.r;
  175.                    data[i + 1] = colorRgb.g;
  176.                    data[i + 2] = colorRgb.b;
  177.                }
  178.            }
  179.        }
  180.  
  181.        function hexToRgb(hex) {
  182.            const bigint = parseInt(hex.slice(1), 16);
  183.            const r = (bigint >> 16) & 255;
  184.             const g = (bigint >> 8) & 255;
  185.             const b = bigint & 255;
  186.             return { r, g, b };
  187.         }
  188.  
  189.         function copyAllWhitePixels(context) {
  190.             const imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
  191.             const whitePixels = [];
  192.  
  193.             for (let i = 0; i < imageData.data.length; i += 4) {
  194.                const r = imageData.data[i];
  195.                const g = imageData.data[i + 1];
  196.                const b = imageData.data[i + 2];
  197.  
  198.                if (r === 255 && g === 255 && b === 255) {
  199.                    whitePixels.push({ index: i, data: imageData.data.slice(i, i + 4) });
  200.                    imageData.data[i] = 0;
  201.                    imageData.data[i + 1] = 0;
  202.                    imageData.data[i + 2] = 0;
  203.                    imageData.data[i + 3] = 0;
  204.                }
  205.            }
  206.  
  207.            context.putImageData(imageData, 0, 0);
  208.  
  209.            return whitePixels;
  210.        }
  211.  
  212.        function restoreAllWhitePixels(context, whitePixels) {
  213.            for (const pixel of whitePixels) {
  214.                const x = pixel.index / 4 % context.canvas.width;
  215.                const y = Math.floor(pixel.index / 4 / context.canvas.width);
  216.                context.putImageData(new ImageData(new Uint8ClampedArray(pixel.data), 1, 1), x, y);
  217.            }
  218.        }
  219.  
  220.        function drawImages() {
  221.            context.clearRect(0, 0, canvas.width, canvas.height);
  222.  
  223.            if (image1 && image2) {
  224.                const width = image1.width;
  225.                const height = image1.height;
  226.  
  227.                canvas.width = width * 2;
  228.                canvas.height = height;
  229.                context.drawImage(image1, 0, 0, width, height);
  230.                context.drawImage(image2, width, 0, width, height);
  231.            }
  232.        }
  233.    </script>
  234. </body>
  235. </html>
  236.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!