我一直在寻找，但一直未能找到基于 Web/JavaScript 的图像编辑器。类似aviary的东西，但能够POST将图像数据直接返回到我的托管服务器（在 aviaryPOST处理到我的服务器之前无需处理）。
我只是在寻找基本的图像编辑——裁剪、调整大小，也许还有一些过滤功能。
Aviary 本来是解决方案，但上述限制排除了它的可行性。
问问题
12361 次
3 回答
2
我使用 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>
于 2013-01-18T19:40:51.717 回答
2
我认为您需要实现一个简单的用户界面来设置某些框架提供的图像处理算法的参数。处理完图像后，您可以将其发布到您的后台。一些纯 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>于 2018-01-04T02:11:45.743 回答