canvas之怀旧/连环画/熔铸效果

来源：互联网发布：广州医疗器械软件编辑：程序博客网时间：2024/06/09 17:01

直接上代码

怀旧效果：

算法：

dr=.393*r+.769*g+.189*b;

dg=.349*r+.686*g+.168*b;

db=.272*r+.534*g+.131*b;

rd=Math.random()*0.5+0.5;

r=rd*dr+(1-rd)*r;

.........

//怀旧滤镜：function reminiscenceFilter(imageData) {var data = imageData.data;for (i = 0; i < data.length - 4; i += 4) { //遍历各像素分量var dr = .393 * data[i] + .769 * data[i + 1] + .189 * data[i + 2];var dg = .349 * data[i] + .686 * data[i + 1] + .168 * data[i + 2];var db = .272 * data[i] + .534 * data[i + 1] + .131 * data[i + 2];var scale = Math.random() * 0.5 + 0.5;data[i] = scale * dr + (1 - scale) * data[i];data[i + 1] = scale * dg + (1 - scale) * data[i + 1];data[i + 2] = scale * db + (1 - scale) * data[i + 2];}return imageData;}

      连环画原理：
                 连环画的效果与图像灰度化后的效果相似,它们都是灰度图,但连环画增大了图像的对比度,使整体明暗效果更强.
                  算法:
                  r= |g – b + g + r| * r / 256
                  g = |b – g + b + r| * r / 256;
                  b= |b – g + b + r | * g / 256;

//连环画滤镜：function comicFilter(imageData) {var data = imageData.data;for (i = 0; i < data.length - 4; i += 4) { //遍历各像素分量data[i] = Math.abs(data[i + 1] - data[i + 2] + data[i + 1] + data[i]) * data[i] / 256;data[i + 1] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i] / 256;data[i + 2] = Math.abs(data[i + 2] - data[i + 1] + data[i + 2] + data[i]) * data[i + 1] / 256;}return imageData;}

溶铸

                  算法及原理：
                    r = r*128/(g+b +1);
                    g = g*128/(r+b +1);
            b = b*128/(g+r +1);

//熔铸滤镜：function castingFilter(imageData) {var data = imageData.data;for (i = 0; i < data.length - 4; i += 4) {data[i] = data[i] * 128 / (data[i + 1] + data[i + 2] + 1);data[i + 1] = data[i + 1] * 128 / (data[i] + data[i + 2] + 1);data[i + 2] = data[i + 2] * 128 / (data[i] + data[i + 1] + 1);}return imageData;}

Done

0 0