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

发布时间:2022-03-08 10:04:14 作者:iii
来源:亿速云 阅读:470

本篇内容介绍了“小程序分享页面图片怎么实现”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

  开发微信小程序的时候,经常要遇到如上图这样的,保存小程序二维码图片的分享功能。

  首先,需要在 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

  })

  }

  })

  }

  })

  });

  },

“小程序分享页面图片怎么实现”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. 微信小程序怎么实现页面分享onShareAppMessage
  2. 微信小程序如何实现基于Taro的分享图片功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

小程序

上一篇:CSS简化代码的小技巧有哪些

下一篇:小程序app.json文件怎么配置

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》