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还没执行完

发送的还是原来的图片

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

js压缩上传图片base64长度的更多相关文章

  1. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  2. js压缩上传图片

    初学有不当之处,请多多指点, <body> <div class="cc"> <input type="file" id=&quo ...

  3. JS实现图片base64转blob对象,压缩图片,预览图片,图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  4. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  5. java 七牛上传图片到服务器(采用的html5 压缩 传输base64方式)

    //html 页面如下<div class="form-group"> <label class="col-sm-2 control-label&quo ...

  6. 图片纯前端JS压缩的实现

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  7. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  8. js压缩、混淆和加密

    最近看到有些论坛在讨论js压缩.混淆和加密的问题,特意找了些资料看了下,现在总结一下: 1.关于三者的定义与区别 压缩:删除 Javascript 代码中所有注释.跳格符号.换行符号及无用的空格,从而 ...

  9. 图片压缩(js压缩,底部有vue压缩图片依赖使用的教程链接)

    directTurnIntoBase64(fileObj, callback) { var r = new FileReader(); // 转成base64 r.onload = function( ...

随机推荐

  1. iOS中 语音识别功能/语音转文字教程具体解释 韩俊强的博客

    原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702 前言:近期研究了一下语音识别,从百度语音识别到讯飞语音识别:首先说一下个人 ...

  2. 使用jquery的$.ajax向服务端传递中文,避免乱码的解决办法!

    在js里,对中文使用下面的方法 encodeURIComponent(var) 函数 就ok了!

  3. Netty4.x中文教程系列(二) Hello World !<转>

    在中国程序界.我们都是学着Hello World !慢慢成长起来的.逐渐从一无所知到熟悉精通的. 第二章就从Hello World 开始讲述Netty的中文教程. 首先创建一个Java项目.引入一个N ...

  4. 9g10在nandflash扇区的分配地址

  5. Mysql5.7主主互备安装配置

    一.安装说明 ======================================================================================= 环境:   ...

  6. Android训练课程(Android Training) - 构建你的第一个应用

    本文翻译自:https://developer.android.com/training/basics/firstapp/index.html 构建你的第一个应用(app) 欢迎来到安卓开发! 这个课 ...

  7. 两个Map融合

    package com.thunisoft.maybee.engine.utils; import java.util.HashMap; import java.util.Map; /** * Map ...

  8. Eclipse配置方法注释模板

    Java-->Code Style-->Code Templates-->Comments

  9. 解决Eclipse闪退问题的方法总结

    1.在C:/WINDOWS/system32 系统文件夹中ctrl+F 然后搜索java.exe,如果存在java.exe, javaw.exe etc.全部删除. 2.内存不足,打开Eclipse目 ...

  10. Java设计模式(16)中介模式(Mediator模式)

    Mediator定义:用一个中介对象来封装一系列关于对象交互行为. 为何使用Mediator模式/中介模式 各个对象之间的交互操作非常多,每个对象的行为操作都依赖彼此对方,修改一个对象的行为,同时会涉 ...