Reputation: 1301

Basic Open Source JavaScript Image Editor

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.

Upvotes: 1

Answers (3)

Gabriel Archanjo

Reputation: 4597

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:

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>

Upvotes: 2

Chris VG

Reputation: 36

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>

Upvotes: 2

psema4

Reputation: 3047

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.

Upvotes: 0

Basic Open Source JavaScript Image Editor

Answers (3)

Related Questions