JS实现压缩上传图片base64长度功能


Posted in Javascript onDecember 03, 2019

这篇文章主要介绍了js实现压缩上传图片base64长度功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

im发送图片,现将图片压缩再上传

1) 调用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 将用户选择的图片读入 Image对象.

2) 在image对象的 onload 事件中, 通过 canvas 的 canvas.getContext('2d') 的 drawImage 方法, 将Image 改变大小绘制到canvas上.

3) 通过 canvas.toDataURL("image/jpeg", 1); 方法, 将图片变成base64字符串, 放到send_image_value

toDataURL

canvas.toDataURL(type, encoderOptions); 

返回值

包含 data URI 的DOMString

type

图片格式,默认为 image/png

encoderOptions

在指定图片格式为 image/jpeg 或 image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围,将会使用默认值 0.92。其他参数会被忽略。

html

<input id="sendImage" title="send a picture" type="file" accept="image/*" onchange="imgChange(this)">
 <input type="hidden" value="" id="send_image_value">
 <img id="showLoadingimg" src="'+CHAT_SITE_URL+'/templates/default/images/loading.gif" style="position:relative;left:200px;top:200px;z-index:999;display:none;">

js

function imgChange(e){
  //检查是否有文件被选中
    if (e.files.length != 0) {
      var file = e.files[0],
      fileType = file.type,
      reader = new FileReader();
      if (!reader) {
        e.value = '';
        return;
      };
      var size = file.size;
      var max_size = 2*1024*1024;
      if(size>max_size){
        e.value = '';
        $("#send_alert").html('file is too large(>2M)');
        return;
      }
      $("#showLoadingimg").show();
      reader.onload = function(e) {
        //读取成功,显示到页面并发送到服务器
        e.value = '';
        var org_img = e.target.result;
        var image_base64 = org_img;
        if(size>1024*80){//>80K的
          var img = new Image(); 
          img.src = org_img; 
          img.onload=function(){
            var scale = 1;  
            if(this.width > 300 || this.height > 300){   
              if(this.width > this.height){  
                scale = 300 / this.width; 
              }else{  
                scale = 300 / this.height;  
              }  
            } 
            var canvas = document.createElement("canvas"), drawer = canvas.getContext("2d");
            if(scale!=1) {//按最大高度等比缩放
              img.width *= scale;
              img.height *= scale;
            }
            canvas.width = img.width;
            canvas.height = img.width * (img.height / img.width);
            drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
            var tmp_code = image_base64 = canvas.toDataURL(fileType);
            if(tmp_code!='data:,'){
              image_base64 = tmp_code;
            }
            img_send(image_base64);
          }; 
             
        }else{
          img_send(image_base64);
        }
         
      };
      reader.readAsDataURL(file);
    }
  }
  /**
   *为将图片赋值给消息
  **/
  function img_send(image_base64){
    if(image_base64!='data:,'){
      $("#send_image_value").val(image_base64);
      send_msg();
      $("#showLoadingimg").hide();
      $('#sendImage').val("");
    }
  }

开始时,toDataURL获取的值是data:,

$("#send_image_value").val(image_base64);
send_msg();

这两句写在

reader.onload方法的最下面这就导致图片并没有压缩

因为img.onload还没执行完

发送的还是原来的图片

在调整后就可以实现图片的压缩了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
Feb 11 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
js 轮播效果实例分享
Dec 28 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
js实现AI五子棋人机大战
May 28 #Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 #Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
微信小程序实现图片压缩
Dec 03 #Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
You might like
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
PHP编写daemon process 实例详解
2016/11/13 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
Js sort排序使用方法
2011/10/17 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
2013/05/07 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
jquery缓动swing liner控制动画过程不同时刻的速度
2014/05/29 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
python3.3实现乘法表示例
2014/02/07 Python
Python日志模块logging基本用法分析
2018/08/23 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
全面了解django的缓存机制及使用方法
2019/07/22 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
英国绿色商店:Natural Collection
2019/05/03 全球购物
Skyscanner香港:机票比价, 平机票和廉价航空机票预订
2020/02/07 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
小学数学课后反思
2014/04/23 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
岗位安全生产责任书
2014/07/28 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android