Basic Open Source JavaScript Image Editor

Question

I've been looking for, but haven't been able to find, a Web/JavaScript based image editor. Something like aviary, but with the ability to POST the image data back to my hosted server directly (without processing by aviary before POSTing to my server).

I'm only looking for basic image editing - cropping, resizing and maybe some filtering capabilities.

Aviary would've been the solution, but the aforementioned limitations rule it out as viable.

Answer 1

I use Aviary and all I do is take the data and send it to a new page and save it to the server using asp.net

On the edit page I changed the function:

onSaveButtonClicked: function() 
{
    myEditor.getImageData(function(data) 
   {
      // set image to new data, and close editor
      if (myImage) 
      {
    document.getElementById('image2').value=data;
    document.form2.submit();  //Send to next page
      }
      myEditor.close();
    });
    return false;
}

I added a new form under the first form:

<form name="form2" id="form2"> method="post" action="edit_save_image_task.aspx?filename=<%=filename %>" 
        <input id="image2" type="hidden" name="image2" value="" />
</form>

On the following page I save the file with the code below:

<script Runat="Server">    
    Sub Page_Load()
        Dim file1,image3
        image3 = Replace(request("image2"), vbCrLf, "")
        image3 = Replace(image3, vbTab, "")
        image3 = Replace(image3, " ", "")

        file1=replace(image3,"data:image/png;base64,","")

        ' Convert the Base64 UUEncoded input into binary output. 
        Dim binaryData() As Byte
        Try
            binaryData = System.Convert.FromBase64String(file1)
        Catch exp As System.ArgumentNullException
            System.Console.WriteLine("Base 64 string is null.")
            Return
        Catch exp As System.FormatException
            System.Console.WriteLine("Base 64 length is not 4 or is " + _
                                     "not an even multiple of 4.")
            Return
        End Try

        'Write out the decoded data. 
        Dim outFile As System.IO.FileStream
        Try
            Dim filelocation

            filelocation="Where you would like the file saved"

            outFile = New System.IO.FileStream(filelocation, _
                                               System.IO.FileMode.Create, _
                                               System.IO.FileAccess.Write)
            outFile.Write(binaryData, 0, binaryData.Length - 1)
            outFile.Close()
        Catch exp As System.Exception
            ' Error creating stream or writing to it.
            System.Console.WriteLine("{0}", exp.Message)
        End Try

    End Sub
</script>

Answer 2

I think you'll need to implement a simple user interface for setting the parameters of image processing algorithms provided by some framework. After processing the image, you can post it to your backoffice. Some pure Javascript image processing frameworks:

• fabric.js
• processing.js
• MarvinJ

In the case of MarvinJ, use the following code to load your image:

var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);

I'll use the following input image to demonstrate how to use it:

Scale:

 Marvin.scale(image, imageOut, 80);

Cropping:

Marvin.crop(image, imageOut, 60, 0, 80, 120);

Sepia:

Marvin.sepia(image, imageOut, 40);

Emboss:

Marvin.emboss(image, imageOut);

Edge Detection:

Marvin.prewitt(image, imageOut);

Blur:

Marvin.gaussianBlur(image, imageOut, 3);

Brightness and Contrast:

Marvin.brightnessAndContrast(image, imageOut, 70, 60);

Color Channel:

Marvin.colorChannel(image, imageOut, 0, 0, 110);

Runnable example of the previous filters:

var canvas1 = document.getElementById("canvas1");
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);

function imageLoaded(){
 var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
  
 // Scale
 Marvin.scale(image, imageOut, 80);
 imageOut.draw(canvas1);
 imageOut = new MarvinImage(image.getWidth(), image.getHeight());
 
 // Cropping
 Marvin.crop(image, imageOut, 60, 0, 80, 120);
 imageOut.draw(canvas2);
 imageOut = new MarvinImage(image.getWidth(), image.getHeight());
 
 // Sepia
 Marvin.sepia(image, imageOut, 40);
 imageOut.draw(canvas3);
 
 // Emboss
 Marvin.emboss(image, imageOut);
 imageOut.draw(canvas4);
  
 // Edge
 imageOut.clear(0xFF000000);
 Marvin.prewitt(image, imageOut);
 imageOut.draw(canvas5);
  
 // Gaussian Blur
 Marvin.gaussianBlur(image, imageOut, 5);
 imageOut.draw(canvas6);
  
 // Brightness
 Marvin.brightnessAndContrast(image, imageOut, 70, 60);
 imageOut.draw(canvas7);
  
 // Color Channel
 Marvin.colorChannel(image, imageOut, 0, 0, 110);
 imageOut.draw(canvas8);
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="192" height="120"></canvas>
<canvas id="canvas2" width="192" height="120"></canvas>
<canvas id="canvas3" width="192" height="120"></canvas>
<canvas id="canvas4" width="192" height="120"></canvas>
<canvas id="canvas5" width="192" height="120"></canvas>
<canvas id="canvas6" width="192" height="120"></canvas>
<canvas id="canvas7" width="192" height="120"></canvas>
<canvas id="canvas8" width="192" height="120"></canvas>

Answer 3

I'm not aware of any complete and open source solutions but crop and rotate are fairly straight-forward to implement if you want to build a simple editor.

The CamanJS (Repo) library might be an option for filters. This tut on typographics may also be useful.