【前端实现的canvas支持多图压缩并打包下载的工具】的更多相关文章

全网唯一的纯前端实现的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=…

前端实现的canvas支持多图压缩并打包下载的工具

# 技术栈 canvas jszip.js(网页端压缩解压缩插件JSZIP库) FileSaver.js(文件保存到本地库) 在线预览:http://htmlpreview.github.io/?https://github.com/xiaoqiuxiong/imageCompressionTool/master/index.html github: https://github.com/xiaoqiuxiong/imageCompressionTool 解读 以上的工具,暂时只是配置了允许pn…

前端JS利用canvas的drawImage()对图片进行压缩

对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 1.由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 2.最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片上传作为自己的头像,就会遇…

linux压缩、解压缩和归档工具

linux基础之压缩.解压缩和归档工具 1.压缩工具 基本介绍 为了减少文件的原来的文件大小而过多的浪费磁盘的存储空间,我们使用压缩后多文件进行存储 压缩工具的介绍 compress:把文件压缩成以.z结尾的压缩文件 uncompress:将以.z压缩文件解压缩为普通文件 gzip:将文件压缩成以.gz结尾的压缩文件 gunzip:将以.gz结尾的压缩文件解压缩为普通文件 bzip2:将文件压缩成以.bz2结尾的压缩文件 bunzip2:将以.bz2结尾的压缩文件解压缩为普通文件 xz:将文件压…

使用Canvas绘制背景图

原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS7一致了.首页图标下方漂浮着若干大小不一的泡泡,十分梦幻.大家可以访问 beta.icloud.com 体验下,如果觉得泡泡不够多,还可以加上 crazyAwesome 参数让泡泡变得更加疯狂. 上面提到的泡泡效果,有许多种实现方案.本文要讨论的是iCloud使用的Canvas绘制背景图方案.这样做…

使用ajax上传图片，支持图片即时浏览，支持js图片压缩后上传给服务器

使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进行的 源码: /** * js使用form上传图片,支持本地预览选中的图片,支持携带自定义参数 * @param {string} params.previewImgId 预览图片控件id,可以预览上传图片 * @param {string} params.url 提交上传的url * @param…

前端笔记之Canvas

一.Canvas基本使用 Canvas是HTML5的画布,Canvas算是“不务正业”的面向对象大总结,将面向对象玩极致. 算法为王!就是说canvas你不会,但是算法好,不怕写业务,不怕代码量,只要稍微学学API就能出活. Canvas这里是HTML5新标签,直接要了flash的命. 1.1 Canvas简介 MDN的Canvas在线手册: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API 了解: <canvas>是一个可…

网页图片提取助手(支持背景图、选择dom范围)

网页图片提取助手(支持背景图.选择dom范围) 网页图片下载工具.网页图片批量保存. 使用场景: 作为web前端开发首——学习小生的你我,仿学在线页面是常有的事,但是一些在线资源,比如图片,图片有img标签中的图片,有背景图,当然还有一些旧浏览器不支持的webp,仿个页面需要 ctrl+m . ctrl+s .查看element.css ...以查找和保存所需图片. ——仿个页面我容易么我? 现在有这个小工具,希望可以助你一点点绵力. 主要应用于以下功能: 一.按需保存所选节点的所有图片 可以选…

用canvas绘制折线图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用canvas绘制折线图</title> </head> <body> <canvas id="cv"></canvas> </body> </html> <s…

NGUI字体贴图压缩以及相关Shader解读

一般游戏中,字体贴图是游戏贴图压缩的一个重点,特别是对于中文的游戏.考虑的字体贴图的特殊性,一般我们输出的字体贴图是不含颜色信息的,所以正常情况下,我们输出的字体贴图RGBA每一个通道都是一样的.这样一来,就存在非常大的浪费.所以我们能够在RGBA四个通道中能够保存不同的字体,这样,我们的贴图的大小能够降低4倍.假设我们想使用ETC压缩的话,我们可还以直接不使用Alpha通道,仅仅在RGB三个通道中存储不同的文字(这样,假设我们要进行ETC压缩的话,不须要对Alpha通道做分离处理了,可是得到的…