4

I've been creating a photo editing webapp and have managed to edit the pixels to create cool image filters with

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

}

However I have not been able to find an algorithm or come up with one that creates a vintage effect. Is this possible with the pixel manipulation imam doing? If so do you know where I can find an algorithm?

An example of the effect is at https://softwareengineering.stackexchange.com/questions/153052/is-there-a-javascript-library-for-creating-vintage-photos

But I would like to edit the pixels as I have been doing so far.

Community
  • 1
  • 1
user1567505
  • 131
  • 1
  • 6
  • 1
    Be specific as to what this "vintage" effect would do. Also, provide an example. Is it possible just to overlay a PNG with alpha? – Brad Nov 13 '12 at 03:21
  • Is there a problem with the answer you linked to? – Brad Nov 13 '12 at 03:28
  • I tried to use the example script vintage.js but the image did not write back to my canvas – user1567505 Nov 13 '12 at 03:30
  • 3
    Study the code https://github.com/rendro/vintageJS/blob/master/src/vintage.js. From line 255 to 334 is the core algorithm for pixel manipulation. – Endre Simo Nov 13 '12 at 06:21
  • use many seperate simple steps: lower contrast a bit, make it B+W, add b+w noise, add a vignette, tint sepia, maybe blur slightly, you get the idea... – dandavis Sep 23 '13 at 20:19

4 Answers4

18

Understanding the errors

It is hard to come up with an algorithm to emulate "vintage" photos (if "vintage" is defined as "old mistreated negatives/photos" :-) ) as the result is multilayered and caused by various physical and chemical factors.

Understanding these factors will help you build the layers that you need in order to emulate the "vintage" look.

Light leak

On the old camera it happen from time to time that the back lid got open causing light to leak onto the negative. As the lid was opened from the side the typical leak appeared on and around the edges or as stripes. As the light exposure was relative long compare to typical intended exposure, the stripes often appeared white with a red blurred halo (on the positive).

Where the exact over-exposed stripes would appear would be random and depending on camera and ambient light conditions.

Additionally, if light leaked onto a film it will often result in a foggy looking image. This because the light already exposed the film and will create a gray color. This is them mixed with the intended exposure on top.

Film grain

Analog film has silver grains in them. The higher ISO the bigger the size of the grain - in fact ISO and grain size (filtered through a mask) are directly related. Typical ISO values for consumer films would be 200 to 400 ISO. In addition, chemical quality in the three steps that are used in laboratory development also affected the quality, not only when it came to grains but to contrast and color balance as well.

Also the 135-film was not the only typical size in the past. You had smaller film sizes and due to this the developed positives appeared more grainy at the same ISO value (grain size).

Chemicals

The chemicals are important in development, quality (non-saturated) the temperature and the time. If a laboratory forgot to replenish the chemicals the result would be poor contrast and color hue (in commercial labs time and temperature is automatically taken care of, but chemicals needs to be manually replaced).

Sometimes people manipulated temperature and chemicals to deliberately create certain effects such as bleaching, solarizing, adjusting tones (saturation, color balance, hue) etc.

Exposure

For really old cameras/film uneven exposure was a noticeable factor. You could have a "gradient" of various exposure on the film resulting it looking lighter at the top and darker at the bottom, or vica versa.

On the more modern cameras, where most settings where manual, if was easy to over- or under-expose a film. In development of positives the same could happen if the lab operator made a wrong adjustment or the chemicals where not working any more.

Optics

Optics plays a role especially with vignetting where you have a lighter center and darker corners. Poor optics and housing was more prone to produce vignette (personally I am a fan of vignette and often adds it to my own photos).

Vignette effect

On many older automatic cameras the lens where fixed to "infinite" meaning anything closer than about 60 cm would appear out-of-focus - anything else as sharp as the lens allowed (plastic lenses became more or more usual at this time and had lower quality than the glass based lenses).

Photo paper

Another factor is the quality of the photo paper itself as well as the chemical process used to develop a positive.

Depending on how papers where constructed, grain size and what chemicals would be used you would get various results from raster-ish rough-grained images to super-sharp glossy ones. If both the positive (paper) and the negative (or dias film) used high ISO values the result would often be blurry and grainy - much like when you enlarge a low-resolution digital image to a much higher size.

Analog versus digital

It is also important to understand how analog film works versus digital.

In essence silver grains are unevenly distributed contrary to digital images where pixels are strictly ordered.

