前端图片压缩（几乎无损）

前端经常会有图片压缩这样的需求，我尝试过很多种压缩方法，最后决定推荐lrz压缩方式
lrz(file, [options]);
1、file 通过 input:file 得到的文件，或者直接传入图片路径
2、[options] 这个参数允许忽略
3、width {Number} 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
4、height {Number} 同上
5、quality {Number} 图片压缩质量，取值 0 - 1，默认为0.7
库的话直接去http://www.bejson.com/ui/compress_img/
这个网站上下就行
公司已实现的网站：https://www.onlinedo.cn/img-compress
使用
html

 <div class="single_container"><div class="dragImgBox" id="dropZone">请拖拽本地文件到此处</div><div class="operation_container"><span class="choseImg">选择图片</span><input type="file" accept="image/*" style="display: none;" class="operation_chose"><input type="range" name="" class="range" id="range" min="0" max="100" value="60"><span class="operationWord">压缩率：<span>60</span>%</span><a class="batch_btn" href="/img-compresspro" id="pdfto_227" target="_blank">批量压缩</a></div><div class="imgFile_container" style="display: none;"><div class="imgFile_container_top"><p class="imgFileOsize">源文件大小：<span></span></p><p class="imgFileTsize">压缩后大小：<span></span></p><span class="imgFileDown">下载压缩图片</span></div><div class="imgFile_container_middle"><img src="" alt=""></div></div></div>

js
引入

<script src="/ols/Tpl/Index/Public/js/jquery-1.7.2.min.js"></script>
<script src="/ols/Tpl/Index/Public/picyasuo/js/jxtech_pic_zip.js"></script>

封装好的方法：压缩，下载，字节转换

//压缩方法function singleZip(file,quality){lrz(file,{quality:quality})//这里可以自定义一下图片压缩比率和压缩后的宽高.then(function(rst){var img = new Image();img.src = rst.base64;//将压缩后的base64赋给img的src,然后可以赋给标签的src属性imgbase64 = rst.base64;$(".imgFileOsize span").text(changSize(file.size))$(".imgFileTsize span").text(changSize(rst.fileLen))$(".imgFile_container_middle img").attr("src",rst.base64)$(".imgFile_container").show();})}function changSize(limit) {var size = "";if(limit < 0.1 * 1024){ if(limit < 0.1 * 100){size = 0;} else{size = limit.toFixed(2) + "B"  //小于0.1KB，则转化成B}                         }else if(limit < 0.1 * 1024 * 1024*1024){            //小于0.1MB，则转化成KBsize = (limit/1024).toFixed(2) + "KB"}else{                                            //其他转化成GBsize = (limit/(1024 * 1024 * 1024)).toFixed(2) + "GB"}var sizeStr = size + "";                        //转成字符串var index = sizeStr.indexOf(".");                 //获取小数点处的索引var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值if(dou == "00"){                                //判断后两位是否为00，如果是则删除00                return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)}return size;}function downLoad(base,name){var a = document.createElement('a');a.download = name;a.innerHTML = 'download';a.href = base;a.click();}

调用

var q_num = 0.4;   //压缩质量
var imgFile ;    //图片文件
var imgbase64; //压缩后得图片base64
var _fileName;

按钮点击选择图片压缩

//选择图片$(".operation_chose").change(function(e){imgFile = e.target.files[0];_fileName = imgFile.namesingleZip(imgFile,q_num)}) // 调整压缩比例$(".range").change(function(){q_num = 1 - parseInt($(this).val())/100;$(".operationWord span").text($(this).val())if(imgFile){singleZip(imgFile,q_num)}})// 下载图片$(".imgFileDown").click(function(){downLoad(imgbase64,_fileName)})

拖拽压缩

// 拖拽文件var dp = document.querySelector( '#dropZone' );document.addEventListener('drop', function (e) {e.preventDefault()}, false)document.addEventListener('dragover', function (e) {e.preventDefault()}, false)if(dp==null){return;}dp.addEventListener('dragover', function(e) {e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect = '导入';});dp.addEventListener("drop", function(e) {e.stopPropagation();e.preventDefault();var file = e.dataTransfer.files;imgFile = file[0];var fileName = file[0].name;_fileName = fileName;var fileType = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();var fileFlag;if(file.length>1){alert("文件只能单个上传")}else{if(fileType!=="png"&&fileType!=="jpg"&&fileType!=="webp"&&fileType!=="gif"&&fileType!=="jpeg"&&fileType!=="bmp"){alert("请上传图片格式")}else{singleZip(imgFile,q_num)}}});

end~

前端图片压缩（几乎无损）相关推荐

前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
移动前端—图片压缩上传实践
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
前端图片压缩 pngquanty
进行前端开发,必然会用到图片压缩,在尽可能小的改变图片视觉效果前提下,尽可能大的压缩图片大小,进行png 图片压缩常用 pngquant,在服务器上上传压缩过后的图片,以节省载宽Official w ...
前端图片压缩解决办法
文章の目录问题产生背景解决办法 1.使用纯 js 解决 2.插件 js-image-compressor 写在最后问题产生背景在某一h5的项目,要求上传的图片格式为 base64 , 问题是用 ...
使用canvas进行图片压缩(前端图片压缩核心处理)
一.原理:实际上就是利用canvas进行重新绘制 1.先将图片的file文件转成baseURL 2.创建一个image标签去接收文件获取图片的宽高和比例. 3.创建canvas画布设置画布的大小. 4 ...
利用H5Canvas进行前端图片压缩再上传笔记
前端代码如下: //---------------------压缩图片上传插件--------------------------- var ImgFileGet_class = function(m ...
js 前端图片压缩
/** File图片类型 callback回调函数,里面传压缩后的File **/ function compress(file,callback){var ms = file.size/1024;c ...
前端实现压缩图片的功能（vue-element）
前言: 随着现在手机像素,拍照功能越来越好,随之而来的是本地图片越来越大,那么如何更好的将本地图片上传到后端接口呢?这是后台管理系统常见的场景和头疼的问题,这里分享下个人的方法. 实现效果: 如下图所 ...

前端图片压缩（几乎无损）

前端图片压缩（几乎无损）相关推荐

最新文章

热门文章