小程序海报制作
刚开始思路是通过php后台，用cavans把海报的所有内容画在一张图片上，保存在服务器中，小程序获取图片地址，在前端展示，过程也很顺利的完成，也展示成功，但图片效果太差，很模呼，查询百度也不知道怎么处理这个模呼问题，所以最后只能放弃，还是选择了直接在小程序端用cavans直接制作图片展示，显示图片清晰度也比较满意。
参考网络上的代码，用弹窗显示海报，效果图和代码如下
wxml中定义一个隐藏的弹窗，点击生成海报，触发显示
<view class='imagePathBox' hidden="{{maskHidden == false}}">
<image src="{{imagePath}}" class='shengcheng'></image>
<text class='baocun' bindtap='baocun'>保存相册，分享到朋友圈</text>
</view>
<view hidden="{{maskHidden == false}}" class="mask"></view>
<view class="canvas-box">
<canvas style="width: 375px;height: 667px;position:fixed;top:9999px" canvas-id="mycanvas" />
</view>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: 10;
}
.shengcheng{
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.baocun{
display: block;
width: 80%;
height: 80rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 150rpx;
left: 10%;
background: #2e3878;
color: #fff;
font-size: 1rem;
border-radius: 44rpx;
}
button[class="baocun"]::after{
border: 0;
}js(php后端怎么获取二维码和相关操作，在这就不展示了)
//获取应用实例
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
userInfo: [],
ewmImg:'',
bdEwmImg:'',
bdUserImg:'',
maskHidden: false,
},
//获取用户二维码
getUserEwm: function () {
var that = this
console.log('获取用户二维码');
wx.request({
url: app.globalData.url + '/admin.php/index/getUserEwm',
data: {
weichat_openid: app.globalData.userInfo.openid
},
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
console.log(res.data);
that.setData({
ewmImg: res.data,
})
// canvas绘制网络图片需保存至本地
wx.getImageInfo({
src: res.data,//服务器返回的图片地址
success: function (res1) {
//res.path是网络图片的本地地址
console.log('本地二维码')
console.log(res1)
that.setData({
bdEwmImg: res1.path,
})
},
fail: function (res1) { }
});
}
})
},
roundRectColor:function(context, x, y, w, h, r) { //绘制圆角矩形（纯色填充）
context.save();
context.setFillStyle("#C7CADB");
context.setStrokeStyle('#C7CADB')
context.setLineJoin('round'); //交点设置成圆角
context.setLineWidth(r);
context.strokeRect(x + r / 2, y + r / 2, w - r, h - r);
context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
context.stroke();
context.closePath();
},
//将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
createNewImg: function () {
var that = this;
var context = wx.createCanvasContext('mycanvas');
this.roundRectColor(context, 0, 100, 375, 500, 16);
context.drawImage(that.data.bdEwmImg, 50, 280, 275, 275);
var avatarurl_width = 120; //绘制的头像宽度
var avatarurl_heigth = 120; //绘制的头像高度
var avatarurl_x = 135; //绘制的头像在画布上的位置
var avatarurl_y = 25; //绘制的头像在画布上的位置
context.save();
context.beginPath(); //开始绘制
//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
context.clip();//画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
context.drawImage(that.data.bdUserImg, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth); // 推进去图片，必须是https图片
context.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
// context.drawImage(that.data.bdUserImg, 112, 10, 150, 150);
context.setFillStyle('#2e3878')
context.setFontSize(35)
context.fillText('天龙', 150, 220)
context.draw();
//将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
console.log(res);
}
});
}, 200);
},
//点击保存到相册
baocun: function () {
console.log('点击保存到相册')
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)
}
})
}
})
},
//点击生成海报
createPoster: function (e) {
var that = this;
this.setData({
maskHidden: false
});
wx.showToast({
title: '生成海报中...',
icon: 'loading',
duration: 1000
});
setTimeout(function () {
wx.hideToast()
that.createNewImg();
that.setData({
maskHidden: true
});
}, 1000)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
userInfo: app.globalData.userInfo
})
var that = this
wx.downloadFile({
url: that.data.userInfo.weichat_img,
success(downloadRes) {
console.log(downloadRes)
if (downloadRes.statusCode === 200) {
that.setData({
bdUserImg: downloadRes.tempFilePath
})
}
}
})
this.getUserEwm();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (ops) {
console.log('分享')
console.log(ops.from)
// if (ops.from === 'button') {
// console.log("来自页面内转发按钮");
// console.log(ops.target);
// var title = ops.target.dataset.title;
// if (title.length > 16) {
// title = title.substring(0, 16) + '...';
// }
// var img = ops.target.dataset.img;
// var id = ops.target.dataset.id;
// } else {
// console.log("来自右上角转发菜单")
// }
return {
title: '创点智卫好友分享',
path: '/pages/index/index?aOpenid=' + app.globalData.userInfo.openid,
// imageUrl: img,
success: function (res) {
// console.log("转发成功", res);
wx.navigateBack({
delta: 1
})
},
fail: function (res) {
console.log("转发失败", res);
}
}
}
})本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
