Basic Open Source JavaScript Image Editor

Basic Open Source JavaScript Image Editor

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>

Open Source Web Based Image Editor

Ajax-Image Editor is popular. Another one is Pixastic, which is JavaScript based. Then you have Canvas Paint as well.

Edit: Corrected the Pixastic link. Thanks @Kirby!

Javascript image editor library

Pixastic has a simple Javascript image editor that uses Canvas.

Simple jquery image editor with text function

Have a look a this open source javascript Image Editor :

tui.image-editor

Feature

• Load image to canvas
• Undo/Redo (With shortcut)
• Crop
• Flip
• Rotation
• Free Drawing
• Line drawing
• Shape
• Icon
• Text
• Mask Filter
• Image Filter

Basic demo page

Image Editing on Web Application

Today browsers have become very strong, so you should probably do the basic edits on the client side itself, so there is not too much burden on your server and also utilize the processing power of the client.

You have few libraries for doing this on the client side

1) https://developers.aviary.com/

2) http://camanjs.com/

3) http://www.pixastic.com/editor-test/

but as you say,

Edits are very basic like rotate, crop, enhance brightness add
filters etc

You can create your own code for these kind of edits, there are lot of tutorials out there, few I found useful are here,

http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/

http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

there are few things which if you try to do on the client side they will crash your app completely, for ex. a photo bucket tool.
Here is a tutorial as well for creating a photo bucket tool which uses a flood fill algorithm.

http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/
But you should keep these kind of heavy algorithms on your server so your app doesn't crash.

Online Image Editor - Ajax or Flex / Flash?

Ajax version would have to use something on the server processing the images, like the GD Library or ImageMagick. With flash you/flex you could do the image processing on the client side, and with Flash Player 10 you can take advantage of Pixel Bender for image processing. I guess it depends on the size of your images. I would be interesting to see a benchmark on some big images, flash vs ajax/php.

Good question.

Photoshop-like, embeddable web based image editor?

Hmm. may have found a winner @ http://www.pixlr.com/wiki/developer/api/js-lib

So far it has pretty much all the features I need and then some, in addition they allow you to embed the application.

I'll test this out and see how it goes.

---

Related Topics