本文章单纯分享Painter库，为找不到小程序生成海报的前端开发者提供查询链接。
一、小程序生成图片库-Painter，轻松通过 json 方式绘制一张可以发到朋友圈的图片。
想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹（有关小程序的坑，可看 https://github.com/Kujiale-Mobile/MP-Keng ）。我们就想到可不可以做一款可以很方便生成图片，并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？对此我们发起了 “画家计划— 通过 json 数据形式，来进行动态渲染并绘制出图片”。
二、git地址：https://github.com/Kujiale-Mobile/Painter.git
git clone https://github.com/Kujiale-Mobile/Painter.git
三、快速上手使用-Painter
1、拉取官方demo文件Painter
2、将Painter的目录 /components/painter下的文件painter直接复制到自己的项目中。
3、作为自定义组件引入，注意目录为引入的代码所在目录
"usingComponents":{
"painter":"/components/painter/painter"
}
4、创建生成图片的页面，在页面中开始画图片
1）index.wxml
<view class="attainShare">
<view class="canvasCss">
<painter palette="{{paintPallette}}" bind:imgOK="onImgOK" widthPixels="375" use2D="{{true}}" />
</view>
<view class="canvasButton" catchtap="saveImage">
保存图片
</view>
</view>
2）index.js
import Text from './palette/text-example';
Page({
imagePath: '',
isSave: false,
data: {
template: {}
},
onImgOK(e) {
console.log(e)
this.imagePath = e.detail.path;
this.setData({
image: this.imagePath
})
if (this.isSave) {
this.saveImage(this.imagePath);
}
},
saveImage() {
if (this.imagePath && typeof this.imagePath === 'string') {
this.isSave = false;
wx.saveImageToPhotosAlbum({
filePath: this.imagePath,
});
}
},
onReady: function() {
this.setData({
paintPallette: new Text().palette(),
});
},
});
3）./palette/text-example中的text-example.js
const text = '锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦';
export default class ImageExample {
palette() {
const views = [];
// 文字循环内容
let tmpText = '';
let index = 0;
for (let i = 0; i < text.length; i++) {
tmpText = `${tmpText}${text[i]}\n`;
if (i % 5 === 4) {
views.push({
type: 'text',
text: tmpText,
css: {
right: `${50 + index}rpx`,
top: '60rpx',
fontSize: '40rpx',
lineHeight: '50rpx',
},
});
index += 50;
tmpText = '';
}
}
// 添加二维码
let qrcode = {
type: 'qrcode',
content: 'https://www.jianshu.com/p/67fd9dc6d445',
css: {
bottom: '40rpx',
left: '180rpx',
color: 'red',
width: '120rpx',
height: '120rpx',
},
};
views.push(qrcode)
return ({
width: '654rpx',
height: '500rpx',
background: '#eee',
views: views,
});
}
}
