图片透明度调整技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_1724201421/article/details/80246425

对于透明处理，我们都是在得到像素数组后，将该数组中每一个像素的透明度乘以n，然后保存像素数组，最后使用putImageData()方法将图像重新绘制在画布上。

语法：

 for(var i=0;i<data.length;i++){
            data[i+3]=data[i+3]*n;
        }

说明：

n的取值范围为0.0~1.0

看下面一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>scale()方法的副作用</title>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        window.οnlοad=function(){
            var cv=$('canvas');
            var cxt=cv.getContext('2d');

            var img=new Image();
            img.src='./images/1.png';

            img.οnlοad=function(){
                cxt.drawImage(img,10,10);
                var imgData=cxt.getImageData(10,10,120,120);
                var data=imgData.data;
                //遍历每个像素
                for(var i=0;i<data.length;i+=4){
                    data[i+3]=data[i+3]*0.3;
                }
                //在指定位置输出图片
                cxt.putImageData(imgData,140,10);
            };
        };
    </script>
</head>
<body>
    <canvas id="canvas" width='250' height='150' style='border:1px solid grey;'></canvas>
</body>
</html>

浏览器预览效果如下图：