Question: Translating canvas results to something ImageMagick can replicate

[JAndritsch]

Hi there!

I'm currently working on an sample project that will provide basic image editing (crop, rotate, color correction, etc...) in the browser. The goal is to provide a highly performant and easy-to-use UI that allows someone to sketch out some edits to an image and then save their results.

I was hoping I could use Seriously as a means to generate a preview of what the changes will look like but then use ImageMagick to manipulate the file and save the edits. I'd like to use IM for generating the final results so that I can throw that behavior in an API and send calls to it in order to edit remote files. Seriously would be used as a means for gathering input and showing a preview.

I'm having an "interesting" time attempting to take the values that are being piped into Seriously and converting them into their equivalent ImageMagick inputs. One example I can give you involves altering Saturation.

Seriously's docs show that Saturation can have a min value of -1 and max value of 1. ImageMagick doesn't seem to indicate what values they can accept, but it looks like the reasonable minimum value for saturation would be 0 and the maximum could be anything. I was getting pretty close with using the following calculation for translating Seriously inputs into ImageMagic inputs:

First, the slider config:

<input type="range" min="-1" max="1" step="0.01" />

Then, the JS to convert from Seriously to ImageMagick:

function convertSaturation(val) {
    return (val * 100) + 100;
}

Since ImageMagick considers a saturation of 100 to mean "no change", this should allow a saturation range of 0 - 200. However, through my observations it appears that increases to saturation through Seriously require a larger multiplier in order to generate the equivalent change from ImageMagick. Negative inputs to saturation from Seriously require a smaller multiplier, otherwise the image comes out of ImageMagick entirely greyscale (perhaps this isn't a simple linear equation).

Have you tried anything like this before or have any suggestions for how to accomplish something similar? I'd appreciate any help.

Thanks!

Joel

[positlabs]

Does this absolutely need to exist as a web page? Or would you be open to an alternative approach?

I recently wrote an Electron app that used html/css/js for the ui, and processed images with opencv. It worked pretty well. I did something similar with ffmpeg (http://gifgoat.positlabs.com), which uses prebuilt binaries. This means the user doesn't actually need to have ffmpeg installed on their system. I just select the appropriate executable, and run it.

This way, you'd get an exact "preview" of the results, and you wouldn't even need a server to run anything.

http://electron.atom.io/

[JAndritsch]

Unfortunately it's web page or bust. The feature I described would be something I'm looking to add to an existing web site. I could go with the approach of just using ImageMagick to render the results on the server and then return them to the client, but there would be latency to combat.