开门见山
工具地址
点我直达>>painter-custom-poster
由于挂载在github page上，打开速度会慢一些，请耐心等待或自行解决git网速问题
在做小程序时候，我们经常会有一个需求，需要将小程序分享到朋友圈，但是朋友圈是不允许直接分享小程序，那我们还有其他的办法解决吗?答案肯定是有的，即 canvas 生成个性化海报分享图片到朋友圈
那可不可以开发一款生成海报的插件库呢?
以上的要求当然是可以的，曾经的我也想尝试开发一款出来，但是后来尝试了几款现成的工具之后就放弃了，毕竟轮子这个东西，是需要不断维护更新的，另外已经有这么多优秀现成的插件了，我为何还要费力去写呢，贡献代码岂不更美哉，以下是我收集的几款
我想干什么
唠了这么多，好像提供给大家插件就没我什么事情了…想走是不可能的
为了能够制作出更酷炫的海报，我思考了许久
虽然有了插件后，只需要提供配置代码就能够制作出一款海报来，但是我发现还是有些许问题
那我需要怎么做呢，请点击这个链接体验
>>painter-custom-poster
点击左侧例子展示中的任意一个例子，然后导入代码就能看到效果图，这下你应该能猜到了我的想法了
How To Use
目前工具一共分成4部分
用来将一些用户设计的精美海报显示出来，通过点击对应的例子并将代码导入画布中
显示真实的海报效果，画布里添加的元素，都可以直接用鼠标进行拖动，旋转，缩放操作
第一排四个按钮
第二排五个按钮
各种元素的详细设置参数
激活对象是指鼠标点击画布上的元素，该对象会被蓝色的边框覆盖，此时该对象被激活，可以执行拖动 旋转 缩放等操作
激活区只有对象被激活才会出来，用来设置激活对象的各种配置参数，修改value值后，实时更新当前激活对象的对应状态，点击其他区域，此模块将隐藏
通用布局属性
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%)
！！！注意：颜色后面的百分比一定得写。
fontFamily，工具中的第一个例子支持文字字体，但是导入小程序为什么看不到呢，小程序官网加载网络字体方法>> 加载字体教程>>
文字高度 是maxLines lineHeight2个字段一起计算出来的
本工具不考虑兼容性，如发现不兼容请使用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 });
}, 300);
创作不易，如果对你有帮助，请给个星星 star✨✨ 谢谢
