用javascript的复古图像

Question

用javascript的复古图像

use*_*505 3 javascript html5 canvas html5-canvas

我一直在创建一个照片编辑网络应用程序,并设法编辑像素以创建酷图像过滤器

var data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
 //Note: data[i], data[i+1], data[i+2] represent RGB respectively
data[i] = data[i];
data[i+1] = data[i+1];
data[i+1] = data[i+1];
data[i+2] = data[i+2];

}

Run Code Online (Sandbox Code Playgroud)

但是我无法找到算法或者想出一个能产生复古效果的算法.像素操作imam可以做到这一点吗？如果是这样,你知道我在哪里可以找到算法吗？

效果的一个例子是https://softwareengineering.stackexchange.com/questions/153052/is-there-a-javascript-library-for-creating-vintage-photos

但我想像我迄今为止所做的那样编辑像素.

Answer 1

小智 16

理解错误

很难想出一种模拟"复古"照片的算法(如果"复古"被定义为"旧的错误处理的负片/照片":-)),因为结果是多层的并且由各种物理和化学因素引起.

了解这些因素将有助于您构建所需的图层,以模拟"复古"外观.

漏光

在旧相机上,有时会发生后盖打开导致光线泄漏到负片上.当盖子从侧面打开时,典型的泄漏出现在边缘上或周围或作为条纹.由于与典型的预期曝光相比,曝光相对较长,条纹通常呈现白色,具有红色模糊光晕(在正面上).

精确的过度曝光条纹出现的地方是随机的,取决于相机和环境光线条件.

此外,如果光线泄漏到胶片上,通常会产生模糊的图像.这是因为光已经曝光了胶片并会产生灰色.这是他们与顶部的预期曝光混合.

胶片颗粒

模拟薄膜中含有银粒.ISO越高,颗粒尺寸越大 - 实际上ISO和颗粒尺寸(通过掩模过滤)直接相关.消费者薄膜的典型ISO值为200至400 ISO.此外,实验室开发中使用的三个步骤的化学品质也影响了质量,不仅在谷物方面,而且在对比度和色彩平衡方面也是如此.

135电影也不是过去唯一的典型尺寸.您的胶片尺寸较小,因此在相同的ISO值(粒度)下,显影的正片看起来更具颗粒感.

化学制品

化学品在开发中是重要的,质量(非饱和)温度和时间.如果实验室忘记补充化学品,结果将是对比度和色调差(在商业实验室中,时间和温度会自动处理,但化学品需要手动更换).

有时人们会操纵温度和化学物质,故意产生某些效果,如漂白,曝光,调整色调(饱和度,色彩平衡,色调)等.

曝光

对于真正老旧的相机/胶片不均匀曝光是一个值得注意的因素.您可以在胶片上进行各种曝光的"渐变",使其在顶部看起来更浅,在底部看起来更暗,或者反之亦然.

在更现代的相机上,大多数设置在哪里手动,如果容易过度曝光或曝光不足.在积极的发展中,如果实验室操作员做出错误的调整或者化学品不再工作,也会发生同样的情况.

光学

光学特别是在渐晕的中心和较暗的角落中起作用.不良的光学和外壳更容易产生晕影(我个人喜欢小插图,并经常将它添加到我自己的照片).

小插图效果

在许多较旧的自动相机中,固定为"无限"的镜头意味着任何距离大约60厘米的镜头都会出现焦点外 - 其他任何东西都像镜头所允许的那样锐利(此时塑料镜片变得越来越常见并且更低质量比玻璃镜片).

相纸

另一个因素是照片纸本身的质量以及用于产生阳性的化学过程.

根据纸张的构造方式,粒度和使用的化学品,您可以获得从光栅粗粒度图像到超锐利光泽图像的各种结果.如果正(纸)和负(或dias胶片)都使用高ISO值,结果通常会模糊和颗粒状 - 就像将低分辨率数字图像放大到更高尺寸时一样.

模拟与数字

了解模拟电影如何与数字电影相比也很重要.

实质上,与严格排序像素的数字图像相反,银颗粒的分布不均匀.

