小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
一般使用l-painter插件跨端生成海报图
一 HTML构造
- 插件提供了
l-painter-view、l-painter-text、l-painter-image、l-painter-qrcode四种类型组件 - 通过
css属性绘制样式，与style使用方式保持一致。
<l-painter >
<l-painter-view css="background: #07c160; height: 120rpx; width: 120rpx; display: inline-block"></l-painter-view>
<l-painter-view css="background: #1989fa; height: 120rpx; width: 120rpx; border-top-right-radius: 60rpx; border-bottom-left-radius: 60rpx; display: inline-block; margin: 0 30rpx;"></l-painter-view>
<l-painter-view css="background: #ff9d00; height: 120rpx; width: 120rpx; border-radius: 50%; display: inline-block"></l-painter-view>
</l-painter>
二 JSON schema构造
- 在json里四种类型组件的
type为view、text、image、qrcode - 通过
board设置海报所需的 JSON schema 数据进行绘制 - 所有类型的schema都具有
css字段，css的样式属性key值使用驼峰命名如：lineHeight
data() {
return {
poster: {
views: [
{
css: {
background: "#07c160",
height: "120rpx",
width: "120rpx",
display: "inline-block"
},
type: "view"
},
{
css: {
background: "#1989fa",
height: "120rpx",
width: "120rpx",
borderTopRightRadius: "60rpx",
borderBottomLeftRadius: "60rpx",
display: "inline-block",
margin: "0 30rpx"
},
views: [],
type: "view"
},
{
css: {
background: "#ff9d00",
height: "120rpx",
width: "120rpx",
borderRadius: "50%",
display: "inline-block"
},
views: [],
type: "view"
},
]
}
}
}
如果原生原生小程序painter.js也支持使用
- 插件里的
painter.js在原生小程序中使用 - new Painter之后在
source里传入JSON schema - 再调用
render绘制海报 - 如需生成图片，请查看微信小程序cavnas的canvasToTempFilePath
我的案例是就用html结构生成海报结构,进入页面后生成并设置css left:100%隐藏起来
<!-- 画板 -->
<view style="position: absolute; bottom:10%; left: 100%;">
<l-painter
css="width: 750rpx;"
isCanvasToTempFilePath
@success="handleSuccess($event)"
@fail="handleError($event)"
@progress="handleProgress($event)"
>
<l-painter-image
:src="painterPath"
css="width: 750rpx; height: 1100rpx; position: relative;"/>
<l-painter-view css="position: absolute; bottom:10%; left: 10%;">
<l-painter-image
:src="avatarUrl"
css="width: 84rpx; height: 84rpx; border-radius: 50%;"/>
<l-painter-view css="display:inline-block;vertical-align: middle; width: 400rpx; height: 84rpx; line-height:42rpx;padding-left: 20rpx;">
<l-painter-text :text="nickname" css="display: block; width: 100%;height: 42rpx; color: #fff; font-size: 30rpx; fontWeight: bold"/>
<l-painter-text text="描述" css="display: block; width: 100%; height: 42rpx;color: rgba(255,255,255,.7); font-size: 24rpx"/>
</l-painter-view>
</l-painter-view>
<l-painter-image
:src="codePath"
css="width: 150rpx; height: 150rpx; position: absolute; bottom:1%; right: 8%;"/>
</l-painter>
</view>
下面js代码, 事件监听错误信息, 小程序保存到系统图片得向用户授权提示, 将生成的海报链接保存下载,不过微信后台跌添加保存下载图片的域名白名单, 不然保存图片时无法显示加载图,微信头像的域名也要添加.
export default {
data(){
return {
nickname:"",
avatarUrl:"",
codePath:"", // 小程序码地址
picture:"",
}
},
methods: {
handleSuccess(path){
uni.hideLoading();
this.picture = path
},
handleProgress(number){
this.progressNum = number
},
handleError(error){
uni.hideLoading();
},
}
用户授权海报保存系统相册提示函数
function saveImage() { //长按保存
if(this.picture !== ""){
uni.hideLoading();
uni.authorize({
scope:"scope.writePhotosAlbum",
success:()=> {
uni.saveImageToPhotosAlbum({
filePath: this.picture,
success:()=>{
uni.showModal({
title:"保存成功",
content:"图片已成功保存到相册，快去分享到您的圈子吧",
showCancel:false
})
}
});
},
fail() {
uni.showModal({
title: '保存失败',
content:"您没有授权，无法保存到相册",
showCancel:false
})
}
})
}else{
uni.showModal({
title:'提示',
content:"生成海报失败,请重试",
showCancel:false,
})
}
},
