emis-app/components/tpx-bluetooth-print/create-image-data-bycanvas.vue

<template>
	<view class="canvas-con" :style="convContSty">
		<canvas :canvas-id="canvasId" :style="canvSty"></canvas>
	</view>	
</template> 

<script>
	
import { showLoading, showToast, hideLoading, canvasGetImageData, getImageInfo, promiseTimeout } from "@/common/untool"
import * as canvasUtil from "@/common/canvasUtil"

export default {
	props:{
		
	},
	computed: {
		canvSty(){
			let sty = `width:${this.canvasWidth}px;height:${this.canvasHeight}px;`
			return sty
		},
		convContSty(){
			// 缩放canvas的父级，绘图可以一屏宽度显示出来
			let bodyRpxWidth = 750
			var convRpxWidth = this.canvasWidth/(uni.upx2px(100)/100);
			let convRpxHeight = this.canvasHeight/(uni.upx2px(100)/100)
			let scale = bodyRpxWidth * 0.92 / convRpxWidth
			let sty = `transform-origin: 0 0;transform: scale(${scale});height:${convRpxHeight * scale}rpx;`
			sty += `margin-left:${bodyRpxWidth * 0.08 / 2}rpx;`
			return sty
		}
	},
	data () {
		return {
			canvasId: uni.$u.guid(20),
			canvasWidth: 1,
			canvasHeight: 1,
			imgData: '',
			imageUrl: '',
		}
	},
	mounted () {
		this.initData()
	},
	unmounted() {
	},
	methods: {
		async initData() {
			this.imageUrl && await this.renderCanvasImg(this.imageUrl);
		},
		renderCanvasImg(filePath, paperWidth) {
			let that = this
			console.log("===renderCanvasImg:filePath=====", filePath)
			return new Promise(async (resolve, reject)=> {
				try{
					let res = await getImageInfo(filePath)
					console.log("getImageInfo res====", res) 
					const ctx = uni.createCanvasContext(that.canvasId, that);
					// 打印宽度须是8的整数倍，这里处理掉多余的，使得宽度合适，不然有可能乱码
					const remainder = paperWidth % 8;
					const w = remainder === 0 ? paperWidth : paperWidth - remainder;
					// 等比算出图片的高度
					const h = Math.floor((res.height * w) / res.width);
					that.canvasWidth = w
					that.canvasHeight = h
					// 在canvas 画一张图片
					let imgRect = canvasUtil.containImg(0, 0, w, h, res.width, res.height)
					let ctData = [imgRect.dx, imgRect.dy, imgRect.dWidth, imgRect.dHeight]
					ctx.fillStyle = 'rgba(255,255,255,1)';
					ctx.clearRect(...ctData);
					ctx.fillRect(...ctData);
					// 把原图缩放到 打印宽度的比例 绘制
					ctx.drawImage(filePath, ...ctData); 
					ctx.draw(false, async() => {
						let imgData = await canvasGetImageData({ canvasId: that.canvasId, width: w, height: h, })
						that.imgData = imgData
						console.log("canvasGetImageData imgData.data.length =====", imgData.data.length)
						// 多次渲染，createCanvasContext，必须使用新的才可以
						that.canvasId = uni.$u.guid(20)
						resolve({
							imgData,
							width: w, 
							height: h
						})
					});
				}catch(e){
					console.log("renderCanvasImg error==========", e)
					// 多次渲染，createCanvasContext，必须使用新的才可以
					that.canvasId = uni.$u.guid(20)
					reject(e)
					showToast('renderCanvasImg：图片渲染异常')
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
	.canvas-con{
		width: 100%;
		margin-bottom: 20rpx;
	}
	/*图片隐藏到窗口外*/
	canvas {
		
	}
</style>