【技术实现步骤摘要】
本专利技术涉及图像信息处理，具体涉及一种基于canvas的图像分块压缩、重构方法、系统及应用。
技术介绍
1、目前web页面，对较大质量的图片进行上传和渲染时，对服务器及浏览器页面有较大压力；当有较大规模的同时进行图像信息上传时，此时服务器的负载压力骤增，占用当前服务器的带宽，从而影响其他业务正常运行。当图片质量过大时，页面渲染速度较慢，影响用户体验。
2、如果上传图像信息时，进行单独的压缩处理，就会产生一些图像信息画质变低，达不到预设效果，无法做到画质统一。
3、因此，需要一种在不改变图像信息画质的前提下，有效上传图像信息，提升上传效率并且减小图像渲染压力的方法。
技术实现思路
1、本专利技术提供一种基于canvas的图像分块压缩、重构方法、系统及应用，以解决上述问题。
2、本专利技术通过下述技术方案实现：
3、一种基于canvas的图像分块压缩方法，包括：
4、s1、在web浏览器中创建第一canvas画布，并基于所述第一canvas画布对需要处理的图像信息进行渲染得到第一图像信息，然后导出所述第一图像信息的base64字符串；
5、s2、在web浏览器中创建第二canvas画布，将所述第一图像信息的base64字符串渲染到所述第二canvas画布上得到第二图像信息；
6、s3、将所述第二canvas画布切割均分成n*n等份从而使所述第二图像信息变成n*n个子图像信息，然后按序导出n*n个所述子
7、s4、将n*n个所述子图像信息的base64字符串按序存入中间文件中并将所述中间文件传输到第一云文件服务器中进行存储，并生成所述中间文件的url链接。
8、作为优化，s1中和s3中，通过调用canvas的todataurl分别将所述第一图像信息和子图像信息转换成对应的base64字符串。
9、作为优化，将base64字符串渲染到对应的canvas画布上的具体步骤为：
10、s2.1、使用javascript开发语言编写渲染源码：定义渲染函数名，确定渲染函数的入参名称和数据类型以及返回结果数据类型；
11、s2.2、将编写完成的所述渲染源码保存为拓展名为.js的javascript脚本文件，得到渲染程序；
12、s2.3、通过所述渲染程序将base64字符串渲染到对应的canvas画布上。
13、作为优化，s1之前，需要将设计好的渲染程序通过web服务部署到预设站点下，具体步骤为：
14、a1、将所述渲染程序部署在第二云文件服务器中，获取所述服务器的域名地址；
15、a2、根据预设站点以及域名地址生成所述渲染程序的访问地址；
16、a3、所述预设站点根据所述渲染程序的访问地址加载部署在所述第二云文件服务器的渲染程序。
17、作为优化，s2.3的具体过程为：将通过调用所述渲染程序时预先暴露的渲染函数名传入对应的base64字符串，调用所述渲染程序对应的渲染函数对所传的base64字符串进行渲染到对应的canvas画布上。
18、作为优化，所述中间文件的格式为txt格式。
19、作为优化，n等于3。
20、本专利技术还公开了一种对分块压缩处理后的图像信息的重构方法，对经过前述的一种基于canvas的图像分块压缩方法进行分块压缩处理后图像信息进行重构，包括：
21、t1、前端浏览器获取对应的图像信息的中间文件的url链接；
22、t2、通过javascript的对象filereader，将获取的中间文件的url链接进行实例化，使用该对象的onload方法获取文件中的关于n*n个子图像信息的base64字符串；
23、t3、然后将所述中间文件的n*n个子图像信息的base64字符串按序导出进行数组排列；
24、t4、将得到的数组依次导入提前预设的第三canvas画布中进行对应的图像信息渲染得到第三图像信息；
25、t5、使用todataurl，将所述第三图像信息导出为可以进行渲染查看的base64图片信息流，在所述前端浏览器页面对应需要展示的地方使用<img>标签进行渲染查看。
26、本专利技术还公开了一种分块压缩渲染处理系统，包括：
27、解析模块，用于生成基于canvas的对应的画布，然后将对应的图像信息在画布中进行页面渲染；
28、分割模块，用于使用n*n等分的模式对所述画布中渲染后的图像信息进行分割；
29、导出模块，用于导出渲染后的图像信息转换的base64字符串；
30、保存传输模块，用于将导出的base64字符串保存为中间文件并按序进行依次传输到对应的第一云文件服务器中；
31、编码模块，在渲染程序部署在第二云文件服务器中后，用于获取所述第二云文件服务器的域名地址，根据预设站点以及域名地址生成渲染程序的访问地址；
32、渲染模块，用于获取对应的图像信息的中间文件的url链接，并对得到的中间文件的url链接进行本地化处理，然后基于该中间文件的base64字符串对该图像信心进行重新渲染。
33、本专利技术还公开了一种对前述的分块压缩渲染处理系统的应用，将所述分块压缩渲染处理系统部署在预设站点下，通过所述分块压缩渲染处理系统对质量大于第一阈值的第一图像信息进行压缩处理，首先获取该第一图像信息的文件流，生成对应的base64字符串，再将该base64字符串重新渲染成第二图像信息，并进行分块裁剪得到若干子图像信息，将裁剪后的若干子图像信息导出对应的base64字符串，然后将若干子图像信息的base64字符串单独保存为质量小于第二阈值的中间文件，当需要上传图像信息到服务器时，将所有由若干子图像信息组成的中间文件上传到指定的第一云文件服务器并得到所有中间文件的url地址，再将所有url地址信息上传至服务器，当需要渲染图像时，先从服务器中获取该图像所有中间文件的url地址，通过所述分块压缩渲染处理系统将其渲染为原图。
34、本专利技术与现有技术相比，具有如下的优点和有益效果：
35、使用canvas将较大质量的图像进行切割处理后，生成的base64文件本身质量将大幅度缩小，但图像自身的清晰度并不会有所减弱，得到的图像base64字符串可保存为.txt文件格式进行简单存储，也方便使用时能够快速的进行页面渲染，这样的使用，极大的提升了页面渲染速度和减小了较大质量的图像上传时对服务器带宽的占用。
本文档来自技高网...【技术保护点】
1.一种基于canvas的图像分块压缩方法，其特征在于，包括：
2.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，S1中和S3中，通过调用canvas的toDataURL分别将所述第一图像信息和子图像信息转换成对应的Base64字符串。
3.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，将base64字符串渲染到对应的canvas画布上的具体步骤为：
4.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，S1之前，需要将设计好的渲染程序通过Web服务部署到预设站点下，具体步骤为：
5.根据权利要求4所述的一种基于canvas的图像分块压缩方法，其特征在于，S2.3的具体过程为：将通过调用所述渲染程序时预先暴露的渲染函数名传入对应的base64字符串，调用所述渲染程序对应的渲染函数对所传的base64字符串进行渲染到对应的canvas画布上。
6.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，所述中间文件为.txt文件。p>
7.一种对分块压缩处理后的图像信息的重构方法，对经过权利要求1-6任意所述的一种基于canvas的图像分块压缩方法进行分块压缩处理后图像信息进行重构，其特征在于，包括：
8.一种分块压缩渲染处理系统，其特征在于，包括：
9.一种对权利要求8所述的分块压缩渲染处理系统的应用，其特征在于，将所述分块压缩渲染处理系统部署在预设站点下，通过所述分块压缩渲染处理系统对质量大于第一阈值的的第一图像信息进行压缩处理，首先获取该第一图像信息的文件流，生成对应的base64字符串，再将该base64字符串重新渲染成第二图像信息，并进行分块裁剪得到若干子图像信息，将裁剪后的若干子图像信息导出对应的base64字符串，然后将若干子图像信息的base64字符串单独保存为质量小于第二阈值的中间文件，当需要上传图像信息到服务器时，将所有由若干子图像信息组成的中间文件上传到指定的第一云文件服务器并得到所有中间文件的URL地址，再将所有URL地址信息上传至服务器，当需要渲染图像时，先从服务器中获取该图像所有中间文件的URL地址，通过所述分块压缩渲染处理系统将其渲染为原图。
...【技术特征摘要】
1.一种基于canvas的图像分块压缩方法，其特征在于，包括：
2.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，s1中和s3中，通过调用canvas的todataurl分别将所述第一图像信息和子图像信息转换成对应的base64字符串。
3.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，将base64字符串渲染到对应的canvas画布上的具体步骤为：
4.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，s1之前，需要将设计好的渲染程序通过web服务部署到预设站点下，具体步骤为：
5.根据权利要求4所述的一种基于canvas的图像分块压缩方法，其特征在于，s2.3的具体过程为：将通过调用所述渲染程序时预先暴露的渲染函数名传入对应的base64字符串，调用所述渲染程序对应的渲染函数对所传的base64字符串进行渲染到对应的canvas画布上。
6.根据权利要求1所述的一种基于canvas的图像分块压缩方法，其特征在于，所述中间文件为.txt文件。<...
【专利技术属性】
技术研发人员：高显娟，田原，唐义，
申请(专利权)人：四川中屹互联信息技术有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。