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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
jquery实现一个简单好用的弹出框
Sep 26 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
node+express制作爬虫教程
Nov 11 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
微信小程序实现页面左右滑动
Nov 16 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设计模式之委托模式
2016/02/13 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
javascript 显示当前系统时间代码
2009/12/28 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
详解Bootstrap插件
2016/04/25 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue将毫秒数转化为正常日期格式的实例
2018/09/16 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python过滤列表用法实例分析
2016/04/29 Python
浅谈python中的数字类型与处理工具
2017/08/02 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
Python简单实现查找一个字符串中最长不重复子串的方法
2018/03/26 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python多线程的退出控制实现
2020/08/10 Python
python 调用Google翻译接口的方法
2020/12/09 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
市场营销毕业生自荐信
2013/11/23 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
殡葬服务心得体会
2014/09/11 职场文书
国庆节标语大全
2014/10/08 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
唐山大地震的观后感
2015/06/05 职场文书
捐书仪式主持词
2015/07/04 职场文书
Oracle笔记
2021/04/05 Oracle
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL
使用CSS实现音波加载效果
2023/05/07 HTML / CSS