blocks|key|1176016|text|Pixastic有一个使用画布的简单的Javascript图像编辑器。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176017|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jseidelin/pixastic^0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<a href="https://github.com/jseidelin/pixastic" rel="nofollow noreferrer">Pixastic</a> has a simple Javascript image editor that uses Canvas.

blocks|key|1391551|text|如果您使用功能齐全的基于JavaScript的框架(如Cappuccino或SproutCore+)开发应用程序，则这种轻量级图像操作实现起来应该很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1391552|如果你想在站点实现上有更多的灵活性，可以选择一个更小的库，比如jQuery+UI或Interface+Elements+(这是一个非常不完整的列表--周围有很多类似的库)。|1391553|entityMap|0|LINK|mutability|MUTABLE|url|https://www.cappuccino.dev/|1|https://sproutcore.com/|2|https://jqueryui.com/|3|http://interface.eyecon.ro/^0|R|A|0|12|A|1|0|V|9|2|15|I|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]|$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]|R|$5|I|J|K|C|$L|S]]]]

If you develop your app using a full-featured JavaScript-based framework, like <a href="https://www.cappuccino.dev/" rel="nofollow noreferrer">Cappuccino</a> or <a href="https://sproutcore.com/" rel="nofollow noreferrer">SproutCore</a>, this kind of lightweight image manipulation should be trivial to implement.

If you want a bit more flexibility with the site implementation, go with a smaller library like <a href="https://jqueryui.com/" rel="nofollow noreferrer">jQuery UI</a> or <a href="http://interface.eyecon.ro/" rel="nofollow noreferrer">Interface Elements</a> (that's a very incomplete list - there are tons of similar libraries around).

blocks|key|1391622|text|这不是一个完整的答案，但可以指导你。Ext-js有一个名为Ext.Resizable，http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable的对象，你可以将它应用于任何节点，它会添加句柄来调整它的大小。这在他们的核心(类似jsquery)发行版中是不存在的，你需要完整的发行版。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1391623|旋转图像是相当复杂的，因为并不是所有的浏览器都支持旋转(webkit允许通过css旋转)。我建议您使用跨浏览器的画布库，如http://me.eae.net/projects/iecanvas/demo.html，它允许您旋转画布上绘制的图像。然而，你不能真的将我提到的两者结合起来，我建议你从这两个工具中寻找灵感，并推出你自己的(除非其他人已经找到了这样做的工具)|1391624|entityMap|0|LINK|mutability|MUTABLE|url|http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable|1|http://me.eae.net/projects/iecanvas/demo.html^0|17|1L|0|0|1P|19|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

This won't be a full answer, but should guide you. Ext-js has an object called Ext.Resizable, <a href="http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable" rel="nofollow noreferrer">http://www.extjs.com/deploy/dev/docs/?class=Ext.Resizable</a>, you can apply it to any node and it will add handles for resizing it. This is not present in their core (jsquery-like) distro, you need the full distribution.

Rotating the images is quite more complicated as that is not supported in all browsers (webkit allows rotation through css). What I suggest is that you use a cross browser canvas library, like <a href="http://me.eae.net/projects/iecanvas/demo.html" rel="nofollow noreferrer">http://me.eae.net/projects/iecanvas/demo.html</a>, that allows you to rotate images that are drawn on the canvas. However, you can't really combine the two that I've mentioned, I suggest you look at both of them for inspiration and roll out your own (unless somebody else finds a tool that does it already)

blocks|key|1176192|text|当涉及到转换时，fabricJS看起来非常好：http://fabricjs.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1176193|对于效果，CamanJS似乎提供了很多控制，还包括预设滤镜：http://camanjs.com/examples/|1176194|entityMap|0|LINK|mutability|MUTABLE|url|http://fabricjs.com/|1|http://camanjs.com/examples/^0|N|K|0|0|U|S|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

When it comes to transformations, fabricJS looks very good: <a href="http://fabricjs.com/" rel="noreferrer">http://fabricjs.com/</a>

For effects, CamanJS seems to give a lot of control and also includes preset filters : <a href="http://camanjs.com/examples/" rel="noreferrer">http://camanjs.com/examples/</a>

My friend and I have plan to build a web shop. One of the shop's main feature is the ability for the customer to design their own stuff. My friend took <a href="http://www.polyvore.com/cgi/app" rel="nofollow noreferrer">polyvore website</a> as an example.

The above link point to an editor page. In polyvore, the customer can drag and drop items from right-hand side to a 'canvas' in the left-hand side of the page. the image have simple handler for resizing, rotate and move.

This is the main feature that we want to achieve. I want to know if there are any free JavaScript library out there that provide these functionality? We don't need too advance stuffs, because the goal is not making something like online Photoshop application. The polyvore editor has most of the features that we need.

Javascript image editor library

我和我的朋友计划建一个网店。这家商店的主要特点之一是让顾客能够设计他们自己的东西。我的朋友以为例。上面链接指向一个编辑器页面。在polyvore中，客户可以将项目从右侧拖放到页面左侧的“画布”中。图像具有用于调整大小、旋转和移动简单处理程序。这是我们想要实现的主要功能。我想知道是否有提供这些功能的免费JavaScrip...

问Javascript图像编辑库
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript图像编辑库EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Javascript图像编辑库
EN