全网唯一的纯前端实现的canvas支持多图压缩并打包下载的工具
技术栈：
canvas
jszip.js(网页端压缩解压缩插件JSZIP库)
FileSaver.js(文件保存到本地库)
直接解读源码：
<div class="cont">
<div class="uploadBtn">选择图片<input name="file" accept="image/png, image/jpeg" multiple type="file" id="file"></div>
<br>
<br>
<div class="selectbox">
<div>请选择压缩质量</div>
<select id="encoderOptions">
<option value="0.1">10%</option>
<option value="0.2">20%</option>
<option value="0.3">30%</option>
<option value="0.4">40%</option>
<option value="0.5" selected>50%</option>
<option value="0.6">60%</option>
<option value="0.7">70%</option>
<option value="0.8">80%</option>
<option value="0.9">90%</option>
<option value="1">100%</option>
</select>
</div>
<br>
<div id="show">
<br>
<br>
需要压缩的图片:
<br>
<br>
<ul id="selectView"></ul>
<br>
</div>
<div id="compressBox">
<button id="active" onclick="startCompress()">压缩图片并下载</button>
</div>
</div>
<canvas id="canvas"></canvas>
js部分：
<!-- 网页端压缩解压缩插件JSZIP库 -->
<script src="jszip.min.js"></script>
<!-- 文件保存到本地库 -->
<script src="FileSaver.js"></script>
<!--用于文件下载-->
<script>
// 图片质量(0-1)
var encoderOptions = 0.5;
// 获取input
var filesInput = document.querySelector('#file')
// 获取压缩按钮
var compressBox = document.querySelector('#compressBox')
// 选择图片展示视口
var selectView = document.querySelector('#selectView')
// 获取选择图片后展示的视口
var show = document.querySelector('#show')
var encoderOptionInput = document.querySelector('#encoderOptions')
// 所有的选择文件
var files;
var canvas;
var ctx;
// new JSZip对象
var zip = new JSZip();
// 创建images文件夹，用来存在压缩完成的图片
var imgFolder = zip.folder("images");
// 监听input选择文件的变化
filesInput.onchange = function() {
// 获取所有file
files = filesInput.files
// 如果选择files数量大于0就显示压缩操作
if (files.length > 0) {
show.style.display = 'block'
compressBox.style.display = 'block'
}
// 拼接缩略图列表
var html = ''
for (var i = 0; i < files.length; i++) {
html += '<li><img width="60" height="60" src="' + getObjectURL(files[i]) + '" alt="" /></li>'
}
// 插入拼接的图片列表
selectView.innerHTML = html
}
// 压缩图片的方法
function startCompress() {
demo(files[0], 0)
}
// 利用递归循环files
function demo(file, num) {
if (num <= files.length - 1) {
encoderOptions = parseFloat(encoderOptionInput.value)
// 获取file的base64地址
var imgsrc = getObjectURL(file)
// 获取文件名称
var name = file.name
// 监听如果转换base64地址成功，就执行下面的
if (imgsrc) {
// 创建image,并动态复制src
var img = new Image()
img.src = imgsrc
// 监听img图片加载完成
img.onload = () => {
// 获取canvas标签
canvas = document.querySelector('#canvas')
// 获取上下文
ctx = canvas.getContext('2d')
// 根据图片宽高设置canvas的宽高
canvas.width = img.width
canvas.height = img.height
// 在canvas上面画图片
ctx.drawImage(img, 0, 0, img.width, img.height);
// 把canvas转成路径
// canvas.toDataURL(type, encoderOptions);
// 参数
// type 可选
// 图片格式， 默认为image / png
// encoderOptions 可选
// 图片质量。 取值范围为0到1。 如果指定图片格式为image / jpeg或image / webp。 如果超出取值范围， 将会使用默认值0 .92。 其他参数会被忽略。
var typeTxt = 'image/jpeg'
if (name.indexOf('png') != -1) {
typeTxt = 'image/png'
}
var imgdata = canvas.toDataURL(typeTxt, encoderOptions)
// 分割base64
imgdata = imgdata.split(',')
// 添加图片到文件夹
imgFolder.file(name, imgdata[1], { base64: true });
// 如果当前的标记和文件的数量相等的话，就说明压缩添加到文件到文件夹已经完成了，可以压缩下载了。
if (num == files.length - 1) {
zip.generateAsync({ type: "blob" })
.then(function(content) {
// 创建的zip的文件名称是images
saveAs(content, "images.zip");
location.reload()
});
} else {
// 如果没有到标记，就继续回调
num++
demo(files[num], num)
}
}
}
}
}
// 获取file 的base64路径
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
css部分：
<style>
*{
padding: 0;
margin: 0;
background-color: #000;
color: #DC143C;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
user-select: none;
}
html,body{
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
h3{
text-align: center;
}
#compressBox{
display: none;
}
#canvas{
position: fixed;
top: -100000px;
left: -100000px;
opacity: 0;
}
.cont{
margin-top: 20px;
padding: 20px;
box-sizing: border-box;
border: 1px solid #DC143C;
border-radius: 10px;
background-color: #fff;
font-size: 13px;
min-height: 80px;
}
.uploadBtn{
position: relative;
display: inline-block;
padding: 0 20px;
line-height: 28px;
background-color: #fff;
border: 1px solid #DC143C;
font-size: 12px;
border-radius: 30px;
text-align: center;
cursor: pointer;
width: 300px;
}
.uploadBtn input{
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
#selectView{
background-color: #fff;
}
#selectView li{
background-color: #fff;
display: inline-block;
margin-right: 10px;
}
#compressBox{
height: 60px;
background-color: #fff;
}
#active{
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
padding: 0 20px;
line-height: 28px;
background-color: #DC143C;
border: 1px solid #DC143C;
font-size: 12px;
border-radius: 30px;
text-align: center;
cursor: pointer;
width: 300px;
color: #fff;
}
#show{
display: none;
background-color: #fff;
}
.help{
position: fixed;
font-size: 12px;
bottom: 20px;
left: 0;
text-align: center;
width: 100%;
}
.selectbox{
background-color: #fff;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
.selectbox input,.selectbox div,.selectbox select{
background-color: #fff;
}
.selectbox div{
padding-right: 20px;
}
</style>
解读：
1、以上的工具，暂时只是配置了允许png和jpg格式的图片压缩，如需别的格式的请自行到我的github上面clone下载自行修改；
2、压缩质量：10份；
3、压缩会自动打包成zip,自行下载解压，压缩速度惊人。，
4、压缩速度我觉得比熊猫压缩牛逼。
使用方法：
github: https://github.com/xiaoqiuxiong/imageCompressionTool
直接Git克隆下来,然后浏览器（最好使用谷歌浏览器）打开idnex.html页面，即刻轻松使用了。
以后都可以使用了，再也不用用什么熊猫压缩了。
一键压缩，就是吊！
好用的话，记得加星。
<style> *{ padding: 0; margin: 0; background-color: #000; color: #DC143C; -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;user-select: none; } html,body{ overflow: hidden; padding: 20px; box-sizing: border-box; } h3{ text-align: center; } #compressBox{ display: none; } #canvas{ position: fixed; top: -100000px; left: -100000px; opacity: 0; } .cont{ margin-top: 20px; padding: 20px; box-sizing: border-box; border: 1px solid #DC143C; border-radius: 10px; background-color: #fff; font-size: 13px; min-height: 80px; } .uploadBtn{position: relative;display: inline-block;padding: 0 20px;line-height: 28px;background-color: #fff;border: 1px solid #DC143C;font-size: 12px;border-radius: 30px;text-align: center;cursor: pointer;width: 300px; } .uploadBtn input{ opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; } #selectView{ background-color: #fff; } #selectView li{ background-color: #fff; display: inline-block; margin-right: 10px; } #compressBox{ height: 60px; background-color: #fff; } #active{ position: absolute;left: 50%;transform: translateX(-50%);display: block;padding: 0 20px;line-height: 28px;background-color: #DC143C;border: 1px solid #DC143C;font-size: 12px;border-radius: 30px;text-align: center;cursor: pointer;width: 300px;color: #fff; } #show{ display: none; background-color: #fff; } .help{ position: fixed; font-size: 12px; bottom: 20px; left: 0; text-align: center; width: 100%; } .selectbox{ background-color: #fff; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .selectbox input,.selectbox div,.selectbox select{ background-color: #fff; } .selectbox div{ padding-right: 20px; } </style>
全网唯一的纯前端实现的canvas支持多图压缩并打包下载的工具的更多相关文章
- 前端实现的canvas支持多图压缩并打包下载的工具
# 技术栈 canvas jszip.js(网页端压缩解压缩插件JSZIP库) FileSaver.js(文件保存到本地库) 在线预览:http://htmlpreview.github.io/?ht ...
- 前端JS利用canvas的drawImage()对图片进行压缩
对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致 ...
- 利用html5 canvas实现纯前端上传图片的裁剪
今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的 ...
- 纯前端html导出pdf--分页+不分页--html2canvas+jsPDF
前言 最近在项目中,有一个导出pdf功能,需要纯前端来实现,调研了多种pdf导出方式,最终决定使用html2canvas+jsPDF来实现需求. 本文就简单介绍一下html2canvas+jsPDF导 ...
- 纯前端实现词云展示+附微博热搜词云Demo代码
前言 最近工作中做了几个数据可视化大屏项目,其中也有用到了词云展示,以前做词云都是用python库来生成图片显示的,这次用了纯前端的实现(Ctrl+V真好用),同时顺手做个微博热搜的词云然后记录一下~ ...
- 快如闪电，触控优先。新一代的纯前端控件集 WijmoJS发布新版本了
全球最大的控件提供商葡萄城宣布,新一代纯前端控件 WijmoJS 发布2018 v1 版本,进一步增强产品功能,并支持在 Npm 上的安装和发布,极大的提升了产品的易用性. WijmoJS 是用 Ty ...
- JS魔法堂之实战：纯前端的图片预览
一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服 ...
- Sharepoint页面项目展示画廊纯前端实现，后端用list/library简单维护
需求背景: Sharepoint页面项目展示画廊.图片+文字,要求图片与文字用Sharepoint Library维护,然后在sharepoint页面上被调用,生成项目展示画廊. 解决方案(纯前端), ...
- react纯前端不依赖于打包工具的代码
####react最基础的语法和不依赖环境的纯前端免编译代码 参照:http://www.ruanyifeng.com/blog/2015/03/react.html 注意事项:1.必须放倒服务器上, ...
随机推荐
- JavaScript取出字符串和尾随空格
书写JavaScript性能trim()之前和之后删除空字符串格,的功能的应用String物replace()方法去除空字符串端到端格.trim()例如,对于功能键下面的代码: <script ...
- 理解 UWP 视图的概念，让 UWP 应用显示多个窗口（多视图）
原文 理解 UWP 视图的概念,让 UWP 应用显示多个窗口(多视图) UWP 应用多是一个窗口完成所有业务的,事实上我也推荐使用这种单一窗口的方式.不过,总有一些特别的情况下我们需要用到不止一个窗口 ...
- C#中HttpWebRequest与HttpWebResponse的使用方法
关键字:C# HttpWebRequest HttpWebResponse HTTP GET POST 请求 这个类是专门为HTTP的GET和POST请求写的,解决了编码,证书,自动带Cookie等问 ...
- 浅谈WPF中对控件的位图特效（WPF Bitmap Effects）
原文:浅谈WPF中对控件的位图特效(WPF Bitmap Effects) -------------------------------------------------------------- ...
- WPF 海康威视网络摄像头回调方式实现断连提示，降低时延
原文:WPF 海康威视网络摄像头回调方式实现断连提示,降低时延 项目需要使用海康威视网络摄像头接入实时视频数据,使用海康威视官方SDK开发,发现没有断连提示的功能,故开发了一个断连提示的功能 在开发过 ...
- python发送电子邮件
或者收发邮件都得小心翼翼的,怕一不小心被有心人瞧见,又得被说说. 为了能发邮件而不被发现,嘿嘿.我就用python写了个邮件发送程序,用控制台控制,不了解的人一定以为哥还在编程工作呢.哈哈. 以下简介 ...
- wpf listbox 选中项 上移下移
原文:wpf listbox 选中项 上移下移 private void MoveUp_Click(object sender, RoutedEventArgs e) { ...
- Matlab随笔之判别分析
原文:Matlab随笔之判别分析 从概率论角度,判别分析是根据所给样本数据,对所给的未分类数据进行分类. 如下表,已知有t个样本数据,每个数据关于n个量化特征有一个值,又已知该样本数据的分类,据此,求 ...
- springboot使用logback日志，部署到tomcat不生效问题解决
1.springboot 配置日志方法 使用该方法配置日志,在本地调试可以正常写入日志文件,但是打包发布到tomcat以后日志配置不生效. 2.修改配置 Spring Boot官方推荐优先使用带有-s ...
- 利用属性中设置、查看DataContext Command等
DataContext 1 2 3 示例 1 2 xaml代码自动生成 3