107 lines
3.1 KiB
Vue
107 lines
3.1 KiB
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> |