效果圖：
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> 保存到手機(jī)</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; /*避免多次點(diǎn)擊保存按鈕*/
var imgFilePath;
Page({
? data: {
? ? canvasHidden: true,
? ? code:''
? },
? //頁(yè)面加載處理函數(shù)
? onLoad: function (options) {
? ? const that = this;
? ? var id = options.id
? ? if (id) {
? ? ? wx.request({
? ? ? ? url: '數(shù)據(jù)請(qǐng)求地址',
? ? ? ? data: { 'id': id },
? ? ? ? header: {
? ? ? ? ? 'content-type': 'application/x-www-form-urlencoded'
? ? ? ? },
? ? ? ? method: 'POST',
? ? ? ? // 請(qǐng)求成功后執(zhí)行
? ? ? ? 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;
? ? ? ? ? //獲取用戶(hù)設(shè)備信息，屏幕寬度
? ? ? ? ? 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: '參數(shù)錯(cuò)誤,請(qǐng)重試',
? ? ? ? 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)
? ? ? ? ? ? // 繪制空氣質(zhì)量
? ? ? ? ? ? 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)
? ? ? ? ? ? // 繪制空氣質(zhì)量
? ? ? ? ? ? canvas.setFontSize(13)
? ? ? ? ? ? canvas.setFillStyle("#05950F")
? ? ? ? ? ? canvas.fillText(air_quality, aw, 225)
? ? ? ? ? }
? ? ? ? ? // 繪制項(xiàng)目名稱(chēng)
? ? ? ? ? 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)
? ? ? ? ? // 繪制空氣質(zhì)量
? ? ? ? ? canvas.setFontSize(13)
? ? ? ? ? canvas.setFillStyle("#666")
? ? ? ? ? canvas.fillText('空氣質(zhì)量', qw, 225)
? ? ? ? ? // 繪制時(shí)間
? ? ? ? ? canvas.setFontSize(13)
? ? ? ? ? canvas.setFillStyle("#666")
? ? ? ? ? canvas.textAlign = 'center';
? ? ? ? ? canvas.fillText(dust_time, screenWidth / 2, 250)
? ? ? ? ? // 繪制背景
? ? ? ? ? canvas.drawImage(bg, 0, bgh, screenWidth, 120)
? ? ? ? ? // 繪制線(xiàn)條
? ? ? ? ? canvas.setStrokeStyle('#ccc')
? ? ? ? ? canvas.strokeRect(40, 280, screenWidth - 80, 160)
? ? ? ? ? //繪制提示
? ? ? ? ? canvas.setFontSize(14);
? ? ? ? ? canvas.fillStyle = "#999999";
? ? ? ? ? canvas.setTextAlign('center');
? ? ? ? ? canvas.fillText('長(zhǎng)按識(shí)別小程序', 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: '圖片生成錯(cuò)誤！',
? ? ? ? ? ? icon: 'none',
? ? ? ? ? ? duration: 2000
? ? ? ? ? })
? ? ? ? }
? ? ? }
? ? })
? },
? //導(dǎo)出生成指定大小的圖片
? 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',//設(shè)置圖片類(lèi)型，否則到處圖片無(wú)背景色
? ? ? success: function (res) {
? ? ? ? imgFilePath = res.tempFilePath
? ? ? ? wx.hideLoading();
? ? ? ? //that.saveImageToPhotosAlbum(res.tempFilePath)
? ? ? },
? ? ? fail: function (err) {
? ? ? ? console.log(err)
? ? ? }
? ? })
? },
? //保存至相冊(cè)
? 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
? ? ? }
? ? })
? },
? // 點(diǎn)擊圖片預(yù)覽
? click: function () {
? ? wx.previewImage({
? ? ? urls: [imgFilePath],
? ? })
? }
});
