纯css车牌倾斜矫正的方法 css图像透视变换

简介: 纯css车牌倾斜矫正的方法 css图像透视变换

主要使用css里面transform的rotate和skew,一个是旋转,一个形变。我们先来看看概念:

rotate()


CSS 的 rotate() 函数定义了一种将元素围绕一个定点(由transform-origin属性指定)旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正,则顺时针方向旋转,否则逆时针方向旋转。旋转 180° 也被称为点反射。

语法<angle> 指定了 rotate() 的旋转程度。参数为正时,顺时针旋转;参数为负时,逆时针旋转。180° 旋转称为点反演

skew()


skew() 函数定义了一个元素在二维平面上的倾斜转换。

这种转换是一种剪切映射 (横切),它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离,进行成比例的值调整;因此,一个点离原点越远,其增加的值就越大。

语法skew() 函数指定一个或两个参数,它们表示在每个方向上应用的倾斜量。

接下来我们开始


为了测试在百度里找了个典型的倾斜的图,如下:

image.png

第1步:测量水平偏移角度


经过测量大概是13度。

image.png

我们使用代码transform:rotate(-13deg)得到如下结果:

image.png

第2步:继续在上面的结果上测量形变度数:


经过测量大概是16度。

image.png

再进一步加上transform:skew(-16deg)就得到了:

image.png

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSStransform的应用-校正车牌</title>
<style>
  .img{transform:rotate(-13deg) skew(-16deg);}
</style>
</head>
<body>
    <img src="https://ucc.alicdn.com/images/user-upload-01/20200517195232687.jpg" alt="">
    <img class="img" src="https://ucc.alicdn.com/images/user-upload-01/20200517195232687.jpg">
</body>
</body>
</html>

ps:有些网友问如何自动得到13°和16°这两个数值,目前我还没有办法,我想这个只能通过人工智能识别图片中车牌位置,然后自动计算水平和垂直偏移度数来实现了,以上的方法只是抛砖引玉。

拓展:如果对于下面这样一点透视的图片,以上方法并没有效果,不知道用css如何实现,如果有知道的大神可以留言告知一下。

image.png

要是css能有像ps那种4点定位的方式的方式就好了,那样就方便多了,只要通过智能识别到车牌的4个顶点即可一步到位矫正了。希望w3c组织下次制定标准时能为css加上这个特性。

c1000a3feb754a1cbc5ef6d4134e6e8d_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg

f6ccda22584145fbb60f9116b60b44d9_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.jpg


目录
相关文章
|
21天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
25天前
|
前端开发
css页面顶部底部固定,中间自适应几种方法
【10月更文挑战第22天】css页面顶部底部固定,中间自适应几种方法
|
1月前
|
前端开发 容器
CSS 中几种常用的换行方法
CSS 中几种常用的换行方法
27 1
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
16 2
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
21 3
|
1月前
|
前端开发 UED
css性能优化的方法
css性能优化的方法
24 0
|
1月前
|
前端开发
CSS绘制三角形的方法
CSS绘制三角形的方法
|
2月前
|
前端开发 JavaScript
jQuery css() 方法
jQuery css() 方法
14 1
|
3月前
|
前端开发 容器
css溢出隐藏的五种方法
css溢出隐藏的五种方法
39 1
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
30 0

热门文章

最新文章

下一篇
无影云桌面