微信小程序画布显示图片绘制矩形选区

在这里插入图片描述

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("上一页")}
})