一种H5图片自动压缩方法及终端与流程

一种h5图片自动压缩方法及终端
技术领域
1.本发明涉及网页显示领域，尤其涉及一种h5图片自动压缩方法及终端。


背景技术：

2.针对海量图片存储与下载显示，既需要实现在容量一定的存储上存储更多的图片文件，又需要实现展示给用户时获得较高的图片质量，并且针对不同场景使用一定质量的图片；通常采用压缩原图片的方式以能够在一定的存储容量中容纳下更多的图片，即对图片原图进行压缩处理目的是减少图片文件的大小，在带宽相同的情况下，图片文件越小在客户端显示时网络下载时间越短。
3.现有技术通常在专门的图片处理服务器上对上传的图片进行压缩处理，从而针对使用场景生成不同质量尺寸的图片，再上传至文件服务器进行存储，根据不同场景直接获取不同尺寸的图片使用；这种方案的缺点是在写场景较大时，对图片处理服务器要求较高，需要处理大量图片时，图片处理服务器计算资源有限，会成为瓶颈；现有技术中的另一种方案是将图片原图直接存储到文件服务器，根据用户的具体使用场景，请求图片处理服务器通过图片原图实时压缩处理获得相应质量的图片，此方案在读场景较大时，对图片处理服务器要求较高，即使增加cdn(content delivery network，内容分发网络)缓存，当首次生成图片时，也会有大量请求回源到图片处理服务器，挤占图片处理服务器的资源。


技术实现要素：

