使用 JQuery 进行照片拼贴答案

【问题标题】：Photo Collage with JQuery使用 JQuery 进行照片拼贴
【发布时间】：2015-01-21 09:24:13
【问题描述】：

我想用 JQuery 开发一个类似于http://www.fotor.com/features/collage.html 的照片拼贴

已编辑：我已经搜索了几天。 Fotor Collage 使用 Flash。我还尝试使用一些表单构建器作为http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/。我根据自己的需要修改了这些，并将表单导出到 XML 文件以供以后在另一个文件中使用。该应用程序目前仅支持典型的 html 元素作为文本。我还需要添加照片和电影。

非常感谢您的帮助。

【问题讨论】：

你的问题在哪里？
嗯，我想学习如何开发这些东西...有没有可用的库或开源的？
搜索时发现了什么？
嗯，我已经搜索了好几天了。 Fotor Collage 使用 Flash。我还尝试使用一些表单构建器作为 botsko.net/blog/2009/04/07/jquery-form-builder-plugin。我确实根据我的需要修改了这些并将表单导出到 XML 文件以供以后在另一个应用程序中使用。但是，最新版本的 botsko 仅支持一些典型的 html 元素。我仍然需要添加电影之类的内容......并且能够使用框架模板。

标签： jquery flash photo

【解决方案1】：

首先，您尝试做两件不同的事情：

在 CLIENT 上：图片和文档的拖放效果
在服务器上：上传该文件（可能使用 AJAX。请查看 this plugin）

对于 CLIENT 部分，您可以使用 jQuery UI droppable。

一旦文件被删除（使用droppable events），您就可以上传该文件。代码示例：

$( ".selector" ).droppable({
  drop: function( event, ui ) { alert("here i can upload my file"); }
});

这是一个开始编码的例子：http://jqueryui.com/droppable/#photo-manager。

【讨论】：

如何添加一个可以上传照片的照片框，以便我们更换不同的照片？我对这些东西了解不多，所以很难选择一个合适的搜索关键字。非常感谢您的帮助。
可能是因为您混淆了 2 个不同的主题。查看我的更新答案

【解决方案2】：

使用 HTML5 画布，您可以在网站上轻松开发照片拼贴制作工具。和FotoJet一样，都是基于reactjs/jquery和bootstrap等开发的。

最受欢迎的库是FabricJS，你可以用它开发你的应用程序。

【讨论】：