JavaScript Canvas grey : grey = r * 0.3 + g * 0.59 + b * 0.11;

本文链接：https://blog.csdn.net/xiuye2015/article/details/90731286

<html>

<head>


<title>ImageData</title>
</head>

<body>

	<canvas id='stt'></canvas>

	<script type="text/javascript" src="js/xy/core/xy.js"></script>

	<script type='text/javascript'>
        var c = null;

        xy(() => {

            let img = new Image();
            img.crossOrigin = "anonymous";
            img.onload = (e) => {
                let stt = xy.Canvas.from('#stt');
                stt.css('border', '1px solid black');
                stt.width(img.width).height(img.height*2+20);
                let p = stt.pen();
                p.drawImage(img,0,0);
                // p.rect(10, 10, 100, 100);
                // p.fill();

                c = p;
                // console.log(p.createImageData(100, 100));
                let size = stt.size();
                let imageData = p.getImageData(0, 0, size.w, size.h);
                let w = imageData.width;
                let h = imageData.height;
                let data = imageData.data;
                for (let i = 0; i < data.length; i++) {//rgba
                    // console.log(data[4*i+4]);
                    let r = data[4 * i];
                    let g = data[4 * i + 1];
                    let b = data[4 * i + 2];

                    let grey = r * 0.3 + g * 0.59 + b * 0.11;

                    data[4 * i] = grey;
                    data[4 * i + 1] = grey;
                    data[4 * i + 2] = grey;
                }
                p.putImageData(imageData, 0, img.height+20);
            };
            img.src = 'images/horse.png';

            

        });

    </script>

</body>

</html>