先上效果图
分享图片携带参数:
回归到代码
实际上使用了小程序提供的绘图api,文档在此 小程序画布canvas API,其他还有getImageInfo和saveImageToPhotosAlbum等。
在wxml准备好一个画布,给定一个画布id,宽高见js部分。
<!-- 生成图片的画布 -->
<canvas class='firstCanvas'
style="width:{{windowWidth}}px;height:{{windowHeight}}px;box-shadow: 1px 1px 5px 5px rgba(0, 0, 0, 0.05);"
canvas-id="firstCanvas">
</canvas>
<!-- 按钮 -->
<button bindtap='buildPosterSaveAlbum'>生成海报</button>
page对象中获取设备屏幕宽高用于画布组件。
data: {
// 屏幕可用宽高
windowWidth: wx.getSystemInfoSync().windowWidth,
windowHeight: wx.getSystemInfoSync().screenHeight,
// 图片预览本地文件路径
previewImageUrl: null
},
编写promise处理获取图片信息,请求参数二维码图片等等;
buildPosterSaveAlbum: function() {
let that = this;
wx.showLoading({
title: '图片生成中',
})
// 获取图1信息
// tip 貌似本地静态文件路径不能作为画布的src参数,网络图片无影响。
let promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: 'xxx1.png',
success: function(res) {
resolve(res);
},
fail: function(res) {
reject(res)
}
})
});
// 获取图2信息
let promise2 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: 'xxx2.png',
success: function(res) {
resolve(res);
},
fail: function(res) {
reject(res)
}
})
});
// 执行
Promise.all(
[promise1, promise2]
).then(res => {
// 获取宽高
let wW = that.data.windowWidth;
let wH = that.data.windowHeight;
// 定义画布上下文常量
const ctx = wx.createCanvasContext('firstCanvas');
//背景白色
ctx.setFillStyle('white');
//从x=0,y=0开始绘制白色
ctx.fillRect(0, 0, wW, wH);
/* 绘制图像到画布 图片的位置你自己计算好就行 参数的含义看文档 */
//图1
ctx.drawImage(res[0].path, wW * 0.05, wW * 0.2, wW * 0.9, wW * 0.9);
//图2
ctx.drawImage(res[1].path, wW * 0.05, wW * 0.05, wW * 0.1, wW * 0.1);
/* 绘制文字 位置自己计算 参数自己看文档 */
ctx.setFillStyle('#000000');
ctx.setFontSize(15);
let str = '目标文字';
// 绘制文字
ctx.fillText(str, wW * 0.05, wW * 1.17)
/*保存上下文 绘制 */
// ctx.save();
ctx.draw();
//destWidth值越大图片越清晰/大小成正比 解决画布模糊的问题
//详细的参数见画布文档
wx.canvasToTempFilePath({
canvasId: 'firstCanvas',
width: wW,
height: wH,
destWidth: wW * 3,
destHeight: wH * 3,
quality: 1,
success: function success(res) {
console.log('转图片结果');
// 关闭loading
wx.hideLoading();
// 到page对象的data中
that.setData({
previewImageUrl: res.tempFilePath
})
//可写成函数调用 这里不做解释
wx.saveImageToPhotosAlbum({
filePath: that.data.previewImageUrl,
success(res) {
//保存成功
console.log(res);
},
fail: function(res) {
wx.showToast({
icon: 'fail',
title: 'sorry 保存失败,请稍后再试',
})
return;
}
})
},
complete: function complete(e) {
console.log(e.errMsg);
}
});
}).
catch(err => {
//error 错误处理
})
}
大功告成,不算太麻烦。
tips:需要生成带参数的二维码需要请求微信的api,返回二进制流的图片格式在服务端存为图片之后返回给小程序。
可用python,java或者node处理图片即可。
扫码体验小程序