前言:
我的分享海报是弹框,可根据自己要求写成页面,原理都是一样的,背景图是前期测试的,效果是OK的,真机测试手机也是显示的。
效果图:
wxml:
<!-- 生成海报 -->
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<image src="{{imagePath}}" class='shengcheng'></image>
<button class='baocun' bindtap='baocun'>保存至相册,分享到朋友圈</button>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view>
<view class="canvas-box">
<canvas style="width:375px;height:670px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>
</view>
js:
// pages/my/my.js
import api from '../../utils/http'
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: '',
domainURL: "", //图片线上地址
info: "",
imgList: '',
evalatImage: '',
bgBanner: '', //背景
imagePath: "", //图片
maskHidden: false, //开关
qrcode_image: '', //二维码
headimgurl: '', //头像
nickName: '' //名称
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
userInfo: wx.getStorageSync("userInfo"),
headimgurl: wx.getStorageSync("userInfo").headimgurl,
nickName: wx.getStorageSync("userInfo").nickName,
domainURL: app.globalData.domainURL
})
var that = this;
api.post("/app/web/poster/list").then(res => {
if (res.code == 200) {
//domainURL:图片拼接的线上地址, 可根据自身情况修改
that.setData({
bgBanner: that.data.domainURL + res.data[0].imageUri,
evalatImage: that.data.domainURL + res.data[0].imageUri,
})
//console.log(that.data.bgBanner)
}
}).catch(err => {
//console.log(err)
})
that.qrcode_image();
this.getInfo();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
maskHidden: false
});
},
//点击生成海报
formSubmit: function (e) {
var that = this;
wx.showToast({
title: '海报生成中...',
icon: 'loading',
duration: 1000
});
that.createNewImg();
setTimeout(function () {
// wx.hideToast()
that.setData({
maskHidden: true
});
}, 1000);
},
//将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
createNewImg: function () {
var that = this;
console.log(that.data.bgBanner)
var context = wx.createCanvasContext('mycanvas');
context.clearRect(0, 0, 375, 660); // (X轴坐标,Y轴坐标,宽,高)
wx.getImageInfo({
src: that.data.bgBanner,
success(res) {
//console.log(res)
context.drawImage(res.path, 0, 0, 375, 660);// (X轴坐标,Y轴坐标,宽,高)
context.setFillStyle("#fff")
// context.fillRect(0, 0, 375, 660)// (X轴坐标,Y轴坐标,宽,高)
context.save();
var path = that.data.evalatImage;
context.drawImage(path, 0, 0, 375, 660);// (X轴坐标,Y轴坐标,宽,高)
var path2 = that.data.qrcode_image;
// 里面继续添加图片的话必须要用wx.getImageInfo
wx.getImageInfo({
src: that.data.headimgurl,
success(nav) {
that.setData({
headimgurl: nav.path
})
console.log(that.data.headimgurl, 1, nav.path)
var avatarurl_width = 60; //绘制的头像宽度
var avatarurl_heigth = 60; //绘制的头像高度
var avatarurl_x = 160; //绘制的头像在画布上的位置
var avatarurl_y = 115; //绘制的头像在画布上的位置
context.save();
context.beginPath();
context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
context.clip();
context.drawImage(nav.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
context.restore();
context.draw(context);
},
fail(err) {
//console.log(err)
}
});
var titl = that.data.nickName;
context.setFontSize(18);
context.setFillStyle('#333');
context.setTextAlign('left');
context.font = 'normal bold 18px sans-serif';
context.fillText(titl, 160, 200);
context.stroke();
context.save();
//console.log("海报底部二维码" + path2);
//绘制头像
context.save(); //保存之前的画布设置
context.beginPath();
context.arc(90, 540, 50, 0, 2 * Math.PI);
context.setStrokeStyle("#ffe200");
context.clip(); //裁剪上面的圆形
context.drawImage(path2, 40, 490, 100, 100);// (X轴坐标,Y轴坐标,宽,高)
context.restore();
context.closePath();
console.log(path2)
context.save(); //保存之前的画布设置
// context.draw(true); //true表示保留之前绘制内容
context.draw(context);
},
fail(err) {
//console.log(err)
}
});
//将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath
});
},
fail: function (res) {
//console.log(res);
}
});
}, 1000);
},
//点击保存到相册
baocun: function () {
var that = this
wx.saveImageToPhotosAlbum({
filePath: that.data.imagePath,
success(res) {
wx.showModal({
content: '图片已保存到相册,赶紧晒一下吧~',
showCancel: false,
confirmText: '好的',
confirmColor: '#333',
success: function (res) {
if (res.confirm) {
//console.log('用户点击确定');
/* 该隐藏的隐藏 */
that.setData({
maskHidden: false
})
}
},
fail: function (res) {
//console.log(11111)
}
})
}
})
},
qrcode_image: function () {
let that = this;
wx.request({
url: 'https://api.weixin.qq.com/cgi-bin/token',
data: {
grant_type: 'client_credential',
appid: 'XXXXXX', //不能缺少,否则二维码出不来
secret: 'XXXXXX' //不能缺少,否则二维码出不来
},
success: function (res) {
wx.request({
url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,
data: {
"path": "/pages/login/login", //默认跳转到主页:pages/index/index,可指定
"width": 200,
"scene": "evaId=" + that.data.id, //携带的参数
},
responseType: 'arraybuffer', // 这行很重要,转为二进制数组
header: {
'content-type': 'application/json;charset=utf-8'
},
method: 'POST',
success(res) {
//console.log(res)
//转为base64
let bin64 = wx.arrayBufferToBase64(res.data);
that.setData({
//base 64设置到页面上
qrcode_image: "data:image/png;base64," + bin64
});
let fileManager = wx.getFileSystemManager(); //获取文件管理器
let filePath = wx.env.USER_DATA_PATH + '/code.jpg'; //设置临时路径
fileManager.writeFile({ //获取到的数据写入临时路径
filePath: filePath, //临时路径
// encoding: 'binary', //编码方式,二进制
data: res.data, //请求到的数据
success: function (res) {
// //console.log(res)
wx.getImageInfo({
src: filePath,
success(res) {
//console.log(res)
that.setData({
qrcode_image: res.path
});
}
})
//console.log(filePath)
},
fail: function (res) {
//console.log(res)
},
});
}
})
}
})
}
})
wxss:
/*海报 */
.imagePathBox{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
}
.mask{
width: 100%;
height: 100%;
/* background: rgba(0,0,0,0.7); */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9000;
}
.shengcheng{
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.baocun{
display: block;
width: 100%;
height: 80rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
background: #45be8d;
color: #fff;
font-size: 26rpx;
border-radius: 44rpx;
}
.shareFriends{
display: block;
width: 80%;
height: 104rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
background: #45be8d;
color: rgb(211, 208, 208);
font-size: 32rpx;
border-radius: 44rpx;
}
button[class="baocun"]::after{
border: 0;
}
.noLogin{
font-size: 30rpx;
text-align: center;
color: #fff;
}
OK,完工