使用负片滤镜效果-优快云博客

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

本文档详细介绍了4.5.2.3版本中的负片滤镜功能，探讨了如何应用这种滤镜来改变图像颜色，实现独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.5.2.3_负片滤镜

<!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="negativeBtn" value="负片滤镜" /></div>
        <canvas id="canvas" width="800" height="520"></canvas>
    </body>
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var negativeBtn = document.getElementById('negativeBtn');

        var image = new Image();


        image.src = 'img/waterfall.jpg';
        image.onload = function(){
            context.drawImage(image,0,0,image.width,image.height,0,0,canvas.width,canvas.height);
        }

        negativeBtn.onclick = function(){
            var imageData =  context.getImageData(0,0,canvas.width,canvas.height);
            var data = imageData.data;

            for(var i =0; i<=data.length-4;i+=4){
                data[i] = 255- data[i];
                data[i+1] = 255- data[i+1];
                data[i+2] = 255- data[i+2];
            }
            context.putImageData(imageData,0,0);
        }
    </script>
</html>