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.

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.

• javascript
• html
• image-processing

Share Improve this question Follow edited Jan 15, 2013 at 1:39 culturalanomoly asked Jan 15, 2013 at 1:32 culturalanomolyculturalanomoly 1,29933 gold badges1717 silver badges2929 bronze badges 2

• You don't want a temporary image, you want to get each operation and save the changes to the picture in the database or server file system. Am I right? – İsmet Alkan Commented Jan 15, 2013 at 1:48
• Almost, I want to have the editor facilitate any and all changes on the client (browser). Then, when editing is plete, POST the data to my server, not an intermediate server. – culturalanomoly Commented Jan 15, 2013 at 1:50

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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>

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./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./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/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>

I'm not aware of any plete 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.