小程序海报生成工具，可视化编辑，酷炫海报一键生成导出代码使用

开门见山

工具地址 点我直达>>painter-custom-poster

因为挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题

背景

在作小程序时候，咱们常常会有一个需求，须要将小程序分享到朋友圈，可是朋友圈是不容许直接分享小程序，那咱们还有其余的办法解决吗?答案确定是有的，即 canvas 生成个性化海报分享图片到朋友圈

分析

1. 小程序中有大量的生成图片需求，可是使用过 canvas 的人，都会发现一些难以预料的问题>>有关小程序的坑
2. 直接在 canvas 上绘制图形，对于普通开发者来讲代码会特别凌乱而且难以维护，常常会花费好久的时间去优化代码
3. 不一样的环境渲染问题，例如在开发者工具看起来好好的，一到 Android 真机，就出现图片不显示，位置不对应等等问题

解决

那可不能够开发一款生成海报的插件库呢?

• 首先，只须要提供一份简单的参数配置文件便可
• 解决掉小程序Canvas遇到的一些大大小小的坑
• 有严苛的测试环节，解决各类环境和各类机型遇到的问题，并提供稳定的线上版本
• 长期维护，并有专人更新迭代更新颖的功能

以上的要求固然是能够的，曾经的我也想尝试开发一款出来，可是后来尝试了几款现成的工具以后就放弃了，毕竟轮子这个东西，是须要不断维护更新的，另外已经有这么多优秀现成的插件了，我为什么还要费力去写呢，贡献代码岂不更美哉，如下是我收集的几款

• 小程序生成图片库，轻松经过 json 方式绘制一张能够发到朋友圈的图片>>Painter
• 小程序组件-小程序海报组件>>wxa-plugin-canvas
• 微信小程序：一个 json 帮你完成分享朋友圈图片>>mp_canvas_drawer

我想干什么

唠了这么多，好像提供给你们插件就没我什么事情了...想走是不可能的
为了可以制做出更酷炫的海报，我思考了许久
虽然有了插件后，只须要提供配置代码就可以制做出一款海报来，可是我发现仍是有些许问题

1. 制做海报效率仍是不够高，微调一个元素的大小和位置，就须要不断的修改保存代码，等待片刻，查看效果，真的烦
2. 一个小小的位置调整可能就须要来回调整无数次，这种最简单的机械化劳动，这辈子是不可能的
3. 拿着完美的稿子，递给设计师看，这个位置不对，这个线太粗，这个颜色过重...你信不信我打死你
4. 对于一些精美复杂的海报，实现起来真的不太现实

那我须要怎么作呢，请点击这个连接体验>>painter-custom-poster
点击左侧例子展现中的任意一个例子，而后导入代码就能看到效果图，这下你应该能猜到了个人想法了

如何实现

• 刚开始我想用简单的html和css加拖动功能实现，经过简单尝试以后就放弃了，由于这个功能真的太复杂了，简单的工具确定是不行的
• 中间这个计划停滞了很长时间，一度已经放弃
• 直到发现了这个库fabric.js，真的太太优秀了，赞美之词无以言表，惟一的缺点就是中文教程太少，必须生啃英文加谷歌翻译
• fabric介绍，你能够很容易地建立任何一个简单的形状，复杂的形状，图像;将它们添加到画布中，并以任何你想要的方式进行修改：位置、尺寸、角度、颜色、笔画、不透明度等

How To Use

目前工具一共分红4部分

例子展现

用来将一些用户设计的精美海报显示出来，经过点击对应的例子并将代码导入画布中

画布区

显示真实的海报效果，画布里添加的元素，均可以直接用鼠标进行拖动，旋转，缩放操做

操做区

第一排四个按钮

1. 复制代码 将画布的展现效果转化成小程序海报插件库所须要的json配置代码，目前我使用的是Painter库，默认会转化成这个插件的配置代码，将代码直接复制到card.js便可
2. 查看代码 这个功能用不用无所谓，能够直观的看到生成的代码
3. 导出json 将画布转化成fabric所须要的json代码，方便将本身设计的海报代码保存下来
4. 导入json 将第3步导出的json代码导入，会在画布上显示已设计的海报样式

第二排五个按钮

1. 画布 画布的属性参数 详解见下方
2. 文字 添加文字的属性参数 详解见下方
3. 矩形 添加矩形的属性参数 详解见下方
4. 图片 添加图片的属性参数 详解见下方
5. 二维码 添加二维码的属性参数 详解见下方

第三排

各类元素的详细设置参数

激活区

激活对象是指鼠标点击画布上的元素，该对象会被蓝色的边框覆盖，此时该对象被激活，能够执行拖动 旋转 缩放等操做
激活区只有对象被激活才会出来，用来设置激活对象的各类配置参数，修改value值后，实时更新当前激活对象的对应状态，点击其余区域，此模块将隐藏

快捷键

• '←' 左移一像素
• '→' 右移一像素
• '↑' 上移一像素
• '↓' 下移一像素
• 'ctrl + z' 撤销
• 'ctrl + y' 恢复
• 'delete' 删除
• '[' 提升元素的层级
• ']' 下降元素的层级

