tite fractale

canvas_pixels_from_jpg.html

télécharger ou tester sur place (bouton précédent du navigateur pour revenir)

<html>
    <head>
        <title>Canvas test</title>
    </head>
    <body>
        <img src="../img/mandelbrot_wp.jpg" />
        <canvas id="canvas-cible" width="322" height="242" ></canvas>
        <script type="text/javascript">
            window.onload = function(){
                var testCanvas  = document.createElement('canvas');
                if (testCanvas.getContext === undefined) {
                    document.writeln('Browser too old!.');
                } else {
                    var canvas = document.getElementById("canvas-cible");
                    var context = canvas.getContext("2d");
                    var imageObj = new Image();
                    imageObj.onload = function(){
                        context.drawImage(imageObj, 0, 0);
                        var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
                        var pixels  = imgData.data;
                        for (var i = 0; i < pixels.length; i += 4) {
                            var grayscale = pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
                            pixels[i  ] = grayscale;    // red
                            pixels[i+1] = grayscale;    // green
                            pixels[i+2] = grayscale;    // blue
                            // pixels[i+3]  est le  canal  alpha
                        }
                        context.putImageData(imgData, 0, 0);
                    };
                    imageObj.src = "../img/mandelbrot_wp.jpg";
                }
            };
        </script>
    </body>
</html>









Page générée le 27/05/2021, 09h53'27" (page virtuelle).
historique global