小程序canvas生成海报
接触电商项目应该都知道,一般商品,活动都有生成海报的功能,海报上带有二维码的时候,在微信长按就可以识别跳转,很方便。但是这个功能怎么实现的呢?
两种方式:
- 后端生成,直接返回可访问的海报连接,前端可以下载保存到系统本地
- 前端生成,根据后端接口返回的素材,合成为一张海报,保存到系统本地
今天给出一个小程序前端生成海报的实例
wxml的代码中定义一个canvas
//点击按钮触发create事件生成海报,保存到本地
<view class="share" bindtap="create">分享给好友</view>
<canvas canvas-id="qrcode" style="width: 750px;height:1210px;position: fixed;top: -10000px;"></canvas>
js的代码
const http = require("../../utils/http");
Page({
/**
* 页面的初始数据
*/
data: {
avatar: '', //用户头像网络路径
avatar_path: '', //用户头像本地临时路径
code: '', //邀请码
er_code: '', //二维码网路路径
er_code_path: '', //二维码本地临时路径
desc: '分享好友共享千万补贴~', //描述话语
backgrond: '/images/bgfenx.png', //海报底图路径
backgrond_path: '', //海报底图本地临时
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
var that = this;
// 接口获取素材
http.post("index/user/getPromotion", {}, function(res) {
that.setData({
code:res.data.code,
er_code:res.data.er_code
});
// 下载二维码到临时路径
wx.getImageInfo({
src: res.data.er_code,
success(res) {
that.setData({
er_code_path: res.path
})
}
})
})
// 获取用户信息
http.post("index/user/getUserInfo", {}, function(res) {
that.setData({
avatar:res.data.avatarUrl
});
// 下载用户头像为临时路径
wx.getImageInfo({
src: res.data.avatarUrl,
success(res) {
that.setData({
avatar_path: res.path
})
}
})
})
// 生成海报底图本地临时
wx.getImageInfo({
src: that.data.backgrond,
success(res) {
that.setData({
backgrond_path: res.path
})
}
})
},
/**
* 生成海报事件
*/
create: function() {
var that = this;
wx.showLoading({
title: "海报生成中...",
})
// canvas-id="qrcode"
const context = wx.createCanvasContext('qrcode');
// 海报底图
context.drawImage(that.data.backgrond, 0, 0, 750, 1210);
// 二维码
context.drawImage(that.data.er_code_path, 200, 590, 350, 350);
context.save();
// 用户头像并切成圆的
context.beginPath();
context.arc(148 / 2 + 301 , 148 / 2 + 100 , 148 / 2, 0, Math.PI * 2, false);
context.clip();
context.drawImage(that.data.avatar_path, 301, 100, 148, 148);
context.restore();
// 描述文字
context.setFontSize(30);
context.setFillStyle('#333');
context.setTextAlign('left');
context.fillText(that.data.desc, 210, 440);
context.save();
// 邀请码
context.setFontSize(60);
context.setFillStyle('#EA5513');
context.setTextAlign('left');
context.fillText(that.data.code, 210, 350);
context.save();
// 海报开始描绘
context.draw(true, function(){
wx.canvasToTempFilePath({
canvasId: 'qrcode',
success: function (res) {
console.log(res);
var tempFilePath = res.tempFilePath;
wx.hideLoading();
that.checkAuth(function(){
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success() {
wx.showToast({
title: '海报保存成功,快去分享到朋友圈吧~',
icon: 'none',
duration: 2000
})
},
fail() {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
})
}
})
});
}
});
});
},
/**
* 检查将图片保存到系统的权限
*/
checkAuth: function(next){
wx.openSetting({
success: function(result) {
if (result) {
if (result.authSetting["scope.writePhotosAlbum"] === true) {
next()
} else {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
next()
}
})
}
}
},
fail: function(result) {
console.log(result);
wx.authorize({
scope: 'scope.writePhotosAlbum',
success() {
next();
},
fail() {
wx.showToast({
title: '请设置允许访问相册',
icon: 'none',
duration: 2000
})
}
})
}
});
}
})
示例效果