基于SVG，在网页中绘制自适应居中图片及图片检测框

韭菜钟

已于 2022-08-29 18:01:17 修改

阅读量701

点赞数

分类专栏： Qt相关网站相关文章标签：前端

于 2022-08-29 17:42:18 首次发布

本文链接：https://blog.csdn.net/joyopirate/article/details/126589331

版权

Qt相关同时被 2 个专栏收录

109 篇文章 21 订阅

订阅专栏

网站相关

3 篇文章 0 订阅

订阅专栏

背景

最近有个项目，需要在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" > 
            <!-- transform='rotate(45)  scale(1.5, 0.5)' -->

            <image id="myImg" href="" x="0" y="0" width="600" transform=''></image>
            <!-- <rect width="100" height="200" style="stroke:3px; stroke:rgb(0, 255, 106); fill: transparent;"></rect>  -->
            <!-- <path d="M 100 100 L 300 100 L 200 300 z" fill="transparent" stroke="blue" stroke-width="3" /> -->
        </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)

    // 绘制框框
    
    // <!-- <rect width="100" height="200" style="stroke:3px; stroke:rgb(0, 255, 106); fill: transparent;"></rect>  -->
    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