微信小程序生成图片保存到相册以及分享给好友

这个功能我研究了一天半，最开始的头疼到后面成功实现，其中艰辛不言而喻，值得记录一下，经常写博客后，会发现自己在遇到问题和技术的时候就会习惯性的写博客，这是一个好习惯

言归正传

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})},})}})}

点击保存，保存到本地相册

//保存至相册imgUrlclickSaveImg() {var _this = thiswx.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.tempFilePathwx.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: {//保存至相册imgUrlclickSaveImg() {var _this = thiswx.canvasToTempFilePath({     //将canvas生成图片canvasId: 'myCanvas',x: 0,y: 0,width: 335,height: 472,success: function (res) {_this._data.imgUrl = res.tempFilePathwx.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>

微信小程序生成图片保存到相册以及分享给好友相关推荐

微信小程序授权保存到相册功能
对于授权有三种情况: 1.用户第一次使用,弹出授权. 2.用户已经拒绝过授权. 3.用户已经授权过. 正确的逻辑处理是: (1)获取用户授权的信息 (2)判断scope.writePhotosAlbu ...
微信小程序下载视频到相册（带进度条）
微信小程序下载视频到相册,并带进度条 <button class="desc-note my-button u-font-32" @click="toUpload( ...
微信小程序转二维码方法分享
微信小程序转二维码方法分享需要转码的可以看看这个东西是看个人需求的,618就要来了,各种活动也将来袭有些小伙伴不知道怎么生成为了方便小程序邀请活动没法外发,这里分享下将小程序转二维码的方法首 ...
微信小程序如何通过button按钮实现分享（转发）功能
微信小程序如何通过button按钮实现分享(转发)功能导读:微信小程序通过button按钮实现分享(转发)功能有两种方式,一种是页面内按钮分享,一种是菜单转发.下面具体为大家解答.... 微信小程 ...
微信小程序授权保存图片到相册
在微信小程序中,做分享朋友圈,保存图片视频到相册,需要授权,会经常遇到.有时用户误操作,第一次拒绝授权弹框后,微信会认为用户拒绝该授权意愿并且不会再次调起授权弹框,这是该怎么办呢? 1.授权情况分析 ...
微信小程序下载保存文件
前言总是有需求想在微信小程序里面做下载文件并保存的功能,所以自己整理了一下小程序涉及到下载api,大致理了下在小程序里面下载的流程和解决方案. 一.涉及api 1.wx.saveFile() 文 ...
微信小程序选择图片（相册中选择/相机拍摄）
微信小程序中关于选择函数有专门的函数: wx.chooseImage(Object object) 从本地相册选择图片或使用相机拍照. 参数 Object object 属性类型默认值必填说明 ...
Spring Boot+微信小程序_保存微信登录者的个人信息
1. 前言微信小程序开发平台,提供有一类 API,可以让开发者获取到微信登录用户的个人数据.这类 API 统称为开放接口. Tip:微信小程序开发平台,会把微信登录用户的个人信息分为明文数据和敏感数 ...
微信小程序：从本地相册选择图片、相机拍照，并将所选图片上传到服务器
简介小程序项目中有个需求:用户聊天时可以上传图片,还能支持拍照.于是学习了一下,分享给大家. 微信小程序中有个wx.chooseImage的方法可以快捷调用达到需求的效果. 具体实现 1.为了简化代 ...

微信小程序生成图片保存到相册以及分享给好友

微信小程序生成图片保存到相册以及分享给好友相关推荐

最新文章

热门文章