布局属性

通用布局属性

属性	说明	默认
rotate	旋转，按照顺时针旋转的度数	0
width、height	view 的宽度和高度
top、left	如 css 中为 absolute 布局时的做用	0
background	背景颜色	rgba(0，0，0，0)
borderRadius	边框圆角	0
borderWidth	边框宽	0
borderColor	边框颜色	#000000
shadow	阴影	''

shadow

能够同时修饰 image、rect、text 等 。在修饰 text 时则至关于 text-shadow；修饰 image 和 rect 时至关于 box-shadow

使用方法：

shadow: 'h-shadow v-shadow blur color';
h-shadow: 必需。水平阴影的位置。容许负值。
v-shadow: 必需。垂直阴影的位置。容许负值。
blur: 必需。模糊的距离。
color: 必需。阴影的颜色。
举例: shadow:10 10 5 #888888

渐变色支持

你能够在画布的 background 属性中使用如下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 中点，半径为最长边，目前不支持本身设置。

linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)

radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)

！！！注意：颜色后面的百分比必定得写。

画布属性

属性	说明	默认
times	控制生成插件代码的宽度大小，好比画布宽100，times为2，生成的值为200	1

文字属性

属性名称	说明	默认值
text	字体内容	别跟我谈感情，谈感情伤钱
maxLines	最大行数	不限，根据 width 来
lineHeight	行高（上下两行文字baseline的距离）	1.3
fontSize	字体大小	30
color	字体颜色	#000000
fontWeight	字体粗细。仅支持 normal， bold	normal
textDecoration	文本修饰，支持none underline、 overline、 linethrough	none
textStyle	fill： 填充样式，stroke：镂空样式	fill
fontFamily	字体	sans-serif
textAlign	文字的对齐方式，分为 left， center， right	left

备注:

• fontFamily，工具中的第一个例子支持文字字体，可是导入小程序为何看不到呢，小程序官网加载网络字体方法>> 加载字体教程>>
• 文字高度 是maxLines lineHeight2个字段一块儿计算出来的

图片属性

属性	说明	默认
url	图片路径
mode	图片裁剪、缩放的模式	aspectFill

mode参数详解

• scaleToFill 缩放图片到固定的宽高
• aspectFill 图片裁剪显示对应的宽高
• auto 自动填充 宽度全显示 高度自适应居中显示

Tips（必定要看哦～）

• 本工具不考虑兼容性，如发现不兼容请使用google浏览器
• painter如今只支持这几种图形，因此暂不支持圆，线等
• 若是编辑过程，一个元素被挡住了，没法操做，请选择对象并经过[ ]快捷键提升下降元素的层级
• 文字暂不支持直接缩放操做，由于文字大小和元素高度不容易计算，能够经过修改激活栏目maxLines lineHeight fontSize值来动态改变元素
• 如发现导出的代码一个元素被另外一个元素挡住了，请手动调整元素的位置，json数组中元素越日后层级显示就越高，因为painter没有提供层级参数，因此目前只能这样作
• 本工具导出代码全是以px为单位，为何不支持rpx， 由于painter在rpx单位下，阴影和边框宽会出现大小计算问题，因为原例子没有提供px生成图片方案，能够下载我这里修改过的demo>>Painter便可解决
• 文本宽度随着字数不一样而动态变化，想在文本后面加个图标根据文本区域长度布局， 请参考Painter文档这块教程直接修改源码
• 因为本工具开发有些许难度，如出现bug，建议或者使用上的问题，请提issue，源码地址>>painter-custom-poster

海报贡献

若是你设计的海报很好看，而且愿意开源贡献，能够贡献你的海报代码和缩略图，例子代码文件在example中，按顺序排列，例如如今库里例子是example2.js，那你添加example3.js和example3.jpg图片，事例能够参考一下文件夹中源码，而后在index.js中导出一下

导出代码

代码不要格式化，会报错，请原模原样复制到json字段里

生成缩略图

• 刚开始我想在此工具中直接生成图片，可是因为浏览器图片跨域问题致使报错失败
• 因此请去小程序中生成保存图片，图片质量设置0.2，并去tinypng压缩一下图片
• 找到painter.js，替换下边这个方法，能够生成0.2质量的图片，代码以下

saveImgToLocal() {
      const that = this;
      setTimeout(() => {
        wx.canvasToTempFilePath(
          {
            canvasId: 'k-canvas',
            fileType: 'jpg',
            quality: 0.2,
            success: function(res) {
              that.getImageInfo(res.tempFilePath);
            },
            fail: function(error) {
              console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);
              that.triggerEvent('imgErr', { error: error });
            }
          },
          this
        );
      }, 300);
    }

TODO

• [ ] 颜色值选择支持调色板工具
• [ ] 文字padding支持
• [ ] 缩放位置弹跳问题优化
• [ ] 假如需求大的话，支持其余几款插件库代码的生成

~创做不易，若是对你有帮助，请给个星星 star✨✨ 谢谢~