[Aporte] Copiar píxeles de una imagen

MAB

Destructor Lvl 2
#1
Esto sirve para obtener el RGBA de uno o más píxeles de una imagen, según gusten.

Javascript:

JavaScript:
        <script>
            function draw(img) {
                var canvas = document.getElementById("test"); /* Mismo ID que el elemento Canvas del HTML */
                var ctx = canvas.getContext("2d");
               
                ctx.drawImage(img, 0, 0);
               
                var imgData = ctx.getImageData(0, 0, 100, 100); /* 0: X, 0: Y, 100: Ancho de la imagen, 100: Alto de la imagen */

                for(var i = 0, n = 40001, c = 1; i < n; i += 4, c++) { /* Ya que mi imagen era de 100x100, son unos 10.000 píxeles, y como el ciclo va de 4 en 4, 10.000x4 = 40.000, modifiquen a gusto */
                    var RED = imgData.data[i];
                    var GREEN = imgData.data[i+1];
                    var BLUE = imgData.data[i+2];
                    var ALPHA = imgData.data[i+3];
                   
                    var paragraph = document.createElement("P");
                    paragraph.textContent = "background: rgba("+RED+","+GREEN+","+BLUE+","+ALPHA+")";
                    var current = document.getElementById("current"); /* "Current" es el ID del contenedor HTML donde voy a meter todos los <p> que estoy creando arriba con el background */
                    current.appendChild(paragraph);
                }
            }
           
            var img = new Image();

            img.onload = function() {
                draw(this);
            }
               
            img.src = "./original.jpg"; /* Reemplazan la ruta y el nombre de la imagen */
        </script>
HTML necesario:

HTML:
    <body>
        <canvas id="test"></canvas>
        <div id="current"></div>
    </body>
El resultado se vería algo así (unas 10.000 veces):

background: rgba(X, X, X, X)
 
Arriba