使用 HTML 5 和 Canvas 构建图像编辑器

Posted 2023-05-08

【中文标题】使用 HTML 5 和 Canvas 构建图像编辑器

【英文标题】：Building an Image Editor with HTML 5 and Canvas

【发布时间】：2011-11-21 18:13:25

【问题描述】：

我想构建一个类似于http://www.getuncommon.com 的产品定制器。但我将使用 html5 画布和 javascript 而不是 Flash。

是否有一个库可以用来创建和实现与 Uncommon 类似的编辑器/产品定制器？

我确实看过 jQuery UI，但它似乎更专注于界面而不是创建我自己的编辑器。

【参考方案1】：

看看Fabric.js canvas library。

我们将它用于design editor on printio.ru 的生产中

【讨论】：

哇，我来看看这个。谢谢

【参考方案2】：

我不久前做过类似的事情。

我使用了 JQuery 和 Raphael JS。 Raphael 在 Internet Explorer 中使用 VML，在其他浏览器中使用 SVG 和 Canvas，使其成为非常好的跨浏览器兼容选项。

可以在here 找到一个使用 Raphael 的项目的良好演示。

我使用了这个演示中的大量代码来开发我自己的工具。

希望对您有所帮助。

【讨论】：

还有类似的库吗？

@Adam 是否有任何库可以为我的 json 对象开发编辑器？

@chaosguru 抱歉，不确定那个。

@MahdiAlkhatib 试试dmitrybaranovskiy.github.io/raphael。我已经更新了上面的链接:-)

【参考方案3】：

我使用kineticjs 创建了一个E-Card editor。使用图书馆是一次很棒的体验。