4.5.2.4_浮雕滤镜

最新推荐文章于 2024-08-17 08:00:00 发布

信封中的阳光

最新推荐文章于 2024-08-17 08:00:00 发布

阅读量314

点赞数 1

分类专栏： HTML5_CANVAS练习案例

本文链接：https://blog.youkuaiyun.com/jun_sun_shine/article/details/71723499

版权

HTML5_CANVAS练习案例专栏收录该内容

81 篇文章

订阅专栏

4.5.2.4_浮雕滤镜

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮雕滤镜</title>
        <style>
            body{
                background: #eee;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 20px;
                margin-top: 50px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
            #controls{
                position: absolute;
                top: 20px;
                left: 50px;
            }
        </style>
    </head>
    <body>
        <div id="controls"><input type="button" id="embossBtn" value="原图" /></div>
        <canvas id="canvas" width="800" height="520"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var embossBtn = document.getElementById('embossBtn');

        var image = new Image();
        var embossed = false;

        //初始化
        image.src = 'img/waterfall.jpg';
        image.onload = function(){
            drawOriginalImage();
        }

        //事件
        embossBtn.onclick = function(){
            if(embossed){
                embossBtn.value = '浮雕';
                drawOriginalImage();
                embossed=false;

            }else{
                embossBtn.value = '原图';
                drawEmboss();
                embossed=true;
            }
        }

        //绘制原图
        function drawOriginalImage(){
            context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
        }
        //绘制浮雕图
        function drawEmboss(){
            var imageData = context.getImageData(0,0,canvas.width,canvas.height);
            var data = imageData.data;
            var width = imageData.width;//设备像素
            var length = data.length;

            for(var i =0;i<length;i++){//遍历每个像素

                //不让超过最后一行
                if(i<length-width*4){ //不包含最后一行

                    //不包含透明度的值
                    if((i+1)%4 !==0){

                        //在每行最后一个像素取左边的邻近像素
                        if((i+4)%(width*4) == 0){//代表每行最后一个像素

                            //给最右边像素重新定rgba
                            data[i] = data[i-4];
                            data[i+1] = data[i-3];
                            data[i+2] = data[i-2];
                            data[i+3] = data[i-1];
                            i+=4; //直接跳到下一个像素

                        }else{ //最终符合条件的，不是最后一行，也不在每行最后一个的像素，且除去了像素集合中为透明度的值

                            data[i] = 255/2 
                                      + 2*data[i] //现有像素
                                      - data[i+4] //下一个像素
                                      - data[i+width*4]; //下一行同一位置像素

                        }

                    }

                }else{ //最后一行，取上一行的像素
                    if((i+1)%4 !== 0){
                        data[i] = data[i -width+4];
                    }
                }
            }
            context.putImageData(imageData,0,0);
        }
        </script>
</html>