一种H5图片自动压缩方法及终端技术

本发明专利技术提供了一种H5图片自动压缩方法及终端，获取原始图片并读取原始图片信息，原始图片信息包括原始图片尺寸信息；创建第一预设尺寸的画布元素，将原始图片放入所述画布元素，并根据原始图片信息及第一预设尺寸调整所述原始图片；读取预设的目标图片尺寸信息，根据目标图片尺寸信息与原始图片尺寸信息的对应关系，生成对应的压缩比率；根据所述压缩比率，对画布元素进行压缩，得到压缩图片，将压缩图片上传到服务端；本发明专利技术在服务端下游的终端上完成对原始图片的压缩上传到服务端，分担了图片处理服务器的压力，解决了图片处理服务器在较大读场景或写场景下图片处理效率低下的问题。问题。问题。

【技术实现步骤摘要】
一种H5图片自动压缩方法及终端


[0001]本专利技术涉及网页显示领域，尤其涉及一种H5图片自动压缩方法及终端。

技术介绍

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

技术实现思路

[0004]本专利技术所要解决的技术问题是：提供一种H5图片自动压缩方法及终端实现在本地对图片进行处理，解决图片处理服务器占用资源较高的问题。
[0005]为了解决上述技术问题，本专利技术采用的一种技术方案为：一种H5图片自动压缩方法，包括步骤：
[0006]S1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
[0007]S2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
[0008]S3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
[0009]S4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
[0010]为了解决上述技术问题，本专利技术采用的另一种技术方案为：
[0011]一种H5图片自动压缩终端，包括存储器、处理器及存储在存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0012]S1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
[0013]S2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
[0014]S3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
[0015]S4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
[0016]本专利技术的有益效果在于：创建第一预设尺寸的画布元素，将原始图片放入画布元素后再进行后续处理，读取预设的目标图片尺寸信息，根据目标图片尺寸信息和原始图片尺寸信息的对应关系确定压缩比率对画布元素进行压缩，得到压缩图片上传到服务端，将对图片的处理过程下放到客户端中进行处理，解放了服务端的计算资源，同时能够利用画布元素使对原始图片的处理过程更加便捷；并且在客户端中对图片进行处理，图片处理过程中会有相应的缓存，在后期需要使用相应图片时，若本地有缓存则无需向服务端获取，进一步减轻了服务端的压力。
附图说明
[0017]图1为本专利技术实施例的一种H5图片自动压缩方法的步骤流程图；
[0018]图2为本专利技术实施例的一种H5图片自动压缩终端的结构示意图；
[0019]图3为本专利技术实施例的一种H5图片自动压缩方法的细节流程图；
[0020]标号说明：
[0021]1、一种H5图片自动压缩终端；2、处理器；3、存储器。
具体实施方式
[0022]为详细说明本专利技术的
技术实现思路
、所实现目的及效果，以下结合实施方式并配合附图予以说明。
[0023]请参照图1，一种H5图片自动压缩方法，包括步骤：
[0024]S1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；
[0025]S2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；
[0026]S3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；
[0027]S4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。
[0028]从上述描述可知，本专利技术的有益效果在于：创建第一预设尺寸的画布元素，将原始图片放入画布元素后再进行后续处理，读取预设的目标图片尺寸信息，根据目标图片尺寸信息和原始图片尺寸信息的对应关系确定压缩比率对画布元素进行压缩，得到压缩图片上传到服务端，将对图片的处理过程下放到客户端中进行处理，解放了服务端的计算资源，同时能够利用画布元素使对原始图片的处理过程更加便捷；并且在客户端中对图片进行处理，图片处理过程中会有相应的缓存，在后期需要使用相应图片时，若本地有缓存则无需向
服务端获取，进一步减轻了服务端的压力。
[0029]进一步的，所述原始图片信息还包括原始图片方向信息，所述原始图片尺寸信息包括原始图片长度信息及原始图片宽度信息；
[0030]所述S2中根据所述原始图片信息及所述第一预设尺寸调整所述原始图片具体为：
[0031]根据所述原始图片方向信息调整所述原始图片的方向并根据所述原始图片长度信息、所述原始图片宽度信息及第一预设尺寸调整所述原始图片的长度及宽度，以使得所述原始图片调整后的尺寸与所述第一预设尺寸相适应。
[0032]由上述描述可知，根据原始图片信息与第一预设尺寸调整原始图片，使得原始图片与画布元素之间相适应，读取原始图片的方向信息进行调整，使图片能够适应屏幕的方向，保证在图片显示时用户能够看到角度正确的图片，与画布元素的适应调整方便了后续利用画布元素的属性和方法直接对原始图片进行相应操作。
[0033]进一步的，所述S3中预设的目标图片尺寸信息包括最大图片空间占用信息；所述原始图片尺寸信息包括原始图片空间占用信息；
[0034]所述S3具体为：
[0035]读取最大图片空间占用信息，判断所述原始图片空间占用信息是否大于所述最大图片空间占用信息，若是，则获取所述原始图片空间占用信息与所述最大图片空间占用信息的比值，根据所述比值，生成对应的压缩比率，所述比值越大，所述压缩比率越低；
[0036]否则，压缩比率为1。
[0037]由上述描述可知本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种H5图片自动压缩方法，其特征在于，包括步骤：S1、获取原始图片并读取原始图片信息，所述原始图片信息包括原始图片尺寸信息；S2、创建第一预设尺寸的画布元素，将所述原始图片放入所述画布元素，并根据所述原始图片信息及所述第一预设尺寸调整所述原始图片；S3、读取预设的目标图片尺寸信息，根据所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成对应的压缩比率；S4、根据所述压缩比率，对所述画布元素进行压缩，得到压缩图片，将所述压缩图片上传到服务端。2.根据权利要求1所述的一种H5图片自动压缩方法，其特征在于，所述原始图片信息还包括原始图片方向信息，所述原始图片尺寸信息包括原始图片长度信息及原始图片宽度信息；所述S2中根据所述原始图片信息及所述第一预设尺寸调整所述原始图片具体为：根据所述原始图片方向信息调整所述原始图片的方向并根据所述原始图片长度信息、所述原始图片宽度信息及第一预设尺寸调整所述原始图片的长度及宽度，以使得所述原始图片调整后的尺寸与所述第一预设尺寸相适应。3.根据权利要求1所述的一种H5图片自动压缩方法，其特征在于，所述S3中预设的目标图片尺寸信息包括最大图片空间占用信息；所述原始图片尺寸信息包括原始图片空间占用信息；所述S3具体为：读取最大图片空间占用信息，判断所述原始图片空间占用信息是否大于所述最大图片空间占用信息，若是，则获取所述原始图片空间占用信息与所述最大图片空间占用信息的比值，根据所述比值，生成对应的压缩比率，所述比值越大，所述压缩比率越低；否则，压缩比率为1。4.根据权利要求1所述的一种H5图片自动压缩方法，其特征在于，所述S3中具体为：读取预设的多个目标图片尺寸信息，根据每一个所述目标图片尺寸信息与所述原始图片尺寸信息的对应关系，生成每一个所述目标图片尺寸信息所对应的压缩比率；所述S4具体为：将多个所述压缩比率分别作为参数，执行画布元素的压缩方法toDataURL，得到多个与所述目标图片尺寸信息对应的压缩图片；为多个所述压缩图片分别确定对应的质量档次标签；将多个所述压缩图片与所述压缩图片对应的所述质量档次标签上传到服务端。5.根据权利要求4所述的一种H5图片自动压缩方法，其特征在于，所述S4之后还包括：获取场景信息，根据所述场景信息确定质量档次标签；根据所述质量档次标签，获取对应的压缩图片并显示。6.一种H5图片自动压缩终端，包括存储器、处理器及存储在存储器上并...

【专利技术属性】
技术研发人员：刘德建，林琛，陈波，伍张发，
申请(专利权)人：福建天晴在线互动科技有限公司，
类型：发明
国别省市：