小程序、APP、WEB、H5、UNIAPP通用的canvas导出图片，html转为图片多端通用版
<canvas v-show="zhangdanImageShow"
style="width: 380px;height: 500px;background-color: white;border-radius: 5px;" canvas-id="postCanvars"
id="postCanvars"></canvas>
一、导出内容设置方法
getZhangdanImage() {
let textH = 38 //行位置
let titleL = 15 //行左边起始位置
let titleR = 118 //行右边起始位置
let context = uni.createCanvasContext('postCanvars')
context.setFillStyle('#000000')
context.font = 'bold 16px Arial';
context.fillText(this.nianyue + '租金账单', 120, textH)
//订单内容开始
context.font = '14px Arial';
textH = 80
context.setFillStyle('#000000')
context.fillText('房间名称', titleL, textH)
context.setFillStyle('#949494')
let roomName = this.roomName.trim()
if (roomName == '') {
roomName = '无'
} else {
roomName += '房'
}
context.fillText(roomName, titleR, textH)
textH = 110
context.setFillStyle('#000000')
context.fillText('电表度数', titleL, textH)
context.setFillStyle('#949494')
context.fillText(this.electricCount + ' - ' + this.shangyueDianbiao + ' = ' + parseFloat(this
.electricCount - this
.shangyueDianbiao).toFixed(2) + ' 度', titleR, textH)
textH = 140
context.setFillStyle('#000000')
context.fillText('电费价格', titleL, textH)
context.setFillStyle('#949494')
context.fillText(parseFloat(this.dianfeiPrice == '' ? 0 : this.dianfeiPrice).toFixed(2) + ' 元/度', titleR,
textH)
textH = 170
context.setFillStyle('#000000')
context.fillText('电费小计', titleL, textH)
context.setFillStyle('#FF4200')
context.fillText(parseFloat((this.electricCount - this
.shangyueDianbiao) * this.dianfeiPrice).toFixed(2) + ' 元', titleR, textH)
textH = 200
context.setFillStyle('#000000')
context.fillText('水表吨数', titleL, textH)
context.setFillStyle('#949494')
context.fillText(this.waterCount + ' - ' + this.shangyueShuibiao + ' = ' + parseFloat(this.waterCount -
this
.shangyueShuibiao).toFixed(2) + ' 吨', titleR, textH)
textH = 230
context.setFillStyle('#000000')
context.fillText('水费价格', titleL, textH)
context.setFillStyle('#949494')
context.fillText(parseFloat(this.shuifeiPrice == '' ? 0 : this.shuifeiPrice).toFixed(2) + ' 元/吨', titleR,
textH)
textH = 260
context.setFillStyle('#000000')
context.fillText('水费小计', titleL, textH)
context.setFillStyle('#FF4200')
context.fillText(parseFloat((this.waterCount - this
.shangyueShuibiao) * this.shuifeiPrice).toFixed(2) + ' 元',
titleR,
textH)
textH = 290
context.setFillStyle('#000000')
context.fillText('每月租金', titleL, textH)
context.setFillStyle('#FF4200')
context.fillText(parseFloat(this.zujin == '' ? 0 : this.zujin).toFixed(2) + ' 元',
titleR,
textH)
textH = 320
context.setFillStyle('#000000')
context.fillText('其他费用', titleL, textH)
context.setFillStyle('#FF4200')
context.fillText(parseFloat(this.gongtanfei == '' ? 0 : this.gongtanfei).toFixed(2) + ' 元', titleR, textH)
textH = 350
context.font = '8px Arial';
context.setFillStyle('#ededed')
context.fillText('______________________________________________________________________________', titleL,
textH)
textH = 380
context.font = 'bold 14px Arial';
context.setFillStyle('#000000')
context.fillText('账单合计金额', titleL, textH + 5)
context.setFillStyle('#FF4200')
context.fillText(parseFloat(this.sumMoney == '' ? 0 : this.sumMoney).toFixed(2) + ' 元', titleR + 160,
textH + 5)
textH = 410
context.font = '8px Arial';
context.setFillStyle('#ededed')
context.fillText('______________________________________________________________________________', titleL,
textH)
//订单内容结束
context.font = '12px Arial';
context.setFillStyle('#000000')
context.fillText('收个租，多终端快速收交租', titleL, 450)
context.setFillStyle('#949494')
context.fillText('长按/扫码查看收个租小程序', titleL, 470)
context.drawImage('/static/images/xiaochengxu.jpg', 310, 423, 60, 60);
context.stroke()
context.draw()
},
二、调用方法，绘图后延时调用，否则导出空白图片
toImage() {
this.zhangdanImageShow = true
this.getZhangdanImage()
uni.showLoading({
title: '加载中'
});
//导出图片 PC和苹果白底为jpg,安卓白底为png
let ftype='jpg'
let ua = uni.getSystemInfoSync().platform;
if(/android/i.test(ua)){
// 安卓
ftype='png'
}
let that = this
setTimeout(function() {
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 380,
height: 500,
destWidth: 1920,
destHeight: 2280,
fileType: ftype,
quality:1,
canvasId: 'postCanvars',
success: function(res) {
// 在H5平台下，tempFilePath 为 base64
that.previewImage(res.tempFilePath)
uni.hideLoading()
that.zhangdanImageShow = false
}
})
}, 2000)
},