Over- and under-exposed films can still contain details whereas with digital these would be removed. This is related to dynamic range of the film versus the AD converter for digital.

Color representation

Colors are also different depending on film/paper emulsion as well as the chemical process. There is also specialized processes such as bleeching which can affect the end colors.

In the digital domain the equivalent would be LUT (Look-Up Tables) which can use a wider source range using 1D or 3D LUT to modify the color to give a certain look ("film", "cinematic", emulating bleech process and so forth).

Misc

And of course, there are other factors but I'll focus on these as they are typically considered part of the "vintage" style (vintage is not a correct term IMO as it refers to old style - not so much errors that was typical with analog cameras :-), but I'll use it here).

Putting it all together

So how can we use this knowledge? We can separate the different steps into layers of errors.

For example - for light leaks we now know why they appear and where they will appear. We might not need an algorithm per se for this as we can use overlays to create the same effect. As light leak technically is part of a multi-exposure we can mix a "blank" light leak onto an image:

For example - if we have two empty frames that is exposed to light this way we could use images such as these to mix onto our main image:

Light leak examples

To produce these your self just find an old camera open the back lid, close, spool to next frame, repeat and then get it developed (or scanned). This will produce the most natural looking result.

Film grain can be produced by introducing blur and noise such as Gaussian. This will however not really look like grains but it is a simple way of doing it.

Alternatively also here you can use real grainy looking frames that you mix onto the image. For the best result you would mix in "grain clusters" (take the color of the current grain to map area of that grain, mix the colors of the image in the same area to an average color and fill the grain area with it). This is however a bit more complex and computation heavy.

The following examples comes with dust and hair as well which are also typical when dealing with analog films. They are not related to grains however, but you could combine them in this layer of the process:

Film grain

Chemical process can be emulated by de-saturation and provide hue bias (or simply adjust color balance).

For color balance it's an advantage to understand color theory for additive colors (CMYK colors, ie. magenta versus green, yellow versus blue, red versus cyan etc.).

But we could convert RGB to HSL/HSV color space instead of going by CMYK, and change the hue degree and adjust saturation value, then convert back to RGB - or simply just try to adjust the color balance directly in RGB as if we where dealing directly with the negative film.

Under color adjustment comes also contrast adjustment. The more foggy is achieved by reducing the contrast.

Assembling

To assemble all these layers you could probably get away from iterating some layers by simply adjusting alpha level when you draw the overlays - for example for light leak, replace black with transparency and just mix it on top of the image. For grains however you would need to use multiply mode with adjustable bias for either the grains or the original image.

And of course for altering colors you would need to iterate the pixels.

You could make a compromise and combine the following layers into a single layer:

  • Film grain
  • Vignette
  • Light leak

If you do notice that the grain layer would appear as a gray overlay instead of mixing well with the pixels. This can work in case you want to make the image appear more foggy, but you probably need to increase lightness afterwards.

Order is important and must be considered as well:

  • First do the color adjustment
  • Reduce contrast
  • Blur (consider exaggerated edge blur to simulate "infinite" focus)
  • Add the layers (or the combined grains, vignette, light leak)
  • Consider adjusting lightness

Conclusion

Although, so far only theory.

I did not provide a working example as this would actually result in a rather complete solution which is not the purpose of SO of course.

I also tried to limit the answer to the basics as it could quickly become very complex if all where to be generated using algorithms-only as you would need several of them, and therefor being too broad to answer.

In any case, here are some resources that can help you with the various steps:

Resources
Community
  • 1
  • 1
2

Here is a really great article on understanding both HTML5 canvas's pixel manipulation and how to apply those techniques to achieve several common image effects.

HTML5 Canvas Image Filters

eriksssss
  • 410
  • 6
  • 6
1

I will not be as extensive as Ken but I've found something that could be helpful and more "rigt away usable" for anyone coming here looking for an answer to this question.

CamanJS

What is CamanJS?

CamanJS is (ca)nvas (man)ipulation in Javascript. It's a combination of a simple-to-use interface with advanced and efficient image/canvas editing techniques.

CamanJS is very easy to extend with new filters and plugins, and it comes with a wide array of image editing functionality, which continues to grow. It's completely library independent and works both in NodeJS and the browser.

You can browse to the example page, one of the first filters is called vintage.

Hope this helps.

Jérémie Parker
  • 3,184
  • 2
  • 20
  • 33
0

You can use globalCompositeOperation with hue for a "quick and dirty" solution:

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>
Craigo
  • 3,384
  • 30
  • 22