微信小程序生成图片保存到相册以及分享给好友
微信小程序生成图片保存到相册以及分享给好友
·
这个功能我研究了一天半，最开始的头疼到后面成功实现，其中艰辛不言而喻，值得记录一下，经常写博客后，会发现自己在遇到问题和技术的时候就会习惯性的写博客，这是一个好习惯
言归正传
html添加canvas标签
<canvas canvas-id="myCanvas" class="backImg"/>js:
在页面初始化时进行画布展示
onShow() {
const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(this.shareImage, 0, 0, 325, 450) //图片背景图
ctx.save();
//绘制头像
ctx.arc(105, 151, 20, 0, 2 * Math.PI);
ctx.drawImage(this.headImg, 130, 40, 70, 70);//根据微信getUserInfo接口获取到用户头像
// 圆环
ctx.beginPath();//开始绘制
ctx.arc(166, 76, 35, 0, 3 * Math.PI);
ctx.strokeStyle = "#fff";//将线条颜色设置为白色
ctx.lineWidth = 3.0;
ctx.stroke();// 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
//绘制用户昵称
ctx.arc(100, 150, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.name, 170, 150)//用户昵称
/*绘制二维码*/
ctx.arc(130, 140, 20, 0, 2 * Math.PI);
ctx.drawImage(this.erweima, 100, 180, 140, 140);
ctx.save()
//绘制扫描二维码即可开通
ctx.arc(100, 130, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.texta, 170, 390)//扫描二维码即可开通
//绘制成为见习萌主哦
ctx.arc(100, 140, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.texta1, 175, 425)//成为见习萌主哦
// 保留上一次的绘制结果
ctx.draw(true)
},点击微信进行好友分享：
shareFriend(){
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 370,
height: 472,
// destWidth: 370, //截取canvas的宽度
// destHeight: 500, //截取canvas的高度
success: function (res) {
let urls = res.tempFilePath //图片临时路径
wx.showShareImageMenu({ //分享给朋友
path: urls,
success: (res) => {
console.log("分享成功：", res);
},
fail: (err) => {
console.log("分享失败：", err);
wx.showToast({
title: "分享失败",
duration: 2000
})
},
})
}
})
}点击保存，保存到本地相册
//保存至相册imgUrl
clickSaveImg() {
var _this = this
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 335,
height: 472,
// destWidth: 400, //截取canvas的宽度
// destHeight: 500, //截取canvas的高度
success: function (res) {
_this._data.imgUrl = res.tempFilePath
wx.saveImageToPhotosAlbum({ //保存图片到相册
filePath: res.tempFilePath, //生成图片临时路径
success: function () {
wx.showToast({
title: "图片已保存至相册！",
duration: 2000
})
}
})
},
fail: error => {
wx.showToast({
title: "保存图片失败",
duration: 2000
})
if (error.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || error.errMsg === "saveImageToPhotosAlbum:fail auth deny" || error.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册哦~',
showCancel: false,
})
}
},
})
}
})
}
}
})
},完整代码如下：
<template>
<div style="margin-top: 10px">
<canvas canvas-id="myCanvas" class="backImg"/>
<div class="btn">
<div class="btn-wei clear-style">
<img src="../../../static/images/wei.png" @click="shareFriend"/>
<P>微信</P>
</div>
<div class="btn-save">
<img src="../../../static/images/erweima.png" @click="clickSaveImg"/>
<P>保存</P>
</div>
</div>
</div>
</template>
<script>
export default {
name: "lxyInvite",
data() {
return {
shareImage: '../../static/images/back.png',//背景图
name: "用户昵称", //用户昵称
headImg: "../../static/images/wei.png", //用户头像
erweima: "../../static/images/download-B.png", //动态二维码
imgDraw: {}, // 绘制图片的大对象
texta: "扫描二维码即可开通",
texta1: "成为见习萌主哦",
drawing: false,//重复保存图片
imgUrl: ''//临时图片
}
},
onLoad() {
wx.showShareMenu({
// 要求小程序返回分享目标信息
withShareTicket: true
});
},
onShow() {
const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(this.shareImage, 0, 0, 325, 450) //图片背景图
ctx.save();
//绘制头像
ctx.arc(105, 151, 20, 0, 2 * Math.PI);
ctx.drawImage(this.headImg, 130, 40, 70, 70);//根据微信getUserInfo接口获取到用户头像
// 圆环
ctx.beginPath();//开始绘制
ctx.arc(166, 76, 35, 0, 3 * Math.PI);
ctx.strokeStyle = "#fff";//将线条颜色设置为白色
ctx.lineWidth = 3.0;
ctx.stroke();// 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
//绘制用户昵称
ctx.arc(100, 150, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.name, 170, 150)//用户昵称
/*绘制二维码*/
ctx.arc(130, 140, 20, 0, 2 * Math.PI);
ctx.drawImage(this.erweima, 100, 180, 140, 140);
ctx.save()
//绘制扫描二维码即可开通
ctx.arc(100, 130, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.texta, 170, 390)//扫描二维码即可开通
//绘制成为见习萌主哦
ctx.arc(100, 140, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.texta1, 175, 425)//成为见习萌主哦
// 保留上一次的绘制结果
ctx.draw(true)
},
methods: {
//保存至相册imgUrl
clickSaveImg() {
var _this = this
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 335,
height: 472,
success: function (res) {
_this._data.imgUrl = res.tempFilePath
wx.saveImageToPhotosAlbum({ //保存图片到相册
filePath: res.tempFilePath, //生成图片临时路径
success: function () {
wx.showToast({
title: "图片已保存至相册！",
duration: 2000
})
}
})
},
fail: error => {
wx.showToast({
title: "保存图片失败",
duration: 2000
})
if (error.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || error.errMsg === "saveImageToPhotosAlbum:fail auth deny" || error.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册哦~',
showCancel: false,
})
}
},
})
}
})
}
}
})
},
shareFriend(){
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 370,
height: 472,
success: function (res) {
let urls = res.tempFilePath //图片临时路径
wx.showShareImageMenu({ //分享给朋友
path: urls,
success: (res) => {
console.log("分享成功：", res);
},
fail: (err) => {
console.log("分享失败：", err);
wx.showToast({
title: "分享失败",
duration: 2000
})
},
})
}
})
}
},
}
</script>
<style scoped>
.backImg {
width: 90%;
height: 470px;
margin: auto;
display: block;
margin: auto;
/*border: 1px solid red;*/
}
.back {
position: relative;
}
.content {
position: absolute;
width: 90%;
height: 470px;
top: 10px;
left: 34 rpx;
/*border: 1px solid red;*/
}
.headImg {
width: 80px;
height: 80px;
border-radius: 50%;
/*background-color: #00A2CD;*/
margin: 10px auto;
border: 2px solid #FFFFFF;
box-shadow: 0px 3px 20px 0px rgba(221, 0, 69, 0.3);
}
.name {
font-size: 18px;
font-family: PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin: 10px auto;
text-align: center;
}
.erweima {
width: 150px;
height: 150px;
margin: 20px auto;
/*border: 1px solid red;*/
}
.text {
font-size: 24px;
font-family: YouSheBiaoTiHei;
font-weight: bolder;
color: #FFFFFF;
text-align: center;
}
.btn {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
margin-top: 20px;
position: fixed;
bottom: 0;
left: 0;
}
.btn-wei {
border: none;
}
.btn img {
width: 30px;
height: 30px;
}
.btn p {
font-size: 12px;
}
.share-image {
width: 30px;
height: 30px;
}
.clear-style {
border: none;
border-radius: 0;
background-color: transparent !important;
padding: 0 rpx !important;
margin: 0 rpx !important;
text-align: left;
height: 140 rpx;
}
.clear-style::after {
border: none;
}
</style>
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)