Instagram Valencia Filter using Imagemagick

Questions and postings pertaining to the usage of ImageMagick regardless of the interface. This includes the command-line utilities, as well as the C and C++ APIs. Usage questions are like "How do I use ImageMagick to create drop shadows?".
Post Reply
puspa
Posts: 1
Joined: 2018-04-04T02:40:07-07:00
Authentication code: 1152

Instagram Valencia Filter using Imagemagick

Post by puspa »

I am working on Valencia fileter of instagram. However i have completed this work from CSS and JS. However i need help how to complete with PHP.

Below is the CSS script provided by the instagram.

Code: Select all

.filter-valencia {
  -webkit-filter: sepia(.25) contrast(1.1) brightness(1.1);
  filter: sepia(.25) contrast(1.1) brightness(1.1);
}

.filter-valencia::before {
  background: rgba(230, 193, 61, .1);
  content: "";
  mix-blend-mode: lighten;
}
And below is JS code:

Code: Select all

// colorFilter
rgbColor = [255, 225, 80, .08];
var adj = rgbColor[3];
for (var i = 0; i < pix.length; i += 4) {
   pix[i] -= (pix[i] - rgbColor[0]) * adj;
   pix[i + 1] -= (pix[i + 1] - rgbColor[1]) * adj;
   pix[i + 2] -= (pix[i + 2] - rgbColor[2]) * adj;
}

// saturation
adj = .1;
for (var i = 0; i < pix.length; i += 4) {
   var r = pix[i],
       g = pix[i + 1],
       b = pix[i + 2];
   var gray = .2989 * r + .587 * g + .114 * b;
   pix[i] = -gray * adj + pix[i] * (1 + adj);
   pix[i + 1] = -gray * adj + pix[i + 1] * (1 + adj);
   pix[i + 2] = -gray * adj + pix[i + 2] * (1 + adj);
}

// contrast
adj = .05 * 255;
var factor = 259 * (adj + 255) / (255 * (259 - adj));
for (var i = 0; i < pix.length; i += 4) {
   pix[i] = factor * (pix[i] - 128) + 128;
   pix[i + 1] = factor * (pix[i + 1] - 128) + 128;
   pix[i + 2] = factor * (pix[i + 2] - 128) + 128;
}
I have no idea on color combination of the image in valencia filter using PHP. If any idea that would be great help.
Bonzo
Posts: 2971
Joined: 2006-05-20T08:08:19-07:00
Location: Cambridge, England

Re: Instagram Valencia Filter using Imagemagick

Post by Bonzo »

As you have not posted a before and after image I have no idea what effect you are looking for. I have no idea what the JavaScript code is doing but this is what I get from the css filter code:

Code: Select all

convert input ( +clone -sepia-tone 25% ) -average -brightness-contrast 10X10 output
You will have to play around with the settings and see what happens.
User avatar
fmw42
Posts: 25562
Joined: 2007-07-02T17:14:51-07:00
Authentication code: 1152
Location: Sunnyvale, California, USA

Re: Instagram Valencia Filter using Imagemagick

Post by fmw42 »

You can contact me if you want. I have a set of Instagram filters as bash unix shell scripts that can be run via PHP exec()
Post Reply