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

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

rotate()

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

skew()

skew() 函数定义了一个元素在二维平面上的倾斜转换。
这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
语法：skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

接下来我们开始

为了测试在百度里找了个典型的倾斜的图，如下：
在这里插入图片描述

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

经过测量大概是13度。在这里插入图片描述
我们使用代码transform:rotate(-13deg)得到如下结果:

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

经过测量大概是16度。
在这里插入图片描述

再进一步加上transform:skew(-16deg)就得到了：
在这里插入图片描述

完整代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <title>CSStransform的应用-校正车牌title>
<style>
  .img{transform:rotate(-13deg) skew(-16deg);}
style>
head>
<body>
    <img src="https://img-blog.csdnimg.cn/20200517195232687.jpg" alt="">
    <img class="img" src="https://img-blog.csdnimg.cn/20200517195232687.jpg">
body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

拓展：如果对于下面这样一点透视的图片，以上方法并没有效果，不知道用css如何实现，如果有知道的大神可以留言告知一下。
在这里插入图片描述
要是css能有像ps那种4点定位的方式的方式就好了，那样就方便多了，只要通过智能识别到车牌的4个顶点即可一步到位矫正了。希望w3c组织下次制定标准时能为css加上这个特性。

在这里插入图片描述

相关阅读:
【网络安全的神秘世界】文件上传、JBOSS、Struct漏洞复现
零拷贝技术可以加入到计算机组成原理的授课中
vuepress借助jenkins和svn实现文档自动化更新部署
一款翻译机背后的全球经济浪潮
[附源码]java毕业设计学习资源共享与在线学习系统
SQL Summary(学习笔记)
口碑最好的运动蓝牙耳机推荐，2022年最值得入手的六款运动耳机
大模型赛道如何实现华丽的弯道超车【赠书活动｜第十期《分布式统一大数据虚拟文件系统 Alluxio原理、技术与实践》】
LeetCode //C - 82. Remove Duplicates from Sorted List II
【深度学习 | Transformer】释放注意力的力量:探索深度学习中的变形金刚，一文带你读通各个模块 —— Positional Encoding（一）

原文地址：https://blog.csdn.net/sysdzw/article/details/126801639