wxml

<view class="page-body"><!-- 畫布 --><view class="page-body-wrapper"><canvas canvas-id="myCanvas" type="2d" id="myCanvas" class='myCanvas' bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></canvas></view><!-- 操作 --><view class="layout-bottom"><view class="page-bottom"><view class="pbottom pmiddle" bindtap="pre"><image src="/images/next2.png" style="height: 65rpx; width: 65rpx; " mode="aspectFit"></image><view class="pictureBottomArea"><p>返回</p></view></view><view class="pbottom pmiddle" bindtap="detection"><image src="{{sbUrl}}" style="height: 100rpx; width: 100rpx; " mode="aspectFit"></image><view class="pictureBottomArea1"><p>識別</p></view></view><view class="pbottom pmiddle" bindtap="clear"><image src="/images/qc3.png" style="height: 70rpx; width: 70rpx; " mode="aspectFit"></image><view class="pictureBottomArea"><p>清除選區</p></view></view></view></view>
</view>

wxss

.myCanvas { background-color: #F7F7F7; width: 100vw; height: 100vh; }
page { width: 100%; height: 100%; padding: 0; margin: 0; background-color: #F8F8F8; font-size: 32rpx; line-height: 1.6; display: flex; display: -webkit-flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; }
.page-body { width: 100%; height: 100%; padding: 0; margin: 0; }  .page-body-wrapper { width: 100%; height: 80%; display: flex; flex-direction: column; align-items: center; width: 100%; }
.layout-bottom { width: 100%; height: 20%; background-color: white; }
.page-bottom { width: 100%; height: 75%; display: flex; display: -webkit-flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.pbottom { width: 33.333333333%; height: 100%; }
.pmiddle{ display: flex; display: -webkit-flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; }
.pictureBottomArea { margin-top: 15rpx; font-size: small; }
.pictureBottomArea1 { font-size: 0.9rem; letter-spacing:4rpx; font-weight: 600; color: #585858; }

js

圖片適配畫布顯示，關鍵在于計數圖片縮放比例

// 定義變量
let startX, startY, endX, endY, rectWidth, rectHeightPage({data: {drawWidth: 0,drawHeight: 0,drawX: 0,drawY: 0,ratio: 0,//縮放比例sbUrl: '/images/a2.png',//按鈕imgSrc: '/images/ll.png',area: [],ctx: null,canvas: null,drawimage: null,},onLoad(options) {startX = 0startY = 0endX = 0endY = 0rectWidth = 0rectHeight = 0//把圖片繪制到畫布上this.drawImage(this.data.imgSrc)},//把圖片繪制到畫布上drawImage(imgSrc){let _this = thiswx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res0) => {//獲取canvas寬高const canvas = res0[0].nodeconsole.log(canvas)let ctx = canvas.getContext('2d');const cw = res0[0].widthconst ch = res0[0].heightconsole.log('Canvas寬度：'+cw, 'Canvas高度：'+ch)const dpr = wx.getSystemInfoSync().pixelRatioconsole.log(dpr)canvas.width = cw * dpr     // 獲取寬canvas.height = ch * dpr  // 獲取高console.log(cw * dpr, ch * dpr)ctx.scale(dpr, dpr)wx.getImageInfo({src: imgSrc,success: function (res) {//獲取圖片寬高let iw = res.widthlet ih = res.heightconsole.log('圖片寬度：'+iw, '圖片高度：'+ih);// 計算繪制位置，保持原始比例let ratio = Math.min(cw / iw, ch / ih);console.log(ratio)// 圖片適配畫布顯示，關鍵在于計數圖片縮放比例let drawWidth = iw * ratio;let drawHeight = ih * ratio;console.log('圖片縮放后寬度：'+drawWidth, '圖片縮放后高度：'+drawHeight);let drawX = (cw - drawWidth) / 2;let drawY = (ch - drawHeight) / 2;// 到這里就可以直接繪制let image = canvas.createImage();//創建iamge實例image.src = imgSrc;  // 引入本地圖片image.onload = function () {ctx.drawImage(image, 0, 0, drawWidth, drawHeight);}_this.setData({drawWidth: drawWidth,drawHeight: drawHeight,drawX: drawX,drawY: drawY,  ratio: ratio,ctx: ctx,canvas: canvas,drawimage: image})},fail: function (res) {console.error('獲取圖片信息失敗', res);}});})},// 觸摸開始事件touchStart(e) {startX = e.touches[0].xstartY = e.touches[0].yconsole.log("觸摸開始事件", e.touches[0], startX, startY)},// 觸摸移動事件touchMove(e) {let imgSrc = this.data.imgSrclet drawWidth = this.data.drawWidthlet drawHeight = this.data.drawHeightlet ctx = this.data.ctxlet image = this.data.drawimageendX = e.touches[0].xendY = e.touches[0].yctx.clearRect(0, 0, drawWidth, drawHeight)ctx.drawImage(image, 0, 0, drawWidth, drawHeight);rectWidth = endX - startXrectHeight = endY - startYctx.strokeRect(startX, startY, rectWidth, rectHeight)ctx.strokeStyle = 'red'ctx.stroke()},// 觸摸結束事件touchEnd(e) {// 繪制完成后的操作// 可以將坐標框的位置和大小保存到全局變量或發送給服務器等console.log("觸摸結束事件",e.changedTouches[0])},//清除繪制的圖形clear(){console.log("清除繪制")let imgSrc = this.data.imgSrclet drawWidth = this.data.drawWidthlet drawHeight = this.data.drawHeightlet ctx = this.data.ctxlet image = this.data.drawimagectx.clearRect(0, 0, drawWidth, drawHeight)ctx.drawImage(image, 0, 0, drawWidth, drawHeight);startX = 0startY = 0endX = 0endY = 0rectWidth = 0rectHeight = 0},// 識別detection(e){console.log("開始識別")let ratio = this.data.ratio//獲取繪制選區的相關信息，這里要除以圖片縮放比例，才是真是圖片上的框選區if (rectWidth != 0 && rectHeight != 0){console.log('矩形','x='+startX/ratio,'y='+startY/ratio,'Width='+rectWidth/ratio,'Height='+rectHeight/ratio)}},//上一頁pre(){console.log("上一頁")}
})