极客观点
项目管理
HarmonyOS
以下完整代码，我现在写死的一个json，里面boundingBox对应的是四个角坐标，怎么把那四个坐标解析出来，并赋值给下面canvas绘制矩形的四个点，这样后台给不同的json坐标，画不同的矩形。canvas要封装成函数吗?我看网上封装的canvas矩形都是填充宽高的，不是坐标，该怎么写呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/upload.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="title">
<p>身份证识别</p>
</div>
<div class="txt">
<span>适用于身份证、票据和证件识别等多应用场景……</span>
</div>
<div class="content">
<div id="left">
<div class="img-box">
<canvas id="cvs"></canvas>
</div>
<a href="" id="jump">
本地上传
<input type="file" id="chooseImage" name="file" accept="image/*">
</a>
</div>
<div class="right">
<div class="tabs">
<div>
<input type="radio" id="r-1" name="tab" checked>
<label for="r-1" class="label-1">文本内容</label>
<div class="mod-1">
<table border="0" cellspacing="0">
<thead>
<tr>
<th rowspan="2" class="result-num">序号</th>
<th rowspan="2" class="result-content">识别文字结果</th>
<th colspan="4">
位置信息
</th>
</tr>
<tr>
<th>左上角</th>
<th>右上角</th>
<th>右下角</th>
<th>左上角</th>
</tr>
</thead>
<tbody>
<!-- 识别结果 -->
</tbody>
</table>
</div>
</div>
<div>
<input type="radio" id="r-2" name="tab">
<label for="r-2" class="label-2">JSON</label>
<div class="mod-2">
<pre class="result"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src="js/canvas.js"></script> -->
<script src="js/jquery.min.js"></script>
<script>
$(function(){
$('#chooseImage').on('change',function(){
var file =this.files[0];
var image = new Image();
image.src = URL.createObjectURL(file);
image.onload = function(){
var canvas = document.querySelector("#cvs");
var ctx = canvas.getContext("2d");
canvas.width = image.width; // 设置canvas的画布宽度为图片宽度
canvas.height = image.height;
ctx.drawImage(image, 0, 0,image.width,image.height) // 在canvas上绘制图片
// let dataUrl = canvas.toDataURL(image,0.92) // 0.92为压缩比，可根据需要设置，设置过小会影响图片质量
ctx.strokeStyle="red";
var json={
"orientation": "UP",
"errorCode": "0",
"lines": [
{
"boundingBox": "48,58,188,59,187,88,48,87",
"words": "姓名网小易"
},
{
"boundingBox": "47,106,264,106,263,134,46,134",
"words": "性别男民族汉"
},
{
"boundingBox": "46,152,328,151,327,177,45,178",
"words": "出199706月01日"
},
{
"boundingBox": "44,195,371,195,371,224,43,224",
"words": "住址北京市海淀区西北旺东路10"
},
{
"boundingBox": "109,224,364,224,363,253,109,253",
"words": "号院中关村软件园西区7号"
},
{
"boundingBox": "47,315,535,316,534,343,46,342",
"words": "公民身份证号码 110101199706010022"
}
]
}
var obj=eval(json);
for(var i = 0; i < obj.lines.length; i++){
console.log(obj.lines[i].boundingBox);
}
ctx.moveTo(48,58);
ctx.lineTo(188,59);
ctx.lineTo(187,88);
ctx.lineTo(48,87);
ctx.closePath();
ctx.stroke();
}
})
})
</script>
</body>
</html>
html5
