Question

我一直在寻找，但一直未能找到基于Web / JavaScript的图像编辑器。像aviary这样的东西，但能够将POST图像数据直接发送回托管服务器（without processing by aviary before POSTing to my server）。

我只是在寻找基本的图像编辑 - 裁剪，调整大小以及一些过滤功能。

Aviary一直是解决方案，但上述限制将其视为可行。

Answer 1

我使用Aviary，我所做的就是获取数据并将其发送到新页面并使用asp.net将其保存到服务器

在编辑页面上，我更改了功能：

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>

在下一页中，我使用以下代码保存文件：

<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

我不知道任何完整的开源解决方案，但是如果你想构建一个简单的编辑器，crop和rotate是非常简单的。

CamanJS (Repo)库可能是filters的选项。 typographics上的这个tut也可能有用。

Answer 3

我认为您需要实现一个简单的用户界面来设置某些框架提供的图像处理算法的参数。处理完图像后，您可以将其发布到后台。一些纯Javascript图像处理框架：

如果是MarvinJ，请使用以下代码加载您的图片：

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

我将使用以下输入图像来演示如何使用它：

<强>规模：

 Marvin.scale(image, imageOut, 80);

<强>剪切：

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

<强>棕褐色：

Marvin.sepia(image, imageOut, 40);

<强>浮雕：

Marvin.emboss(image, imageOut);

边缘检测：

Marvin.prewitt(image, imageOut);

<强>模糊：

Marvin.gaussianBlur(image, imageOut, 3);

亮度和对比度：

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

色彩渠道：

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

以前过滤器的可运行示例：

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>

基本的开源JavaScript图像编辑器

3 个答案: