canvas初体验-图片上画方框

开发环境：ionic + typeScript

需求：手机拍车牌号照片传至后端，后端返回对应车辆信息以及车牌号在图片位置，前端用方框框出来。

先看一下后端返回格式：

[{rect: [11, 22, 33, 44], // x1, y1, x2, y2p: 0.876543, // 车牌准确率license: '鲁A12345' // 识别内容
}]

html部分

<div class="canvasStyle"><canvas id="myCanvas" height="300" height="300"></canvas>
</div>

css部分

.canvasStyle {text-align: center;#myCanvas {width: 100%;}
}

ts部分

/**
* @params
* array 后端返回数据
* base64Img 图片代码
*/
success (array, base64Img) {if (!array.length) {this.util.toast('未识别到车牌', 'warning')return}// 绘制出图片与方框let canvas = document.getElementById('myCanvas') as HTMLCanvasElement// 设置canvas宽高canvas.width = document.body.clientWidthcanvas.height = document.body.clientHeightlet ctx: CanvasRenderingContext2D = canvas.getContext('2d'),img = new Image(),imgW = 0,imgH = 0,rectArray = []img.src = base64Imgimg.onload = function() {imgW = img.widthimgH = img.height// 图片超过屏幕宽度则满屏 否则自适应if ((imgH * canvas.width / imgW) > canvas.height) {ctx.drawImage(img, 0, 0, canvas.width, canvas.height)} else {ctx.drawImage(img, 0, 0, canvas.width, imgH * canvas.width / imgW)}// 有识别结果 画框if (array.length) {// 计算展示图与原图缩小比例let per = parseFloat((canvas.offsetWidth / imgW).toFixed(2))array.forEach((element, index) => {ctx.strokeStyle = '#ff0000' // 框颜色ctx.lineWidth = 2 // 框宽度let [x1, y1, x2, y2] = element.rect// 开始画框ctx.strokeRect(x1 * per, y1 * per, (x2 - x1) * per, (y2 - y1) * per)// 记录下几个框的信息 点击时要用rectArray.push({ x: x1 * per, y: y1 * per, width: (x2 - x1) * per, height: (y2 - y1) * per, plateNum: element.license })})// 画布点击事件canvas.addEventListener('click', function(e) {let p = getEventPosition(e)draw(p)}, false)}let _this = thisfunction getEventPosition(ev) {if (ev.layerX || ev.layerX === 0) {return { x: ev.layerX, y: ev.layerY }} else if (ev.offsetX || ev.offsetX === 0) { // Operareturn { x: ev.offsetX, y: ev.offsetY }}}function draw(p) {rectArray.forEach(function(v) {ctx.beginPath()ctx.rect(v.x, v.y, v.width, v.height)// 点击不同车牌重新获取数据if(p && ctx.isPointInPath(p.x, p.y)) {_this.openMode(v.plateNum)}})}}, 500)
}

第一次尝试canvas，代码潦草，多多包涵。

— END —

canvas初体验-图片上画方框相关推荐

微信小程序富文本编辑器editor初体验-图片上传
https://developers.weixin.qq.com/miniprogram/dev/component/editor.html 以前没有小程序富文本编辑器,只能输入文字,图片上传后,在服 ...
html5在图片中加链接,JavaScript、html5、canvas实现图片上画超链接
本文主要为大家详细介绍了JavaScript html5 canvas实现图片上画超链接,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1. html 2. javascrip ...
html中矩形坐标,js怎么根据坐标在图片上画出矩形框？
如图本地上传的图片,并点击获取到这个图片里每个地方的坐标,根据4个角坐标在图片上画出矩形框,该怎么画?大神支招. 我图片是显示在div里的,是不是应该用canvas显示图片? 代码: Document ...
网页在图片上画长方形和直线，并且能控制和编辑
网页在图片上画长方形和直线,并且能控制和编辑网页在图片上画长方形和直线,并且能控制和编辑网页在图片上画长方形和直线,并且能控制和编辑工作上用到了在一张图片上画正方形和直线.并且可以控制和编辑 ...
C#图片处理之:在图片上画直线
在图片上画直线比画框更简单.线形的控制还是通过对Pen的设置来实现的. /**//// <summary> /// 在图片上画线 /// & ...
python中怎样在图片上画线段_python 实现PIL模块在图片画线写字
图片上画线条 import sys from PIL import Image,ImageDraw im = Image.open("th.png") draw = ImageDr ...
python怎么在散点图上画圆圈_Python如何在图片上画一个实心圆
有时候我们需要对图片进行标记操作,即在原图的基础上进行画出一些图案,这里给出画一个实心圆的相关方法,基于Python. 工具/原料 win10系统64位 winPython集成软件方法/步骤 1 集 ...
Python 在图片上画点、圆和矩形实例
1.在图片上画点.圆 import cv2 img = cv2.imread(img_path) # 读取图片cv2.circle(img,(100,100),20,(0,0,255),-1) # c ...
用python的opencv库在图片上画出蓝底黑字的文本框
以下是使用Python的OpenCV库实现在图片上绘制的示例代码: import cv2# 读入图片 img = cv2.imread('example.jpg')# 在图片上绘制红色矩形框 cv2. ...

canvas初体验-图片上画方框

canvas初体验-图片上画方框相关推荐

最新文章

热门文章