曝光过度和曝光不足的电影仍然可以包含细节,而数字电影则可以删除.这与胶片的动态范围与数字的AD转换器有关.

颜色表示

根据薄膜/纸张乳液以及化学过程,颜色也不同.还有一些专门的过程,如漂白,可以影响最终颜色.

在数字领域,等效的是LUT(查找表),它可以使用更宽的源范围,使用1D或3D LUT来修改颜色以提供一定的外观("电影","电影",模拟ble流程等等)向前).

杂项

当然,还有其他因素,但我会关注这些,因为它们通常被认为是"复古"风格的一部分(复古不是一个正确的术语IMO,因为它指的是旧式 - 没有那么多的错误是典型的模拟摄像机:-),但我会在这里使用它).

把它们放在一起

那么我们如何利用这些知识呢？我们可以将不同的步骤分成多个错误层.

例如 - 对于漏光,我们现在知道它们出现的原因以及它们出现的位置.我们可能不需要算法本身,因为我们可以使用叠加来创建相同的效果.由于光泄漏在技术上是多次曝光的一部分,我们可以将"空白"光泄漏混合到图像上:

例如 - 如果我们有两个空框架以这种方式曝光,我们可以使用这些图像混合到我们的主图像上:

漏光的例子

为了生产这些你自己只需找到一个旧相机打开后盖,关闭,卷轴到下一帧,重复,然后开发(或扫描).这将产生最自然的效果.

可以通过引入诸如高斯的模糊和噪声来产生胶片颗粒.然而,这并不像谷物,但它是一种简单的方法.

或者也可以在这里使用混合到图像上的真实粒状外观框架.为获得最佳效果,您可以混合"颗粒簇"(将当前颗粒的颜色与该颗粒的地图区域混合,将同一区域中图像的颜色混合为平均颜色,并用它填充颗粒区域).然而,这有点复杂并且计算量很大.

以下示例还带有灰尘和头发,在处理模拟胶片时也是典型的.然而,它们与谷物无关,但你可以将它们组合在这个过程的这一层:

胶片颗粒

化学过程可以通过去饱和来模拟并提供色调偏差(或简单地调整色彩平衡).

对于色彩平衡,理解色彩理论的加色(CMYK色,即品红色与绿色,黄色与蓝色,红色与青色等)是一个优势.

但我们可以将RGB转换为HSL/HSV色彩空间而不是CMYK,并改变色调度并调整饱和度值,然后转换回RGB - 或者只是尝试直接在RGB中调整色彩平衡,就好像我们在哪里交易一样直接用负片.

在颜色调整下也有对比度调整.通过降低对比度可以实现更多雾化.

组装

要组装所有这些图层,您可以通过在绘制叠加层时简单地调整Alpha级别来避免迭代某些图层 - 例如,对于漏光,使用透明度替换黑色并将其混合在图像顶部.然而,对于颗粒,您需要使用具有可调节偏置的乘法模式,用于颗粒或原始图像.

当然,为了改变颜色,你需要迭代像素.

您可以进行折衷并将以下图层合并为一个图层:

胶片颗粒
小插图
漏光

如果你注意到颗粒层会显示为灰色叠加而不是与像素混合良好.如果您想让图像看起来更加模糊,这可以起作用,但您可能需要在之后增加亮度.

订单很重要,也必须考虑:

首先进行颜色调整
降低对比度
模糊(考虑夸大的边缘模糊来模拟"无限"焦点)
添加图层(或组合颗粒,晕影,漏光)
考虑调整亮度

结论

虽然,到目前为止只有理论.

我没有提供一个工作实例,因为这实际上会产生一个相当完整的解决方案,而这当然不是SO的目的.

我还试图限制基础知识的答案,因为如果只使用算法生成所有地方,它可能会很快变得非常复杂,因为你需要其中几个,因此太宽泛而无法回答.

无论如何,这里有一些资源可以帮助您完成各个步骤:

Resources

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年前
查看次数：	2470 次
最近记录：	9 年，5 月前