小程序分享页面图片怎么实现

本篇内容介绍了“小程序分享页面图片怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
　　
　　开发微信小程序的时候，经常要遇到如上图这样的，保存小程序二维码图片的分享功能。
　　首先，需要在 wxml 中 创建一个 画板 canvas 。
　　wxml :
　　保存图片 //保存图片按钮
　　//这里的 canvas-id 后面要用的上。
　　//style里的宽高要用上，不设置宽高画板会失效。
　　//canvasHidden是控制画板显示隐藏的参数，画板直接设置display none，会导致失效。
　　data :
　　data: {
　　canvasHidden:true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
　　avatarUrl: ”, //用户头像
　　nickName: ”, //用户昵称
　　wxappName: app.globalData.wxappName, //小程序名称
　　shareImgPath: ”,
　　screenWidth: ”, //设备屏幕宽度
　　description: app.globalData.description, //奖品描述
　　FilePath:”, //头像路径
　　},
　　js :
　　onLoad: function (options) {
　　var that = this
　　var userInfo, nickName, avatarUrl
　　//获取用户信息，头像，昵称之类的数据
　　wx.getUserInfo({
　　success: function (res) {
　　console.log(res);
　　userInfo = res.userInfo
　　nickName = userInfo.nickName
　　avatarUrl = userInfo.avatarUrl
　　that.setData({
　　avatarUrl: res.userInfo.avatarUrl,
　　nickName: res.userInfo.nickName,
　　})
　　wx.downloadFile({
　　url: res.userInfo.avatarUrl
　　})
　免费云主机域名　}
　　})
　　//获取用户设备信息，屏幕宽度
　　wx.getSystemInfo({
　　success: res => {
　　that.setData({
　　screenWidth: res.screenWidth
　　})
　　console.log(that.data.screenWidth)
　　}
　　})
　　//定义的保存图片方法
　　saveImageToPhotosAlbum:
　　function () {
　　wx.showLoading({
　　title: ‘保存中…’,
　　})
　　var that = this;
　　//设置画板显示，才能开始绘图
　　that.setData({
　　canvasHidden: false
　　})
　　var unit = that.data.screenWidth / 375
　　var path2 = “../images/bg3.png”
　　var avatarUrl = that.data.avatarUrl
　　console.log(avatarUrl + “头像”)
　　var path3 = “../images/award.png”
　　var path4 = “../images/qrcode.png”
　　var path5 = “../images/headborder.png”
　　var path6 = “../images/border.png”
　　var unlight = “../images/unlight.png”
　　var nickName = that.data.nickName
　　console.log(nickName + “昵称”)
　　var context = wx.createCanvasContext(‘share’)
　　var description = that.data.description
　　var wxappName = “来「 ” + that.data.wxappName + ” 」试试运气”
　　context.drawImage(path2, 0, 0, unit * 375, unit * 462.5)
　　// context.drawImage(path5, unit * 164, unit * 40, unit * 50, unit * 50)
　　context.drawImage(path3, unit * 48, unit * 120, unit * 280, unit * 178)
　　context.drawImage(path6, unit * 48, unit * 120, unit * 280, unit * 178)
　　context.drawImage(unlight, unit * 82, unit * 145, unit * 22, unit * 32)
　　context.drawImage(unlight, unit * 178 , unit * 145, unit * 22, unit * 32)
　　context.drawImage(unlight, unit * 274, unit * 145, unit * 22, unit * 32)
　　context.drawImage(unlight, unit * 82, unit * 240, unit * 22, unit * 32)
　　context.drawImage(unlight, unit * 178, unit * 240, unit * 22, unit * 32)
　　context.drawImage(unlight, unit * 274, unit * 240, unit * 22, unit * 32)
　　context.drawImage(path4, unit * 20, unit * 385, unit * 55, unit * 55)
　　// context.drawImage(path5, 48, 200, 280, 128)
　　context.setFontSize(14)
　　context.setFillStyle(“#999”)
　　context.fillText(“长按识别小程序”, unit * 90, unit * 408)
　　context.fillText(wxappName, unit * 90, unit * 428)
　　//把画板内容绘制成图片，并回调 画板图片路径
　　context.draw(false, function () {
　　wx.canvasToTempFilePath({
　　x: 0,
　　y: 0,
　　width: unit * 375,
　　height: unit * 462.5,
　　destWidth: unit * 375,
　　destHeight: unit * 462.5,
　　canvasId: ‘share’,
　　success: function (res) {
　　that.setData({
　　shareImgPath: res.tempFilePath
　　})
　　if (!res.tempFilePath) {
　　wx.showModal({
　　title: ‘提示’,
　　content: ‘图片绘制中，请稍后重试’,
　　showCancel: false
　　})
　　}
　　console.log(that.data.shareImgPath)
　　//画板路径保存成功后，调用方法吧图片保存到用户相册
　　wx.saveImageToPhotosAlbum({
　　filePath: res.tempFilePath,
　　//保存成功失败之后，都要隐藏画板，否则影响界面显示。
　　success: (res) => {
　　console.log(res)
　　wx.hideLoading()
　　that.setData({
　　canvasHidden: true
　　})
　　},
　　fail: (err) => {
　　console.log(err)
　　wx.hideLoading()
　　that.setData({
　　canvasHidden: true
　　})
　　}
　　})
　　}
　　})
　　});
　　},“小程序分享页面图片怎么实现”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: JSONObject.toJSONString出现地址引用问题怎么解决

本篇内容主要讲解“JSONObject.toJSONString出现地址引用问题怎么解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JSONObject.toJSONString出现地址引用问题怎么解决”吧!如果…