✕
保存图片到本地相册，分享给好友
保存图片
var QR = require("../../utils/qrcode.js");//前端自己生成二维码的js插件
//qrcode.js下载地址：https://github.com/davidshimjs/qrcodejs
Page({
data: {
qrCodeImg: '', //要生成的二维码图片链接
qrCodeImgs: '', //二维码图片
modalDisplay: false, //是否显示遮罩
postUrl: '', //大图
canvasWidth: '', //画布宽度
canvasHeight: '', //画布高度
},
/**生命周期函数--监听页面初次渲染完成*/
onReady: function () {
let that = this;
wx.getSystemInfo({
success(res) {
let scrollHeight = res.windowHeight - 233 - 43;
let ratio = 750 / res.windowWidth;
that.setData({
scrollHeight: scrollHeight,
windowWidth: res.windowWidth,
windowHeight: res.windowHeight,
ratio: ratio,
ercode_canvasWidth: 98 / ratio,
ercode_canvasHeight: 98 / ratio,
canvasWidth: 375 / ratio,
canvasHeight: 670 / ratio,
canvasWidth_y: 50 / ratio
});
}
});
},
//分享按钮
showQrcode: function () {
console.log("点击了分享,分享链接", this.data.qrCodeImg)
wx.showLoading({
title: '分享图片生成中...',
icon: 'loading'
})
this.setData({
modalDisplay: true
})
var size = this.setCanvasSize();//动态设置画布大小
var qrUrl = this.data.qrCodeImg;
if (qrUrl!==''){
this.createQrCode(qrUrl, "myCanvas", size.w, size.h);
}
},
//适配不同屏幕大小的canvas
setCanvasSize: function () {
var size = {};
try {
size.w = this.data.ercode_canvasWidth;
size.h = this.data.ercode_canvasHeight;
} catch (e) {
//console.log("获取设备信息失败" + e);
}
return size;
},
//生成二维码
createQrCode: function (url, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(url, canvasId, cavW, cavH);
setTimeout(() => { this.canvasToTempImage(); }, 1000);
},
//获取临时缓存照片路径，存入data中
canvasToTempImage: function () {
var that = this;
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
qrCodeImgs: tempFilePath//二维码图片
});
that.savePoster()
},
fail: function (res) {
//console.log(res);
}
});
},
//大画布
savePoster: function () {
var that = this;
//console.log("保存图片,二维码图片", that.data.qrCodeImg)
let promise1 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: that.data.qrCodeImgs,
success: function (res) {
console.log("二维码", res)
resolve(res);
}
})
});
let promise2 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'https://carimg/car_contain.png',
success: function (res) {
console.log("车", res)
resolve(res);
}
})
});
let promise3 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'https://carimg/white_bg.png',
success: function (res) {
console.log("白色渐变", res)
resolve(res);
}
})
});
let promise4 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'https://carimg/logo.png',
success: function (res) {
console.log("logo", res)
resolve(res);
}
})
});
let promise5 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'https://carimg/logo.png',
success: function (res) {
console.log("logo", res)
resolve(res);
}
})
});
let promise6 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'https://carimg/title_icon.png',
success: function (res) {
console.log("标题icon", res)
resolve(res);
}
})
});
let promise7 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: 'https://carimg/line_bottom.png',
success: function (res) {
console.log("蓝色线", res)
resolve(res);
}
})
});
Promise.all([
promise1, promise2, promise3, promise4, promise5, promise6, promise7
]).then(res => {
console.log(res)
/* 图片获取成功才执行后续代码 */
var canvas = wx.createCanvasContext('shareCanvas')
let canvasWidth = that.data.canvasWidth,
canvasHeight = that.data.canvasHeight,
ercode_canvasWidth = that.data.ercode_canvasWidth,
ercode_canvasHeight = that.data.ercode_canvasHeight,
ercode_x = 30 / this.data.ratio,
ercode_y = canvasHeight - (185 / this.data.ratio),
txt_x = ercode_canvasWidth + (50 / this.data.ratio),
txt1_y = canvasHeight - (140 / this.data.ratio),
txt2_y = canvasHeight - (110 / this.data.ratio),
logo_x = 15 / (this.data.ratio),
logo_y = 15 / (this.data.ratio),
logo_w = 69.5 / (this.data.ratio),
logo_h = 12.5 / (this.data.ratio),
g50logo_x = 35 / (this.data.ratio),
g50logo_y = 72.5 / (this.data.ratio),
g50logo_w = 140 / (this.data.ratio),
g50logo_h = 53 / (this.data.ratio),
g50title_x = 30 / (this.data.ratio),
g50title_y = 104 / (this.data.ratio),
g50title_w = 326 / (this.data.ratio),
g50title_h = 108 / (this.data.ratio),
white_bg_y = 244 / (this.data.ratio),
car_contain_y = 201 / (this.data.ratio),
car_contain_w = 375 / (this.data.ratio),
car_contain_h = 233 / (this.data.ratio),
line_bottom_y = canvasHeight - (16 / this.data.ratio),
line_bottom_h = 16 / (this.data.ratio);
// 绘制背景图
canvas.setFillStyle('white');
canvas.fillRect(0, 0, canvasWidth, canvasHeight)
canvas.drawImage(res[1].path, 0, car_contain_y, car_contain_w, car_contain_h);
canvas.drawImage(res[2].path, 0, 0, car_contain_w, white_bg_y);
canvas.drawImage(res[3].path, logo_x, logo_y, logo_w, logo_h);
canvas.drawImage(res[4].path, g50logo_x, g50logo_y, g50logo_w, g50logo_h);
canvas.drawImage(res[5].path, g50title_x, g50title_y, g50title_w, g50title_h);
canvas.drawImage(res[6].path, 0, line_bottom_y, car_contain_w, line_bottom_h);
canvas.restore();
// 绘制二维码
canvas.drawImage(res[0].path, ercode_x, ercode_y, ercode_canvasWidth, ercode_canvasHeight);
// 绘制文字
canvas.setFontSize(15 / this.data.ratio);
canvas.fillStyle = "#000";
canvas.fillText("打开微信扫码查看详情", txt_x, txt1_y);
canvas.fillText("分享到朋友圈", txt_x, txt2_y);
canvas.draw();
setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: canvasWidth,
height: canvasHeight,
canvasId: 'shareCanvas',
success: function (res) {
//console.log(res)
that.setData({
postUrl: res.tempFilePath,
})
wx.hideLoading()
},
fail: function (res) {
console.log(res)
}
})
}, 500)
})
},
//保存图片
savePic: function () {
let that = this;
//console.log("保存图片,大画布", that.data.postUrl)
wx.saveImageToPhotosAlbum({
filePath: that.data.postUrl,
success: function (data) {
wx.showToast({
title: '图片保存成功',
icon: 'success',
duration: 2000
})
}
})
},
//关闭
closeRejectModal: function () {
this.setData({
modalDisplay: false
})
}
})/*遮罩*/
.mask {
background: rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 999;
}
.modal-container {
width: 750rpx;
height: 1020rpx;
background: #F3F3F3;
position: absolute;
bottom: 0;
}
.modal-close {
text-align: right;
position: absolute;
right: 30rpx;
top: 20rpx;
}
.modal-text {
font-size: 30rpx;
text-align: left;
margin-bottom: 20rpx;
}
.modal-button{
width: 100%;
padding-top: 52rpx;
position: absolute;
text-align: center;
bottom: 0;
}
.modal-button text{
font-size: 20rpx;
color:#6B6B6B;
}
.but{
width: 46%;
background: #0076BF;
color: white;
margin-top: 40rpx;
margin-bottom: 96rpx;
}
#corde{
width: 100%;
}
