基于SVG，在网页中绘制自适应居中图片及图片检测框
背景
最近有个项目，需要在html页面绘制目标检测的结果。类似这种：
这种在客户端（用Qt、c#等编写的本地软件）上很好绘制，但是在前端比较麻烦。
解决方案
但是好在功夫不负有心人，经过查阅一番资料，成功将我在Qt上使用算法移植过来了。基本实现了效果，但是还存在一些内存释放的问题，后面再慢慢完善。
DOCTYPE html>
<html>
<body onload="initImg()">
<div style="color:green; background-color: rgb(0, 0, 0); width: 600px; height: 400px; margin-left:10px;">
<svg id ="imgView" width="600" height="400" xmlns="http://www.w3.org/2000/svg" >
<image id="myImg" href="" x="0" y="0" width="600" transform=''>image>
svg>
div>
body>
<script>
function initImg()
{
var image = new Image(); //创建一个image对象
var path = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-04-22%2F5ea002e78724a.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664357262&t=355f6b6bce479068239b441b1777f211"
image.src=path; //新创建的image添加src
var imgWidth = image.width; // 获取原始图片的宽
var imgHeight = image.height; // 获取原始图片高
// 设置图片尺寸
var img = document.getElementById("myImg")
img.setAttribute("href", path)
img.setAttribute("width", imgWidth)
img.setAttribute("heigth", imgHeight)
// 视口尺寸
var imgView = document.getElementById("imgView")
var imgViewWidth = imgView.getAttribute("width")
var imgViewHeight = imgView.getAttribute("height")
console.log(imgWidth, imgHeight, imgViewWidth, imgViewHeight)
// 计算缩放系数
var scaleRatio = 1.0
var ratioX = 1.0
var rationY = 1.0
// 目的是缩放图片至imgView的大小
ratioX = imgViewWidth / imgWidth
rationY = imgViewHeight / imgHeight
// 哪个小取哪个，因为不能超出imgView
if(ratioX < rationY)
{
scaleRatio = ratioX
}
else
{
scaleRatio = rationY
}
// 计算偏移，让图片居中显示
var offsetX = 0
var offsetY = 0
offsetX = (imgViewWidth - imgWidth * scaleRatio) / 2.0
offsetY = (imgViewHeight - imgHeight * scaleRatio) / 2.0
console.log(offsetX, offsetY)
// 使图片居中显示
var transform = "translate(" + offsetX + "," + offsetY + ")" + " " +
"scale(" + scaleRatio + "," + scaleRatio + ")"
img.setAttribute("transform", transform)
// 绘制框框
//
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute("x", imgWidth * 0.1)
rect.setAttribute("y", imgHeight * 0.1)
rect.setAttribute("width", imgWidth * 0.5)
rect.setAttribute("height", imgHeight * 0.5)
rect.setAttribute("style", "stroke:rgb(255, 0, 0); fill:transparent;")
rect.setAttribute("transform", transform)
imgView.appendChild(rect)
console.log(rect, imgView)
}
script>
html>
效果
上面代码得到的效果为：
可以适应任何尺寸的图片，以及基于图片坐标的矩形框。
存在的问题
1.绘制的框框的颜色很浅，不知道为啥。
参考资料
https://vimsky.com/examples/usage/svg-scale-attribute.html
http://www.verydoc.net/svg/00007594.html
// transform
https://www.w3cplus.com/svg/transforms-on-svg-elements.html
https://blog.csdn.net/qq_39492374/article/details/89356931
// 绘制矩形
http://t.zoukankan.com/tangyifeng-p-5208186.html
http://t.zoukankan.com/yangpeixian-p-11359676.html
preserveAspectRatio
https://blog.csdn.net/weixin_43002479/article/details/103363480
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio
// 图像原始大小
https://blog.csdn.net/qq_30449567/article/details/80548489
svg path
https://blog.csdn.net/weixin_39868379/article/details/114403129
// 动态创建svg子元素
https://www.cnblogs.com/robin1009/p/6068378.html