4.本发明所要解决的技术问题是：提供一种h5图片自动压缩方法及终端实现在本地对图片进行处理，解决图片处理服务器占用资源较高的问题。
5.为了解决上述技术问题，本发明采用的一种技术方案为：一种h5图片自动压缩方法，包括步骤：
6.s1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
7.s2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
8.s3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
9.s4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
10.为了解决上述技术问题，本发明采用的另一种技术方案为：
11.一种h5图片自动压缩终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
12.s1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
13.s2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
14.s3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
15.s4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
16.本发明的有益效果在于：创建第一预设尺寸的画布元素，将原始图片放入画布元素后再进行后续处理，读取预设的目标图片尺寸信息，根据目标图片尺寸信息和原始图片尺寸信息的对应关系确定压缩比率对画布元素进行压缩，得到压缩图片上传到服务端，将对图片的处理过程下放到客户端中进行处理，解放了服务端的计算资源，同时能够利用画布元素使对原始图片的处理过程更加便捷；并且在客户端中对图片进行处理，图片处理过程中会有相应的缓存，在后期需要使用相应图片时，若本地有缓存则无需向服务端获取，进一步减轻了服务端的压力。
附图说明
17.图1为本发明实施例的一种h5图片自动压缩方法的步骤流程图；
18.图2为本发明实施例的一种h5图片自动压缩终端的结构示意图；
19.图3为本发明实施例的一种h5图片自动压缩方法的细节流程图；
20.标号说明：
21.1、一种h5图片自动压缩终端；2、处理器；3、存储器。
具体实施方式
22.为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
23.请参照图1，一种h5图片自动压缩方法，包括步骤：
24.s1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
25.s2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
26.s3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
27.s4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
28.从上述描述可知，本发明的有益效果在于：创建第一预设尺寸的画布元素，将原始图片放入画布元素后再进行后续处理，读取预设的目标图片尺寸信息，根据目标图片尺寸信息和原始图片尺寸信息的对应关系确定压缩比率对画布元素进行压缩，得到压缩图片上传到服务端，将对图片的处理过程下放到客户端中进行处理，解放了服务端的计算资源，同时能够利用画布元素使对原始图片的处理过程更加便捷；并且在客户端中对图片进行处理，图片处理过程中会有相应的缓存，在后期需要使用相应图片时，若本地有缓存则无需向
服务端获取，进一步减轻了服务端的压力。
29.进一步的，所述原始图片信息还包括原始图片方向信息，所述原始图片尺寸信息包括原始图片长度信息及原始图片宽度信息；
30.所述s2中根据所述原始图片信息及所述第一预设尺寸调整所述原始图片具体为：
31.根据所述原始图片方向信息调整所述原始图片的方向并根据所述原始图片长度信息、所述原始图片宽度信息及第一预设尺寸调整所述原始图片的长度及宽度，以使得所述原始图片调整后的尺寸与所述第一预设尺寸相适应。
32.由上述描述可知，根据原始图片信息与第一预设尺寸调整原始图片，使得原始图片与画布元素之间相适应，读取原始图片的方向信息进行调整，使图片能够适应屏幕的方向，保证在图片显示时用户能够看到角度正确的图片，与画布元素的适应调整方便了后续利用画布元素的属性和方法直接对原始图片进行相应操作。
33.进一步的，所述s3中预设的目标图片尺寸信息包括最大图片空间占用信息；所述原始图片尺寸信息包括原始图片空间占用信息；
34.所述s3具体为：
35.读取最大图片空间占用信息，判断所述原始图片空间占用信息是否大于所述最大图片空间占用信息，若是，则获取所述原始图片空间占用信息与所述最大图片空间占用信息的比值，根据所述比值，生成对应的压缩比率，所述比值越大，所述压缩比率越低；
36.否则，压缩比率为1。
37.由上述描述可知，最大图片空间占用信息可设定，根据设定的组大图片空间占用信息与原始图片空间占用信息之间的关系确定对应的压缩比率，若原始图片空间占用信息小于最大图片空间占用信息，则不进行压缩，不是对每一张图片都进行压缩，一定上节约了客户端的资源，根据最大图片空间占用信息与最大图片空间占用信息之间的比值，确定对应的压缩比率，压缩的操作更加灵活。
38.进一步的，所述s3中具体为：
39.读取预设的多个目标图片尺寸信息，根据每一个所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成每一个所述目标图片尺寸信息所对应的压缩比率；
40.所述s4具体为：
41.将多个所述压缩比率分别作为参数，执行画布元素的压缩方法todataurl，得到多个与所述目标图片尺寸信息对应的压缩图片；
42.为多个所述压缩图片分别确定对应的质量档次标签；
43.将多个所述压缩图片与所述压缩图片对应的所述质量档次标签上传到服务端。
44.由上述描述可知，确定多个目标图片尺寸信息，为多个目标图片尺寸信息分别生成对应的压缩图片，并对不同目标图片尺寸信息对应的不同的压缩图片确定质量档次标签，将压缩图片和其对应的质量标签档次上传到服务端，能够方便地根据质量标签档次获取所需的压缩图片。
45.进一步的，所述s4之后还包括：
46.获取场景信息，根据所述场景信息确定质量档次标签；
47.根据所述质量档次标签，获取对应的压缩图片并显示。
48.由上述描述可知，在实际需要获取图片时，根据场景信息确定对应的质量档次标
签，根据质量档次标签获取对应的压缩图片进行显示，能够在不同的场景中适应性使用不同清晰度的图片，如在用户只需要预览图片时，自动加载压缩比率较大的图片，用户需要观看单张图片时，自动加载压缩比率较小的图片或加载原图，预览时加载的速度快，用户等待时间短。
49.请参照图2，一种h5图片自动压缩终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
50.s1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
51.s2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
52.s3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
53.s4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
54.本发明的有益效果在于：创建第一预设尺寸的画布元素，将原始图片放入画布元素后再进行后续处理，读取预设的目标图片尺寸信息，根据目标图片尺寸信息和原始图片尺寸信息的对应关系确定压缩比率对画布元素进行压缩，得到压缩图片上传到服务端，将对图片的处理过程下放到客户端中进行处理，解放了服务端的计算资源，同时能够利用画布元素使对原始图片的处理过程更加便捷；并且在客户端中对图片进行处理，图片处理过程中会有相应的缓存，在后期需要使用相应图片时，若本地有缓存则无需向服务端获取，进一步减轻了服务端的压力。
55.进一步的，所述原始图片信息还包括原始图片方向信息，所述原始图片尺寸信息包括原始图片长度信息及原始图片宽度信息；
56.所述s2中根据所述原始图片信息及所述第一预设尺寸调整所述原始图片具体为：
57.根据所述原始图片方向信息调整所述原始图片的方向并根据所述原始图片长度信息、所述原始图片宽度信息及第一预设尺寸调整所述原始图片的长度及宽度，以使得所述原始图片调整后的尺寸与所述第一预设尺寸相适应。
58.由上述描述可知，根据原始图片信息与第一预设尺寸调整原始图片，使得原始图片与画布元素之间相适应，读取原始图片的方向信息进行调整，使图片能够适应屏幕的方向，保证在图片显示时用户能够看到角度正确的图片，与画布元素的适应调整方便了后续利用画布元素的属性和方法直接对原始图片进行相应操作。
59.进一步的，所述s3中预设的目标图片尺寸信息包括最大图片空间占用信息；所述原始图片尺寸信息包括原始图片空间占用信息；
60.所述s3具体为：
61.读取最大图片空间占用信息，判断所述原始图片空间占用信息是否大于所述最大图片空间占用信息，若是，则获取所述原始图片空间占用信息与所述最大图片空间占用信息的比值，根据所述比值，生成对应的压缩比率，所述比值越大，所述压缩比率越低；
62.否则，压缩比率为1。
63.由上述描述可知，最大图片空间占用信息可设定，根据设定的组大图片空间占用
信息与原始图片空间占用信息之间的关系确定对应的压缩比率，若原始图片空间占用信息小于最大图片空间占用信息，则不进行压缩，不是对每一张图片都进行压缩，一定上节约了客户端的资源，根据最大图片空间占用信息与最大图片空间占用信息之间的比值，确定对应的压缩比率，压缩的操作更加灵活。
64.进一步的，所述s3中具体为
65.读取预设的多个目标图片尺寸信息，根据每一个所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成每一个所述目标图片尺寸信息所对应的压缩比率；
66.所述s4具体为：
67.将多个所述压缩比率分别作为参数，执行画布元素的压缩方法todataurl，得到多个与所述目标图片尺寸信息对应的压缩图片；
68.为多个所述压缩图片分别确定对应的质量档次标签；
69.将多个所述压缩图片与所述压缩图片对应的所述质量档次标签上传到服务端。
70.由上述描述可知，确定多个目标图片尺寸信息，为多个目标图片尺寸信息分别生成对应的压缩图片，并对不同目标图片尺寸信息对应的不同的压缩图片确定质量档次标签，将压缩图片和其对应的质量标签档次上传到服务端，能够方便地根据质量标签档次获取所需的压缩图片。
71.进一步的，所述s4之后还包括：
72.获取场景信息，根据所述场景信息确定质量档次标签；
73.根据所述质量档次标签，获取对应的压缩图片并显示。
74.由上述描述可知，在实际需要获取图片时，根据场景信息确定对应的质量档次标签，根据质量档次标签获取对应的压缩图片进行显示，能够在不同的场景中适应性使用不同清晰度的图片，如在用户只需要预览图片时，自动加载压缩比率较大的图片，用户需要观看单张图片时，自动加载压缩比率较小的图片或加载原图，预览时加载的速度快，用户等待时间短。
75.请参照图1，本发明的实施例一为：
76.一种h5图片自动压缩方法，具体包括：
77.s1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片名称(filename)原始图片尺寸信息、原始图片方向信息(orientation)；
78.原始图片尺寸信息包括原始图片空间占用信息(filesize)、原始图片长度信息(length)及原始图片宽度信息(width)；
79.在一种可选的实施方式中，用户通过客户端选择本地图片作为原始图片；
80.s2、创建第一预设尺寸的画布元素(canvas)，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
81.其中，根据所述原始图片信息及所述第一预设尺寸调整所述原始图片具体为：
82.根据所述原始图片方向信息调整所述原始图片的方向并根据所述原始图片长度信息、所述原始图片宽度信息及第一预设尺寸调整所述原始图片的长度及宽度，以使得所述原始图片调整后的尺寸与所述第一预设尺寸相适应；
83.在一种可选的实施方式中，第一预设尺寸为长度(maxlength)1600
×
宽度(maxwidth)900，即为16：9的图片格式；此预设尺寸便于后期进行压缩，并且能够适应大多
数应用场景，若已确定原始图片需要在超大屏场景应用，如商场的大屏显示，可直接上传原始图片；自动获取原始图片的方向，在画布元素中进行旋转缩放后产生16:9比例的新图片；
84.s3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
85.预设的目标图片尺寸信息包括最大图片空间占用信息及最小图片尺寸信息；
86.具体为：
87.读取最大图片空间占用信息，判断所述原始图片空间占用信息是否大于所述最大图片空间占用信息，若是，则获取所述原始图片空间占用信息与所述最大图片空间占用信息的比值，根据所述比值，生成对应的第一压缩比率；
88.否则，第一压缩比率为1；
89.读取最小图片尺寸信息，确定最小图片尺寸信息所对应的第二压缩比率；
90.在一种可选的实施方式中，设置最小图片尺寸信息为长度minlength300
×
minwidth300，对应的第二压缩比率为0.4，若需要加快图片的加载速度，可进一步调小最小图片尺寸信息，如100
×
100；
91.在一种可选的实施方式中，设置最大图片空间占用信息(maxsize)为500kb，获取原始图片空间占用信息(filesize)，若filesize》maxsize，则获取filesize与maxsize的比值(sizerate)，生成对应的压缩比率(compressrate)；具体的，若sizerate》4，则compressrate＝0.5；若3《sizerate《＝4，则compressrate＝0.6；若2《sizerate《＝3，则compressrate＝0.7；若1《sizerate《＝2，则compressrate＝0.8；若0《sizerate《＝1，则compressrate＝0.9；根据最大图片空间占用信息与原始图片空间占用信息之间的比值确定对应的压缩比率，能够针对不同的原始图片进行适应性的压缩比率调整，在压缩原始图片的同时，保证压缩后图片的质量；
92.在一种可选的实施方式中，可直接根据具体场景信息设置对应的压缩比率；
93.s4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端；
94.具体的，通过画布元素自带的压缩方法todataurl，将第一压缩比率作为参数进行压缩，将原始图片转换为base64格式的第一压缩图片，将第一压缩图片上传到服务端；
95.通过画布元素自带的压缩方法todataurl，将第二压缩比率作为参数进行压缩，将原始图片转换缩略图，将缩略图上传到服务端。
96.请参照图3，本发明的实施例二为：
97.一种h5图片自动压缩方法，其与实施例一的不同之处在于，s3具体为：
98.读取预设的多个目标图片尺寸信息，根据每一个所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成每一个所述目标图片尺寸信息所对应的压缩比率；
99.多个目标图片尺寸信息至少包括最大图片空间占用信息及最小图片尺寸信息；
100.所述s4具体为：
101.将多个所述压缩比率分别作为参数，执行画布元素的压缩方法todataurl，得到多个与所述目标图片尺寸信息对应的压缩图片；
102.为多个所述压缩图片分别确定对应的质量档次标签；
103.具体的，第一压缩比率生成的第一压缩图片为高质量，第二压缩比率生成的缩略
图为低质量；
104.将多个所述压缩图片、所述压缩图片对应的所述质量档次标签及各个压缩图片与原始图片的对应关系上传到服务端；
105.多个压缩比率至少包括上述第一压缩比率及第二压缩比率，即至少上传第一压缩比率对应的第一压缩图片和第二压缩比率对应的缩略图至服务端；
106.在一种可选的实施方式中，服务端为s3(simple storage service，简单存储服务)文件服务器，具体的，可采用amazon(s3)、cepth或minio；
107.在一种可选的实施方式中个，将一原始图片test.jpg(原始图片空间占用信息8.32mb，原始图片长度信息3024像素，原始图片宽度信息4032像素)经过处理，在服务端中存储如表1：
108.表1
109.质量档次文件名大小(kb)高质量5eec8c27584a5100017bccb7.jpg239.42缩略图5eec8c27584a5100017bccb7.thumb.jpg19.79其他质量200*2005eec8c27584a5100017bccb7.200x200.jpg 110.上传服务端时，在本地缓存中预先存储压缩图片与其对应的质量档次及其各个压缩图片与原始图片的对应关系；
111.所述s4之后还包括：
112.获取场景信息，根据所述场景信息确定质量档次标签；
113.如场景信息为图文显示列表，则对应质量档次标签为缩略图；场景信息为详情页，对应质量档次标签为高质量；
114.根据所述质量档次标签，获取对应的压缩图片并显示；
115.具体的，h5客户端可在pc、ipad、手机等移动终端的浏览器中读取设备屏幕信息并下载适配尺寸的图片，优先从本地缓存中查找质量档次标签对应的压缩图片，若本地缓存中不存在，则从cdn服务器中获取，若cdn服务器中也不存在，再从s3服务器中获取。
116.请参照图2，本发明的实施例三为：
117.一种h5图片自动压缩终端1，包括处理器2、存储器3及存储在存储器3上并可在所述处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现实施例一或实施例二中的各个步骤；
118.在一种可选的实施方式中，一种h5图片自动压缩终端1为h5客户端。
119.综上所述，本发明提供了一种h5图片自动压缩方法及终端，通过本地的画布元素实现对原始图片的压缩，设置预设尺寸的画布元素，完成对尺寸不同的原始图片的初步统一，方便对原始图片进行后续处理，预设目标图片尺寸信息，并根据目标图片尺寸信息与原始图片尺寸信息的对应关系生成对应的压缩比率，根据压缩比率对画布元素进行压缩得到压缩图片上传到服务器，实现在客户端完成图片的压缩处理步骤，解放了服务端的计算资源，并且在客户端完成图片压缩的过程中，会产生相应的缓存，若后续需要使用相应图片，能够直接从缓存中调用，加快了图片的加载速度；并且，目标图片尺寸信息至少包括最大图片空间占用信息及最小图片尺寸信息，根据最大图片空间占用信息及原始图片空间占用信息确定第一压缩比率，根据最小图片尺寸信息确定第二压缩比率，分别根据第一压缩比率、
第二压缩比率对画布元素进行压缩，得到第一压缩图片和缩略图，即对于一张原始图片，至少生成两张其对应的压缩图片上传到服务端，还可根据具体场景的需要设置更多的目标图片尺寸信息，覆盖更广的应用场景。
120.以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。