4

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

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

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

4

4 回答 4

18

了解错误

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

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

漏光

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

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

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

胶片颗粒

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

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

化学品

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

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

暴露

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

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

光学

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

晕影效果

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

相纸

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

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

模拟与数字

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

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

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

颜色表示

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

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

杂项

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

把它们放在一起

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

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

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

漏光示例

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

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

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

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

胶片颗粒

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

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

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

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

组装

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

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

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

  • 胶片颗粒
  • 小插图
  • 漏光

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

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

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

结论

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

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

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

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

Resources
于 2013-09-18T00:30:00.843 回答
2

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

HTML5 画布图像过滤器

于 2013-09-23T23:05:23.453 回答
1

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

卡曼JS

什么是卡曼JS？

CamanJS 是 Javascript 中的 (ca)nvas (man)ipulation。它结合了简单易用的界面和先进高效的图像/画布编辑技术。

CamanJS 很容易使用新的过滤器和插件进行扩展，并且它具有广泛的图像编辑功能，并且还在不断增长。它完全独立于库，可在 NodeJS 和浏览器中使用。

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

希望这可以帮助。

于 2013-09-23T17:55:57.033 回答
0

您可以将globalCompositeOperationwithhue用于“快速而肮脏”的解决方案：

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>

于 2021-08-01T03:15:17.647 回答