IT学习网是免费的终身在线学习平台,现在主要提供IT(互联网)方面的教程,博客等方面的内容
主页 > 前端 > > 正文

计算机编程语言有哪些js 压缩图片(只缩小体积,不更改图片尺寸)

来源:IT学习网整理 发布时间:2020-02-14 18:53 标签:图片尺寸缩小体积压缩更改
浏览:
我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸? 这里我们可以通过canvas实现对图片的重新绘制,已便达到图片压缩的效果计算机编程语言有哪些。 "/>js 压缩图片(只缩小体积,不更改图片尺寸)

前端开发前端导航工具/手册更多栏目

折扣返利

网站投稿

书籍/周边

站内搜索

fly63前端网

提交

我要投稿

js 压缩图片(只缩小体积,不更改图片尺寸)

时间: 2019-08-08阅读: 300标签: 压缩

我们知道现在,手机拍照在10MB左右,体积太大,在上传到服务器前,能不能只缩小图片的体积,而不改变图片尺寸? 这里我们可以通过canvas实现对图片的重新绘制,已便达到图片压缩的效果。 


代码展示:  /** * 图片压缩 * @explain 借助canvas对图片进行重绘(canvas2DataURL) * @param base64Url base64格式的图片字符串 * @param imgAttr 重绘图片宽度、高度、质量等属性的设置 * @param callback 该函数执行完毕后,要执行的回调函数 * @returns */ function photoCompress (base64Url, imgAttr, callback){ var img = new Image(); img.src = base64Url; img.onload = function(){ var that = this; // 默认按比例压缩 var w = that.width, h = that.height, // 宽高比例 scale = w / h; w = imgAttr.width || w; h = imgAttr.height || (w / scale); // 默认图片质量为0.7 var quality = 0.7; //生成canvas var canvas = document.createElement(‘canvas‘); var ctx = canvas.getContext(‘2d‘); // 创建属性节点 var anw = document.createAttribute("width"); anw.nodeValue = w; canvas.setAttributeNode(anw); var anh = document.createAttribute("height"); anh.nodeValue = h; canvas.setAttributeNode(anh); ctx.drawImage(that, 0, 0, w, h); // 图像质量(0-1) if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){ quality = imgAttr.quality; } // 重绘后的图片类型 var imgType = imgAttr.type || ‘image/jpeg‘; // quality值越小,所绘制出的图像越模糊 var base64 = canvas.toDataURL(imgType, quality); // 回调函数返回base64的值 callback(base64); }; }

可自定义设置图片质量,图片的宽高(通过imgAttr设置)。   


完整示例// js 获取文件对象 var fileObj = document.getElementById("file").files[0]; if (null == fileObj) { alert("图像上传失败,请重试!"); } // 文件读取对象 var reader = new FileReader(); // 图片转base64(Blob对象或File对象) reader.readAsDataURL(fileObj); // 图片大小<=1MB,size的单位:B(1Mb=1B*1024*1024) if(fileObj.size/1024 <= 1024) { reader.onload = function(e) { // 获取对应的base64 var imgBase64 = e.target.result; // 将图片的base64码传给后台 // 调用腾讯接口 $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){ // TODO 对返回的接口数据进行自动填充处理 }); }; } else { // 读取完毕 reader.onload = function(){ // 图片转换成为base64Url var fileBase64 = this.result; // 图片参数 var imgAttr = {quality : 0.2, type : ‘img/jpeg‘}; // 回调函数 var callBack = function (base64Codes) { // 图片比较 // 调用腾讯接口 }; // 压缩图片 photoCompress(fileBase64,imgAttr,callBack); }; }


说明:

前端对图片进行重绘,对浏览器有一定的要求,我测试的时候再电脑端没有问题,但是,在微信上使用时,就会很难受了,会将微信的qq浏览器内核搞垮,根本无法使用。不得以,放弃了在前端进行压缩的想法。


.two_ads{overflow: hidden;} .two_ads a{float: left;width: 49.443%;} .two_ads a:nth-child(2){float: right;} .two_ads img{display: block;margin: 5px 0;max-width: 100%;}

热门文章

  • 用VPN得小心了,一程序员非法出售 VPN 被判
    用VPN得小心了,一程序员非法出售 VPN 被判

    用VPN得小心了,一程序员非法出售 VPN 被判

    上海市宝山区人民法院审理了一起案件,被告人戴某原在某证券管理公司从事软件开发工作。自 2016 年 4 月起,其为牟取非法利益,创建某网站,并在网站...

  • h5通过css实现禁止ios端长按复制选中文字
    h5通过css实现禁止ios端长按复制选中文字

    h5通过css实现禁止ios端长按复制选中文字

    在ios端默认的长按选择,可以对文字进行复制粘贴。但是在实际开发中,针对一些按钮一般要避免长按时弹出选中文字,或者一些罩层要避免弹出。 这篇文...

  • 自学教程腾讯开源新生移动跨端开发框架
    自学教程腾讯开源新生移动跨端开发框架

    自学教程腾讯开源新生移动跨端开发框架

    自学教程原标题:腾讯开源新生移动跨端开发框架Hippy:支持iOS、安卓 来源:IT之家 新酷产品第一时间免费试玩,还有众多优质达人分享独到生活经验,快...

  • it技术是什么玉米2005(C2005)11月12日行情及
    
it技术是什么玉米2005(C2005)11月12日行情及

    it技术是什么玉米2005(C2005)11月12日行情及

    (玉米2005)主力合约(C2005)今日开盘价为1937.0000元,收盘价为1919.0000元,较上一个交易日下跌-20.0000元 ,涨/跌幅度...

  • 编程视频教程vue里的$refs属性
    编程视频教程vue里的$refs属性

    编程视频教程vue里的$refs属性

    编程视频教程vuejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.$refs属性时,稍有不注意就会输出undefined导致我们对dom节点...

后端

更多 >
后端 新手学网站编程入门将促进境内市场与国
后端 学编程学习SpatialOS作为英礴旗下的下一代
后端 编程基础怎么学看一看其他和这家公司合
后端 编程自学多长时间若申请将手中持有的基
后端 编程需要学习那些如何教三岁宝宝学数学

工具资源

更多 >