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 相关文章推荐
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
Nov 01 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
vue2.0+koa2+mongodb实现注册登录
Apr 10 Javascript
小程序实现留言板
Nov 02 Javascript
JS中数据结构之栈
Jan 01 Javascript
JS实现获取数组中最大值或最小值功能示例
Mar 02 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
js中的this的指向问题详解
Aug 29 Javascript
Javascript webpack动态import
Apr 19 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
在线短消息收发的程序,不用数据库
2006/10/09 PHP
一个简单的PHP入门源程序
2006/10/09 PHP
PHP的反射机制实例详解
2017/03/29 PHP
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
WebPack配置vue多页面的技巧
2018/05/15 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
浅谈Python中的私有变量
2018/02/28 Python
python装饰器深入学习
2018/04/06 Python
Django的性能优化实现解析
2019/07/30 Python
基于python2.7实现图形密码生成器的实例代码
2019/11/05 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
Pycharm操作Git及GitHub的步骤详解
2020/10/27 Python
CSS3中的clip-path使用攻略
2015/08/03 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
入党积极分子思想汇报范文
2014/01/05 职场文书
领导检查欢迎词
2014/01/14 职场文书
静心口服夜广告词
2014/03/20 职场文书
2015年教师新年寄语
2014/12/08 职场文书
2014年科协工作总结
2014/12/09 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
《圆的周长》教学反思
2016/02/17 职场文书