效果图：
wxml:
<canvas bindtap='click' canvas-id='canvas' class='share' style='width:{{screenWidth}}px;height:{{screenHeight -64 }}px' hidden='{{canvasHidden}}'></canvas>
<cover-view class='canvas-save' bindtap='saveImageToPhotosAlbum' hidden='{{canvasHidden}}' > <button> 保存到手机</button></cover-view >
css：
.share{ position: fixed; z-index: 1111; background-color: #f2f2f2; left: 0px; top: 0px}
.canvas-save{position:fixed; z-index: 9999; bottom: 100rpx; text-align: center;width: 100%}
.canvas-save button{ background-color: #3998F7; color: #fff; width: 300rpx; height: 80rpx; display: inline-block; font-size: 30rpx}
js：
var project_name;
var pm10;
var air_quality;
var dust_time;
var screenWidth;
var screenHeight;
var drawing = false; /*避免多次点击保存按钮*/
var imgFilePath;
Page({
data: {
canvasHidden: true,
code:''
},
//页面加载处理函数
onLoad: function (options) {
const that = this;
var id = options.id
if (id) {
wx.request({
url: '数据请求地址',
data: { 'id': id },
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
// 请求成功后执行
success: function (res) {
project_name = res.data.content.project_name;
pm10 = res.data.content.pm10;
air_quality = res.data.content.air_quality;
dust_time = res.data.content.dust_time;
//获取用户设备信息，屏幕宽度
wx.getSystemInfo({
success: res => {
that.setData({
screenWidth: res.screenWidth,
screenHeight: res.screenHeight
})
screenWidth = res.screenWidth;
screenHeight = res.screenHeight -64;//减去微信头部高度
}
})
wx.showLoading({
title: '图片生成中',
})
that.setData({
canvasHidden: false,
code: res.data.code,
})
that.canvasdraw();
}
})
} else {
wx.showToast({
title: '参数错误,请重试',
icon: 'none',
})
}
},
// 绘制canvas
canvasdraw: function (share) {
let that = this;
let canvas = wx.createCanvasContext('canvas');
// 处理文字居于中心位置
var imgw = screenWidth / 2 - 58;
var qw = screenWidth / 2 - 35;
var aw = screenWidth / 2 + 40;
var time = screenWidth / 2 - 45;
var area = screenWidth / 2 + 50;
var circle = "../../images/circle.png";
var redcircle = "../../images/redcircle.png";
var bg = "../../images/bg.png";
var bgh = screenHeight - 100;
//下载小程序码到本地
wx.downloadFile({
url: that.data.code,
success: function (msg) {
if (msg.statusCode === 200) {
if (pm10>100) {
// 绘制pm10
canvas.setFontSize(26)
canvas.setFillStyle("#f00")
canvas.textAlign = 'center';
canvas.fillText(pm10, screenWidth / 2, 160)
// 绘制圆形图
canvas.drawImage(redcircle, imgw, 100, 120, 100)
// 绘制空气质量
canvas.setFontSize(13)
canvas.setFillStyle("#f00")
canvas.fillText(air_quality, aw, 225)
}
else{
// 绘制pm10
canvas.setFontSize(26)
canvas.setFillStyle("#1A7CDE")
canvas.textAlign = 'center';
canvas.fillText(pm10, screenWidth / 2, 160)
// 绘制圆形图
canvas.drawImage(circle, imgw, 100, 120, 100)
// 绘制空气质量
canvas.setFontSize(13)
canvas.setFillStyle("#05950F")
canvas.fillText(air_quality, aw, 225)
}
// 绘制项目名称
canvas.setFontSize(17)
canvas.setFillStyle("#000")
canvas.textAlign = 'center';
canvas.fillText(project_name, screenWidth / 2, 60)
// 绘制pm10
canvas.setFontSize(13)
canvas.setFillStyle("#666")
canvas.fillText('pm10', screenWidth / 2, 180)
// 绘制空气质量
canvas.setFontSize(13)
canvas.setFillStyle("#666")
canvas.fillText('空气质量', qw, 225)
// 绘制时间
canvas.setFontSize(13)
canvas.setFillStyle("#666")
canvas.textAlign = 'center';
canvas.fillText(dust_time, screenWidth / 2, 250)
// 绘制背景
canvas.drawImage(bg, 0, bgh, screenWidth, 120)
// 绘制线条
canvas.setStrokeStyle('#ccc')
canvas.strokeRect(40, 280, screenWidth - 80, 160)
//绘制提示
canvas.setFontSize(14);
canvas.fillStyle = "#999999";
canvas.setTextAlign('center');
canvas.fillText('长按识别小程序', screenWidth / 2, 420);
//绘制小程序码
canvas.drawImage(msg.tempFilePath, screenWidth / 2 - 55 , 290 , 110, 110)
canvas.draw(true, setTimeout(function () {
that.daochu()
}, 1000));
}else{
wx.showToast({
title: '图片生成错误！',
icon: 'none',
duration: 2000
})
}
}
})
},
//导出生成指定大小的图片
daochu: function () {
var that = this;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: screenWidth,
height: screenHeight,
destWidth: screenWidth * 3, //3倍像素 更清晰
destHeight: screenHeight * 3,
canvasId: 'canvas',
fileType: 'jpg',//设置图片类型，否则到处图片无背景色
success: function (res) {
imgFilePath = res.tempFilePath
wx.hideLoading();
//that.saveImageToPhotosAlbum(res.tempFilePath)
},
fail: function (err) {
console.log(err)
}
})
},
//保存至相册
saveImageToPhotosAlbum: function () {
console.log(imgFilePath)
wx.saveImageToPhotosAlbum({
filePath: imgFilePath,
success: (res) => {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
drawing = false
},
fail: (err) => {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
})
drawing = false
}
})
},
// 点击图片预览
click: function () {
wx.previewImage({
urls: [imgFilePath],
})
}
});
