小程序共享页面图像实现

在开发微信小程序时，您经常需要共享小程序 QR码图像共享功能，如上所示。

首先，您需要在wxml中创建画板画布。

Wxml:

保存图像//保存图像按钮

//此处的canvas-id稍后使用。

//应使用样式的宽度和高度。如果未设置画板的宽度和高度，则无效。

//canvasHidden是一个控制画板隐藏显示的参数。在画板上直接设置display none将导致失效。

数据:

数据: {

canvasHidden:是真的，//设置显示和隐藏画板，不隐藏画布会影响页面的正常显示

avatarUrl:''，//用户头像

nickName:''，//用户昵称

wxappName: app.globalData.wxappName，//小程序 name

shareImgPath:''，

screenWidth:''，//设备屏幕宽度

描述: app.globalData.description，//奖品描述

FilePath:''，//头像路径

}，

Js:

onLoad:函数（选项）{

Var=this

Var userInfo，nickName，avatarUrl

//获取用户信息，头像，昵称和其他数据

wx.getUserInfo（{

成功:函数（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（{

成功: res=> {

that.setData（{

screenWidth: res.screenWidth

}）

CONSOLE.LOG（that.data.screenWidth）

}

}）

//定义保存图像方法

saveImageToPhotosAlbum:

函数（）{

wx.showLoading（{

标题:'保存在.'，

}）

Var that=this;

//设置画板显示以开始绘图

that.setData（{

canvasHidden: false

}）

Var unit=that.data.screenWidth/375

Var path1='./images/bg3.png'

Var avatarUrl=that.data.avatarUrl

Console.log（avatarUrl +'avatar'）

Var path2='./images/award.png'

Var path3='./images/qrcode.png'

Var path4='./images/headborder.png'

Var path5='./images/border.png'

Var unlight='./images/unlight.png'

Var nickName=that.data.nickName

Console.log（nickName +'nickname'）

Var context=wx.createCanvasContext（'share'）

Var description=that.data.description

Var wxappName='加油''that.data.wxappName +'“试试运气”

context.drawImage（path1,0,0，unit * 375，unit * 462.5）

//context.drawImage（path4，unit * 164，unit * 40，unit * 50，unit * 50）

context.drawImage（path2，unit * 48，unit * 120，unit * 280，unit * 178）

context.drawImage（path5，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（path3，unit * 20，unit * 385，unit * 55，unit * 55）

//context.drawImage（path4,48,200,280,128）

context.setFontSize（14）

context.setFillStyle（ '＃999'）

context.fillText（'长按识别小程序'，单位* 90，单位* 408）

context.fillText（wxappName，unit * 90，unit * 428）

//将画板的内容绘制为图片并回调绘图板的路径

Context.draw（false，function（）{

wx.canvasToTempFilePath（{

x: 0，

y: 0，

宽度:单位* 375，

高度:单位* 462.5，

destWidth: unit * 375，

destHeight: unit * 462.5，

canvasId:'分享'，

成功:函数（res）{

that.setData（{

shareImgPath: res.tempFilePath

}）

如果（！res.tempFilePath）{

wx.showModal（{

标题:'提示'，

内容:'在图片中，请稍后再试，

showCancel: false

}）

}

CONSOLE.LOG（that.data.shareImgPath）

//成功保存画板路径后，调用方法将图像保存到用户专辑

wx.saveImageToPhotosAlbum（{

filePath: res.tempFilePath，

//保存成功失败后，应隐藏画板，否则将显示界面。

成功:（res）=> {

CONSOLE.LOG（RES）

wx.hideLoading（）

that.setData（{

canvasHidden: true

}）

}，

失败:（错误）=> {

CONSOLE.LOG（ERR）

wx.hideLoading（）

that.setData（{

canvasHidden: true

}）

}

}）

}

}）

}）;

}，

HiShop小程序工具提供多种类型的商城/商店小程序制作，可视化编辑1秒，在线生成5个步骤。通过拖动和拼接模块布局小程序商城页面，你可以看到你得到的东西，你只需要艺术家来制作一个漂亮的商场。

更多小程序开发案例，全部位于：http://www.hvihi.com/xiaocx/kaifa.html

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。