这是一个创建于 2017 天前的主题，其中的信息可能已经有所发展或是发生改变。
首先申明不是打广告
最近一个朋友有个 批量生成证书 的需求。有点类似毕业证书或者获奖证书这种，除了姓名或几等奖不一样，其他内容基本都是一样的。
最开始的实现方式是，让他创建一个证书模板，就是填写好证书内容，然后批量导入姓名，最后就可以批量生成证书了
现在就 创建证书模板 他觉得不满意，想做成这种类似的效果： https://ue.818ps.com/?picId=1922617
它这个网站上功能挺多的，不需要这么多，基本上只需要可以通过拖拽方式改变文字的位置、大小、颜色等就行了
各位前端大佬，这种功能应该如何实现？思路是怎么样的呢？有现成的库吗？
 |
1
ssvfdn 2019-05-23 17:22:12 +08:00  1
实现不复杂
1、创建容器 2、实现拖拽 3、创建节点与数据，数据用于保存文字的位置、大小、颜色、位置并且同步节点效果 3.1、创建的时候记住要生成唯一的 key 做为标记 3.2、数据{}，{'唯一 key':{ 'font-size':'', 'color':'','left':'0',top:'0'}, '唯一 key':{}} 4、提交的时候把数据提交给服务端保存就可以 -------- 到时展示的时候也是通过保存的数据遍历解析就可以了。 |
 |
2
mengkun 2019-05-23 18:54:59 +08:00 1
fabricjs 了解一下： http://fabricjs.com
|
 |
6
MiYogurt 2019-05-23 19:51:16 +08:00 1
我为一个团队写过这种应用，性能不太好把控。其实就是修改一些属性而已没什么难的。https://github.com/MiYogurt/drop-test 你可以看一下这个，很简单。
|
|
7
MiYogurt 2019-05-23 19:53:23 +08:00
|
 |
9
plqws 2019-05-23 20:27:11 +08:00
HTML5 Drag&Drop API 几分钟上手一下就可以了
|
 |
10
xiangyuecn 2019-05-23 20:52:29 +08:00 1
目测 “拖拽” 方式改变文字的 “位置、大小、颜色” 是一个伪需求（同一种证书应该书写 位置 大小 是固定的吧😒 颜色就不知道了，如果不是，那每次都要拖来拖去，那也太好玩了）。简单点的给个输入框、下拉框 供填写和选择就 ojbk 了。制作好证书背景图和对应的坐标、字体配置，外加一个 canvas、一个导入 file input、一个导出 button，再加一个 jszip 打压缩包。纯原生手撸 js。一个 html 文件足以，服务器也可以省了😜
|
 |
11
lzuntalented 2019-05-23 20:56:51 +08:00 1
|
|
12
ssvfdn 2019-05-24 08:59:03 +08:00 1
@imherer 放大与缩小可以通过计算得改变 width 与 height 或者通过样式 zoom 解决
所说的技术对于节点操作比较好的可以考虑下 jQuery，不过原生 JS 也可以实现的 这里用到的技术不多，用原生 JS 也能简单搞定 这里需要你 CSS 与 JS 都有一定基础 |
 |
13
imherer OP @xiangyuecn 「“拖拽” 方式改变文字的 “位置、大小、颜色”」
同一种证书位置大小什么的确实是固定的。 要实现这个需求的主要目的是创建不同种类的证书 |
Select Language