需求
uniapp框架实现小程序分享并点击保存图片自动下载在系统相册，找了半天发现小程序没有自动截屏的接口只有监听用户截屏的接口，后来在插件市场发现painter这个插件，可以用json的形式生成一张图片然后我调用uniapp的下载图片保存在本地就好了。
1.uni-app插件地址 ext.dcloud.net.cn/plugin?id=1…
2.painter地址 github.com/Kujiale-Mob…
实现步骤：
先去 lingxiaoyi.github.io/painter-cus… 画出你要生成的海报 然后复制json保存 下面有我的案例
- 去painter地址 github.com/Kujiale-Mob…
- 将目录下components/painter 文件下载下来
- 在本地项目新建wxcomponents文件夹 将下载的painter文件夹复制进来
- 在本地项目pages.json中 globalStyle 属性下加入引入路径
"globalStyle": {
"usingComponents":{
"painter":"/wxcomponents/painter/painter"
}
}
5.在页面中使用组件
<painter
@imgOK="onImgOk"
@imgErr="onImgErr"
widthPixels="750"
:customStyle="customStyle"
:palette="template"
/>
palette => template 传入的json代码
onImgOk 海报生成成功的回调函数, e.detail.path 获取 生成的图片
onImgErr 海报生成失败的回调函数
widthPixels 强制指定生成的图片的像素宽度，否则，根据你画布中设置的大小来动态调节，此属性可以提高图片分辨率。
customStyle 设置生成的canvas图片样式
我的案例
- 在使用的页面创建image.js 用来存放海报生成的json数据
export default class LastMayday {
palette(portrait,name,code) {
return ({
"width": "654px",
"height": "1000px",
"background": "#ffffff",
"views": [{
"type": "image",
"url": "http://reg.25175.com/share/images/shareBg.png",
"css": {
"width": "654px",
"height": "1000px",
"top": "0px",
"left": "0px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "qrcode",
"content": code,
"css": {
"color": "#000000",
"background": "#ffffff",
"width": "95.5px",
"height": "95.5px",
"top": "736.5px",
"left": "417.5px",
"rotate": "0",
"borderRadius": ""
}
},
{
"type": "image",
"url": portrait,
"css": {
"width": "100px",
"height": "100px",
"top": "267px",
"left": "120px",
"rotate": "0",
"borderRadius": "15px",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"mode": "scaleToFill"
}
},
{
"type": "text",
"text": "你的好友【"+ name +"】",
"css": {
"color": "#333333",
"background": "rgba(0,0,0,0)",
"width": "320px",
"height": "35.74999999999999px",
"top": "271px",
"left": "237px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "25px",
"fontWeight": "bold",
"maxLines": "2",
"lineHeight": "36.07500000000001px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
},
{
"type": "text",
"text": "正在分享，快来加入吧！",
"css": {
"color": "#999999",
"background": "rgba(0,0,0,0)",
"width": "320px",
"height": "22.88px",
"top": "340px",
"left": "236px",
"rotate": "0",
"borderRadius": "",
"borderWidth": "",
"borderColor": "#000000",
"shadow": "",
"padding": "0px",
"fontSize": "16px",
"fontWeight": "normal",
"maxLines": "2",
"lineHeight": "23.088000000000005px",
"textStyle": "fill",
"textDecoration": "none",
"fontFamily": "",
"textAlign": "left"
}
}
]
});
}
}
- 在vue文件使用
<template>
<view class="container">
<painter @imgOK="onImgOk" @imgErr="onImgErr" widthPixels="750" :customStyle="customStyle" :palette="template"></painter>
<view class="btn" @click="downImage">
保存到本地
</view>
</view>
</template>
<script>
import Card from './image';
export default {
data() {
return {
template: '',
path:''
};
},
onLoad(options) {
this.template = new Card().palette('https://img-cdn-qiniu.dcloud.net.cn/uploads/avatar/000/12/51/28_avatar_max.jpg','11','https://www.baidu.com/')
console.log(this.template)
},
components: {},
onShow() {
this.getData();
},
methods: {
getData() {},
onImgOk(e) {
console.log(e.detail.path);
this.path = e.detail.path
},
onImgErr(e) {
console.log(e);
},
downImage() {
uni.saveImageToPhotosAlbum({
filePath: this.path,
success: function() {
Show.show('下载成功');
},
fail: function() {
Show.show('保存失败，请返回后重试');
}
});
}
}
};
</script>
我在onload的时候把 头像，名字和二维码地址传进去了，到时候会换成上一个页面传进来的，现在只是写了页面
以上就是全部的代码 用于记录！！
