JavaScript原生实现图集分解并下载功能教程(三、使用JSZip压缩并下载分解好的碎图)

本文主要是介绍JavaScript原生实现图集分解并下载功能教程(三、使用JSZip压缩并下载分解好的碎图),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

-前言-

上一章我们使用了<a>标签的纯原生方法下载分解好的图集,虽然功能能够实现,不过下载下来的碎图不能在一个文件夹下,很蛋疼,因此本篇博客我们使用先压缩成zip的方式再下载下来。

如果没看过前两篇博客的同学也可以移步看看这个功能的具体实现:

https://blog.csdn.net/weixin_36719607/article/details/102623647

https://blog.csdn.net/weixin_36719607/article/details/102647690

完整项目地址:https://github.com/dengxuhui/ImagePackerWeb

如果想直接使用该功能的同学:http://dengxuhui.cn/

-正文-

在完成了所有图集上传分解功能后我们会得到有个imageDataAry的数组,数组成员为ImageData对象。我们本片博客就从这里开始写起。

引入JSZip.js及FileSaver.js

首先我们从网络上下载JSZip及FileSaver这两个js文件,并引入到index.html中

Github地址:https://github.com/Stuk/jszip

解析ImageData并保存到JSZip对象

/*** 通过jszip下载* @param {Array} imageDataAry */
downloadMethodByJSZip(imageDataAry) {var $this = this;var zip = new JSZip();for (var i = 0; i < imageDataAry.length; ++i) {$this.canvas.width = imageDataAry[i].width;$this.canvas.height = imageDataAry[i].height;$this.ctx.putImageData(imageDataAry[i], 0, 0);var base64 = $this.canvas.toDataURL("image/png", 1);base64 = base64.split(",")[1];zip.file($this.preFix + "_" + i + ".png", base64, { base64: true });}var blob = zip.generate({ type: "blob" });saveAs(blob, $this.preFix + ".zip");
}

上面我们还是首先获取单个碎图在Canvas中的数据并通过toDataURL获得base64数据。接着我们需要清洗返回的base64数据,把数据头中去掉,下面可以看看截取的原始base64数据

框内的字符串都是没有用的,我们只需要base64后的数据内容,因此使用字符串分割去得后面数据。

每个取得一个数据,我们就存到一个文件中,使用.file方法存储。

关于Base64数据我也有介绍:https://blog.csdn.net/weixin_36719607/article/details/102707249

生成blob并存储到本地

var blob = zip.generate({ type: "blob" });
saveAs(blob, $this.preFix + ".zip");

接下来我们生成blob并调用saveAs存储到本地。

官方提供的Demo是使用的一个异步方法来接收,不过我发现我下载中的JSZip中没有generateAsync这个方法,就直接使用了generate方法生成。

下面这个是官方demo实现方式

zip.generateAsync({type:"blob"})
.then(function(content) {    saveAs(content, $this.preFix + ".zip");
});

至此我们就实现了使用JSZip + FileSaver方法来下载我们分解好的图集碎图文件。

这篇关于JavaScript原生实现图集分解并下载功能教程(三、使用JSZip压缩并下载分解好的碎图)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/353557

相关文章

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依