HTML5图像操作

最新推荐文章于 2017-05-13 17:33:04 发布

胖子雷神

最新推荐文章于 2017-05-13 17:33:04 发布

阅读量320

点赞数

分类专栏： HTML5研习

HTML5研习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <?php
        // put your code here
        ?>
        <canvas id="my_canvas" width="1200" height="700"> 浏览器不支持canvas </canvas>
        <img src="Desert.jpg">
        <script type="text/javascript">
            var canvas = document.getElementById('my_canvas');
            if(canvas.getContext){
                var ctx = canvas.getContext('2d');//获取2d上下文
                //画图
                var img = document.images[0];
                ctx.drawImage(img, 0, 0);
                //获取ImageData
                var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                var data = imgData.data;//线性化4维数组（ImageData对象是4维数组，每一维分别表示r, g, b, a）
                //反色
                var r, g, b, a;
                for(var i = 0, len = data.length;i < len; i+=4){
                    //取色
                        r = data[i];
                        g = data[i+1];
                        b = data[i+2];
                        //a = data[i+3];//反色不需要透明度
                        //反色
                        data[i] = 255 - r;
                        data[i+1] = 255 - g;
                        data[i+2] = 255 - b;
                }

                imgData.data = data;//写回图像数据
                ctx.putImageData(imgData, 0, 0);//显示结果
            }
        </script>
    </body>
</html>

1/原图

2/效果图

胖子雷神

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5图像操作


复制链接

扫一扫