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
Mar 09 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
Oct 17 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
javascript 回到顶部效果的实现代码
Feb 17 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
使用three.js 画渐变的直线
Jun 05 Javascript
vue component组件使用方法详解
Jul 14 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
Vue 实现从小到大的横向滑动效果详解
Oct 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
Ubuntu下安装PHP的mongodb扩展操作命令
2015/07/04 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
Laravel5框架自定义错误页面配置操作示例
2019/04/17 PHP
JavaScript获取Url里的参数
2014/12/18 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
javascript瀑布流布局实现方法详解
2016/02/17 Javascript
BootStrap中Table分页插件使用详解
2016/10/09 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
AngularJS入门教程一:路由用法初探
2017/05/27 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
2018/03/08 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
详解Python if-elif-else知识点
2018/06/11 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
DIY手工制作经营店创业计划书
2014/02/01 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
合同协议书格式
2014/04/18 职场文书
关于运动会的广播稿50字
2014/10/17 职场文书
初中毕业感言300字
2015/07/31 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
解决spring.thymeleaf.cache=false不起作用的问题
2022/06/10 Java/Android