全网唯一的纯前端实现的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.必须放倒服务器上, ...
随机推荐
- Poco logger 日志使用小析
Poco logger 日志使用小析 Poco logger 日志使用小析 日志 logger 库选择 Pocologger 架构简析 步骤一 生成消息 步骤二 写入logger 步骤三 导入chan ...
- Excel 2013永久取消超链接
原文:Excel 2013永久取消超链接 在使用Excel的过程中,Excel会自动将网址转换为超链接,操作不当,容易误点,引起不必要的错误, 那么本篇博客就总结下如何在Excel 2013里永久取消 ...
- python 教程 第二十一章、 扩展Python
第二十一章. 扩展Python /* D:\Python27\Lib\Extest-1.0\Extest2.c */ #include <stdio.h> #include <std ...
- Domain adaptation:连接机器学习(Machine Learning)与迁移学习(Transfer Learning)
domain adaptation(域适配)是一个连接机器学习(machine learning)与迁移学习(transfer learning)的新领域.这一问题的提出在于从原始问题(对应一个 so ...
- win7在USB该解决方案不健全音箱
Win7安装后,原XP在正常工作USB小喇叭不工作,重新安装声卡驱动程序仍然是相同的.后来,通过以下的得心应手最后一次尝试. 1.右键右下角喇叭button. 2.点击"播放设备" ...
- windows 7 SDK和DDK下载
检查小数据,获取地址.顺便记录下来. Windows Driver Kit Version 7.1.0 http://www.microsoft.com/downloads/details.aspx? ...
- CF 455A(Boredom-dp)
A. Boredom time limit per test 1 second memory limit per test 256 megabytes input standard input out ...
- WPF Datagrid with some read-only rows - Stack Overflow
原文:WPF Datagrid with some read-only rows - Stack Overflow up vote 21 down vote accepted I had the sa ...
- App.xaml介绍
在App.xaml.cs中指定 public App () { InitializeComponent(); MainPage = new XamarinDemo.MainPage(); } 同时,这 ...
- WPF 打印实例
原文:WPF 打印实例 在WPF 中可以通过PrintDialog 类方便的实现应用程序打印功能,本文将使用一个简单实例进行演示.首先在VS中编辑一个图形(如下图所示). 将需要打 ...