【问题标题】：Vintage-ing image with javascript用 javascript 制作复古图像
【发布时间】：2012-11-01 13:11:55
【问题描述】：

我一直在创建一个照片编辑 web 应用程序，并设法编辑像素以创建很酷的图像过滤器

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];

}

但是，我还没有找到一种算法或想出一种可以产生复古效果的算法。这可能与像素操作伊玛目做吗？如果是，你知道我在哪里可以找到算法吗？

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

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

【问题讨论】：

具体说明这种“复古”效果的作用。另外，举个例子。是否可以只用 alpha 覆盖 PNG？
您链接的答案有问题吗？
我尝试使用示例脚本 vintage.js 但图像没有写回我的画布
研究代码github.com/rendro/vintageJS/blob/master/src/vintage.js。第 255 到 334 行是像素操作的核心算法。
使用许多单独的简单步骤：稍微降低对比度，使其成为 B+W，添加 B+W 噪点，添加晕影，淡化棕褐色，也许稍微模糊，你明白了...

标签： javascript html canvas html5-canvas

【解决方案1】：

您可以使用 globalCompositeOperation 和 hue 来获得“快速而肮脏”的解决方案：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var img = new Image;
img.onload = function(){
  ctx.drawImage(img, 0, 0);
  ctx.globalCompositeOperation = "hue";
  ctx.fillStyle = "rgba(0,0,0,0.75)";
  ctx.fillRect(0, 0, 509, 321);
  ctx.globalCompositeOperation = "destination-in";
  ctx.drawImage(img, 0, 0);
};
img.src = "https://www.qoncious.com/sites/default/files/q_a_images/flowers.jpg";

<p>Original</p>
<img src="https://www.qoncious.com/sites/default/files/q_a_images/flowers.jpg" />

<p>Vintage</p>
<canvas id="myCanvas" width="509" height="321" style="border:1px solid #d3d3d3;">
</canvas>

【讨论】：

【解决方案2】：

了解错误

很难想出一个算法来模拟“老式”照片（如果“老式”被定义为“旧的被虐待的底片/照片”:-)），因为结果是多层次的并且是由各种物理和化学因素引起的.

了解这些因素将帮助您构建所需的图层，以模拟“复古”外观。

漏光

在旧相机上，不时会发生后盖打开导致光线泄漏到负片上的情况。当盖子从侧面打开时，典型的泄漏出现在边缘或边缘周围或呈条纹状。由于与典型的预期曝光相比，曝光时间相对较长，因此条纹通常呈白色，带有红色模糊光晕（在正片上）。

具体出现过度曝光条纹的位置是随机的，具体取决于相机和环境光条件。

此外，如果光线泄漏到胶片上，通常会导致图像模糊不清。这是因为光线已经暴露在胶片上并且会产生灰色。这是它们与顶部的预期曝光混合。

胶片颗粒

模拟胶片中有银色颗粒。 ISO 越高，颗粒的大小就越大——事实上，ISO 和颗粒大小（通过掩码过滤）直接相关。消费电影的典型 ISO 值为 200 到 400 ISO。此外，实验室开发中使用的三个步骤中的化学质量也会影响质量，不仅涉及谷物，还涉及对比度和色彩平衡。

此外，135 胶卷并不是过去唯一的典型尺寸。您的胶片尺寸较小，因此，在相同 ISO 值（颗粒尺寸）下，显影的正片看起来颗粒感更强。

化学品

化学品对开发、质量（非饱和）温度和时间很重要。如果实验室忘记补充化学品，结果将是对比度和色调不佳（在商业实验室中，时间和温度是自动处理的，但化学品需要手动更换）。

有时人们会操纵温度和化学物质来故意制造某些效果，例如漂白、日晒、调整色调（饱和度、色彩平衡、色调）等。

曝光

对于非常旧的相机/胶卷，曝光不均匀是一个值得注意的因素。您可以对胶片进行各种曝光的“渐变”，使其顶部看起来更亮，底部看起来更暗，反之亦然。

在更现代的相机上，大多数手动设置很容易使胶卷曝光过度或曝光不足。如果实验室操作员进行了错误的调整或化学物质不再起作用，那么在开发阳性时也会发生同样的情况。

光学

光学在渐晕中发挥着重要作用，在这种渐晕中，中心较亮，角落较暗。糟糕的光学和外壳更容易产生晕影（我个人是晕影的粉丝，并且经常将其添加到我自己的照片中）。

在许多较旧的自动相机上，固定为“无限远”的镜头意味着任何接近 60 厘米的东西都会出现失焦 - 镜头允许的任何其他东西（塑料镜头在这个时候变得越来越普遍）并且质量低于玻璃镜片）。

