《JavaScript DOM编程艺术》Canvas 灰色

最新推荐文章于 2022-03-14 10:38:03 发布

iofe

最新推荐文章于 2022-03-14 10:38:03 发布

阅读量302

点赞数 1

分类专栏： JavaScript DOM 编程艺术总结文章标签： javascript

本文链接：https://blog.csdn.net/qq_22713749/article/details/79273232

版权

JavaScript DOM 编程艺术总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

《JavaScript DOM编程艺术》Canvas 灰色

在里面涉及到2个方法：

getImageData（）
putImageData（）

getImageData（）

ImageData ctx.getImageData(sx, sy, sw, sh);

参数

sx
将要被提取的图像数据矩形区域的左上角 x 坐标。
sy
将要被提取的图像数据矩形区域的左上角 y 坐标。
sw
将要被提取的图像数据矩形区域的宽度。
sh
将要被提取的图像数据矩形区域的高度。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考[Github][2].

putImageData（）

参数描述
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY 可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <script src="modernizr.js"></script>
</head>
<body>
<img src="5a701771ddfe9.jpg" alt="" id="avatar" title="Jeffrey">
<script>
    function convertToGS(img) {
        if (!Modernizr.canvas) return;

        img.color = img.src;
        img.grayscale = createGSCanvas(img);

        img.onmouseover = function() {
            this.src = this.color;
        }
        img.onmouseout = function() {
            this.src = this.grayscale;
        }
        img.onmouseout();
    }

    function createGSCanvas(img) {

        var canvas=document.createElement("canvas");
        canvas.width=img.width;
        canvas.height=img.height;
        var ctx=canvas.getContext("2d");
        ctx.drawImage(img,0,0);

        var c = ctx.getImageData(0, 0, img.width, img.height);
        for (i=0; i<c.height; i++) {
            for (j=0; j<c.width; j++) {
                var x = (i*4) * c.width + (j*4);
                var r = c.data[x];
                var g = c.data[x+1];
                var b = c.data[x+2];
                c.data[x] = c.data[x+1] = c.data[x+2] = (r+g+b)/3;
            }
        }
        ctx.putImageData(c,0,0,0,0, c.width, c.height);
        return canvas.toDataURL();
    }

    window.onload = function() {
        convertToGS(document.getElementById('avatar'));
    }
</script>
</body>
</html>