页面效果
index.wxml
分享二维码给好友，快去分享吧
保存图片
index.js
import request from '../../../../resquest/request'
import {
base64src
} from '../../../../utils/base64src.js'
const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;
let qrcode;
// 300rpx 在6s上为 150px
const qrcode_w = 300 / rate;
Page({
/**
* 页面的初始数据9
*/
data: {
qrcode_w: qrcode_w,
bool: false,
qrcode: '', //二维码路径
back_url: '', // 背景图片路径
canvasType: false, //canvas是否显示
imagePath: '', //合成图片地址
_width: 0,
_heigth: 0,
uploadUrl: wx.getStorageSync('uploadUrl'),
},
onShareAppMessage: function (res) {
let id = 1
// 新版分享后不进行回调了
return {
title: '分享',
path: '/pages/maintainTab/personalManagement/sharePage',
// imageUrl: '', // 分享界面的图片
success: function (res) {
// 转发成功之后的回调
},
fail: function (res) {
// 分享失败
},
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 背景图地址
this.setData({
back_url: this.data.uploadUrl + 'icon/qyxx_phbj.png'
})
},
// 获取后台二维码
getOrgSharEwm(){
let that = this
request._get('/ws/api/wx/ma/getOrgSharEwm', null, res => {
if(res.result){
that.translateBase64(res.result)
}
}, err => {
console.log(err)
})
},
// 将后台生成的base64码转成图片地址
translateBase64(code){
let that = this
base64src(code, res => {
console.log('base64src返回的数据', res) // 返回图片地址，直接赋值到image标签即可
that.setData({
qrcode: res
})
// 下载背景图
wx.downloadFile({
url: this.data.back_url,
success: function (res) {
if (res.statusCode === 200) {
that.setData({
back_url: res.tempFilePath
})
// 生成海报方法调用
that.getSystem()
}
}
})
// 下载二维码
wx.downloadFile({
url: that.data.qrcode,
success: function (res) {
if (res.statusCode === 200) {
that.setData({
qrcode: res.tempFilePath
})
}
}
})
});
},
// 获取手机宽高
getSystem() {
let that = this
wx.getSystemInfo({
success(res) {
that.setData({
_width: res.windowWidth,
_heigth: res.windowHeight,
canvasType: true,
})
that.drawCanvas(res.windowWidth, res.windowHeight)
}
})
},
// 绘制canvas
drawCanvas(_width,_heigth){
let that = this
let screen_width = this.data._width / 375 // 手机宽度比例，以6s为参考
var context = wx.createCanvasContext('shareCanvas'); // 绘制背景
context.setFillStyle("#eee");
context.fillRect(20, 100, 0, 500);
//背景图片
var back_url = that.data.back_url
//公司名
var orgName = wx.getStorageSync('orgName')
//二维码
var qrcode = that.data.qrcode
//背景图片
context.drawImage(back_url, _width / 15, _heigth / 51, 332 * screen_width, 420 * screen_heigth)
//写入文字-公司名称
context.setTextAlign('center') // 文字居中
context.setFillStyle('#ffffff') // 文字颜色：白色
context.setFontSize(22) // 文字字号：22px
context.fillText(orgName, _width / 2, _heigth / 5)
// 写入二维码
context.drawImage(qrcode, _width / 3.2, _heigth / 4.5, 150 * screen_width, 150 * screen_width)
context.fill()
// context.stroke()
context.draw()
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function () {
that.canvasToTempFilePath()
}, 200)
},
/**
* 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
*/
canvasToTempFilePath(){
let that = this
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
console.log(res);
}
});
},
// 保存图片
saveImage() {
var that = this
if (that.data.imagePath) {
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success() {
that.setData({
showShareImg: false
})
wx.showToast({
title: '图片保存成功，快去分享到朋友圈吧~',
icon: 'none',
duration: 2000
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
} else {
wx.showLoading({
title: '请先等待图片生成再保存',
})
setTimeout(
() => {
wx.hideLoading()
}, 1000)
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.getOrgSharEwm()
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
this.onShareTimeline()
},
onShareTimeline: function () {
}
})
base64转换为ArrayBuffer （base64src.js）
function base64src(code, cb) {
// 获取文件管理器
const fsm = wx.getFileSystemManager();
const timestamp = Date.parse(new Date())
// 自定义文件名
const FILE_BASE_NAME = 'tmp_base64src' + timestamp
// 文件系统中的用户目录路径 （本地路径）
const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.png`;
// 将 base64 字符串转成 ArrayBuffer 对象
const buffer = wx.base64ToArrayBuffer(code)
//异步写入文件（时间会长一些）
fsm.writeFile({
filePath: filePath,
data: buffer,
encoding: 'base64',
success() {
cb(filePath)
},
fail() {
return (new Error('ERROR_BASE64SRC_WRITE'));
},
complete(){
console.log('complete')
}
});
//同步写入文件
// fsm.writeFileSync(
// filePath,
// buffer,
// 'base64'
// )
// cb(filePath)
};
export { base64src };
