本文章單純分享Painter庫(kù)冯凹，為找不到小程序生成海報(bào)的前端開發(fā)者提供查詢鏈接谎亩。
一、小程序生成圖片庫(kù)-Painter宇姚，輕松通過(guò) json 方式繪制一張可以發(fā)到朋友圈的圖片匈庭。
想到小程序中有如此大量的生成圖片需求，而 Canvas 生成方法又是如此難用和坑爹（有關(guān)小程序的坑浑劳，可看 https://github.com/Kujiale-Mobile/MP-Keng ）阱持。我們就想到可不可以做一款可以很方便生成圖片，并且還能屏蔽掉直接使用 Canvas 的一些坑的庫(kù)呢魔熏？對(duì)此我們發(fā)起了 “畫家計(jì)劃— 通過(guò) json 數(shù)據(jù)形式衷咽，來(lái)進(jìn)行動(dòng)態(tài)渲染并繪制出圖片”鸽扁。
二、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直接復(fù)制到自己的項(xiàng)目中卖词。
3巩那、作為自定義組件引入，注意目錄為引入的代碼所在目錄
"usingComponents":{
"painter":"/components/painter/painter"
}
4此蜈、創(chuàng)建生成圖片的頁(yè)面即横，在頁(yè)面中開始畫圖片
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 = '鋤禾日當(dāng)午汗滴禾下土誰(shuí)知盤中餐粒粒皆辛苦';
export default class ImageExample {
palette() {
const views = [];
// 文字循環(huán)內(nèi)容
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: 'http://www.reibang.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,
});
}
}
