canvas之怀旧/连环画/熔铸效果_canvas 图片做旧-优快云博客

本文深入探讨了怀旧、连环画与熔铸三种滤镜技术的核心算法与原理，包括怀旧效果的色彩调整、连环画原理的对比度增强与熔铸滤镜的色彩融合方法，旨在为图像处理爱好者提供全面的技术指导。

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

直接上代码

怀旧效果：

算法：

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