相纸

另一个因素是相纸本身的质量以及用于显影正片的化学过程。

根据纸张的构造方式、粒度大小和使用的化学物质，您将获得从光栅般的粗粒度图像到超清晰光泽图像的各种结果。如果正片（纸张）和负片（或 dias 胶片）都使用高 ISO 值，则结果通常会变得模糊和有颗粒感 - 就像将低分辨率数字图像放大到更高尺寸时一样。

模拟与数字

了解模拟电影与数字电影的工作方式也很重要。

本质上，与像素严格有序的数字图像相反，银颗粒分布不均。

曝光过度和曝光不足的胶片仍然可以包含细节，而使用数码胶片时，这些细节会被删除。这与胶片的动态范围与数字的 AD 转换器有关。

颜色表示

颜色也因胶片/纸张乳液以及化学过程而异。还有一些特殊的过程，例如褪色会影响最终颜色。

在数字领域相当于 LUT（查找表），它可以使用更广泛的源范围，使用 1D 或 3D LUT 修改颜色以提供特定外观（“电影”、“电影”、模拟漂白工艺等）。

杂项

当然，还有其他因素，但我将重点关注这些因素，因为它们通常被认为是“复古”风格的一部分（复古不是一个正确的术语 IMO，因为它指的是旧风格 - 没有那么多错误模拟相机是典型的:-)，但我会在这里使用它）。

把它们放在一起

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

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

例如 - 如果我们有两个以这种方式暴露在光线下的空帧，我们可以使用这些图像来混合到我们的主图像上：

要自己制作这些，只需找到一台旧相机，打开后盖，关闭，假脱机到下一帧，重复，然后进行显影（或扫描）。这将产生最自然的结果。

可以通过引入高斯等模糊和噪声来产生胶片颗粒。然而，这看起来并不像 grains，但它是一种简单的方法。

或者，您也可以在此处使用混合到图像上的真实颗粒状框架。为了获得最佳结果，您可以混合“颗粒簇”（将当前颗粒的颜色映射到该颗粒的区域，将同一区域中的图像颜色混合为平均颜色并用它填充颗粒区域）。然而，这有点复杂，计算量也很大。

以下示例还带有灰尘和头发，这在处理模拟电影时也很常见。然而，它们与谷物无关，但您可以在这一层的过程中将它们组合起来：

可以通过去饱和模拟化学过程并提供色调偏差（或简单地调整色彩平衡）。

对于色彩平衡，了解加法颜色（CMYK 颜色，即洋红色与绿色、黄色与蓝色、红色与青色等）的颜色理论是一个优势。

但我们可以将 RGB 转换为 HSL/HSV 色彩空间，而不是通过 CMYK，然后更改色调度并调整饱和度值，然后再转换回 RGB - 或者只是尝试直接在 RGB 中调整色彩平衡，就好像我们直接处理负片。

在颜色调整下还有对比度调整。通过降低对比度来获得更多的雾。

组装

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

当然，要更改颜色，您需要迭代像素。

您可以做出妥协，将以下层合并为一个层：

胶片颗粒
小插曲
漏光

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

顺序很重要，也必须考虑：

首先进行颜色调整
降低对比度
模糊（考虑夸张的边缘模糊来模拟“无限”焦点）
添加图层（或组合的颗粒、晕影、漏光）
考虑调整亮度

结论

虽然，到目前为止只是理论。

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

我还尝试将答案限制在基础知识上，因为如果所有位置都使用算法生成，它可能很快变得非常复杂——因为你需要其中的几个，因此太宽泛而无法回答。

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

Resources

【讨论】：

【解决方案3】：

这是一篇关于理解 HTML5 画布的像素操作以及如何应用这些技术来实现几种常见图像效果的非常棒的文章。

HTML5 Canvas Image Filters

【讨论】：

【解决方案4】：

我不会像 Ken 那样广泛，但我发现了一些对来这里寻找这个问题的答案的人来说可能会有所帮助并且更“可用”的东西。

CamanJS

什么是 CamanJS？

CamanJS 是 Javascript 中的 (ca)nvas (man)ipulation。这是一个组合具有先进和高效的图像/画布的简单易用的界面编辑技术。

CamanJS 很容易使用新的过滤器和插件进行扩展，而且它带有广泛的图像编辑功能，其中继续增长。它完全独立于库，并且可以同时使用在 NodeJS 和浏览器中。

您可以浏览到示例页面，第一个过滤器称为 vintage。

希望这会有所帮助。

【讨论】：