Web 应用程序上的图像编辑

Question

在我的网站上，用户存储了一些图像。我想建立一个系统，他们可以在网站上编辑这些图像并保存它们。编辑非常基本，如旋转、裁剪、增强亮度添加过滤器等。我正在尝试弄清楚如何实现这一点。

My understanding so far is that there are multiple ways in which I can do this. I can write all my image editing code(using libraries) on server side and then call this service API from my website.

I can also make all the changes on client side. I found PicMonkey library which would let me do it (it's flash based though so I don't really want to use it.)

I also checked how flickr does it, they use this library https://developers.aviary.com/ which lets them do all the client side edits.

I'd like to know more about using these client side javascript libraries ( such as aviary ) what are the pros and cons of using them vs server side edits. What service component I need to write, if at all if I'm using something like Avairy. More specifically, do I send image to server for modification or do I modify it on HTML canvas first and then send the modified image to server to save it.

Answer 1

现在浏览器已经变得非常强大，所以你可能应该在客户端自己做基本的编辑，这样你的服务器就没有太大的负担，也可以利用客户端的处理能力。

在客户端执行此操作的库很少

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

2) http://camanjs.com/

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

但正如你所说，

编辑非常基本，如旋转、裁剪、增强亮度添加过滤器等

您可以为这些类型的编辑创建自己的代码，那里有很多教程，我发现有用的很少在这里，

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

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

例如，如果您尝试在客户端做一些事情，它们会使您的应用程序完全崩溃。一个照片桶工具。这里还有一个教程，用于创建使用洪水填充算法的照片桶工具。

http://www.williammalone.com/articles/html5-canvas-javascript-paint-bucket-tool/ 但是你应该在你的服务器上保留这些繁重的算法，这样你的应用程序就不会崩溃。