[发明专利]一种基于Web端的图片矫正方法及系统

说明书

本发明公开了一种基于Web端的图片矫正方法及系统，属于原生JavaScript的图片处理领域；所述的S1基于原始图片及其可交换图像文件EXIF，对所述原始图片进行读取，形成读取图片；S2通过exif对图片进行加载读取，并读取图片旋转信息；S3基于Web端系统型号判断手否进行矫正处理；S4所述拍摄方向信息包括旋转方向及角度根据所述旋转方向及角度，对所述读取图片进行旋转矫正处理，使得还原后的图片与所述原始图片相符；S5可选择性的进行尺寸的变更，通过canvas生成绘制后的图片；通过前端处理图片的旋转问题，减少了后端的代码量和运算，减少了服务器的压力；使用原生JavaScript对图片进行压缩和矫正，效率更高，可以很好的兼容各种前端框架。

技术领域

本发明公开一种基于Web端的图片矫正方法及系统，涉及原生JavaScript的图片处理技术领域。

背景技术

Web端尤其是移动端涉及图片上传，人脸识别或校验的应用场景繁多，用户通过不同手机系统或不同拍摄角度上传图片到应用上可能会出现图片旋转的情况，出现这种情况的原因是因为图片存有旋转角度信息，而部分手机系统没有对图片进行矫正处理，因此影响了图片的展示效果，也降低了接口识别的通过率。一般的处理方法是需要后端对图片进行处理并返回存储的图片地址和识别结果，这种处理方法在数据量大的情况下会增加服务器的压力以及存储空间的占用。

故现发明一种基于Web端的图片矫正方法及系统，以解决上述问题。

发明内容

本发明针对现有技术的问题，提供一种基于Web端的图片矫正方法及系统，所采用的技术方案为：一种基于Web端的图片矫正方法，所述的方法具体步骤如下：

S1基于原始图片及其可交换图像文件EXIF，对所述原始图片进行读取，形成读取图片；

S2通过exif对图片进行加载读取，并读取图片旋转信息；

S3基于Web端系统型号判断手否进行矫正处理；

S4所述拍摄方向信息包括旋转方向及角度根据所述旋转方向及角度，对所述读取图片进行旋转矫正处理，使得还原后的图片与所述原始图片相符；

S5可选择性的进行尺寸的变更，通过canvas生成绘制后的图片。

所述S1基于原始图片及其可交换图像文件EXIF，对所述原始图片进行读取，形成读取图片的具体步骤如下：

S101前端在获取图片文件后的回调中，判断图片格式是否为合法的图片格式，在合法的基础上引入exif-js；

S102在读取原始图片的回调中，创建canvas画布对象，存储图片文件的尺寸及文件类型；

S103通过原生FileReader构造函数，调用readAsDataURL方法将图片文件对象转换成base-64编码。

所述S2通过exif对图片进行加载读取，并读取图片旋转信息的具体步骤如下：

S201调用exif-js，通过exif的getData方法加载读取图片，getData接收两个参数，将base-64编码的图片作为第一个参数传入，在第二个参数的回调函数中获取图片的exif信息并进行判断处理；

S202通过exif的getTag方法读取图片旋转信息Orientation，判断所述读取图片相对于所述原始图片是否存在交换。

所述S5可选择性的进行尺寸的变更，通过canvas生成绘制后的图片的具体步骤如下:

S501可选择性的对旋转后的图像进行镜像转换，通过context的scale方法反转镜像；