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

2023-08-05 02:38:05 325

这篇文章主要介绍了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);

返回值

包含dataURI的DOMString

type

图片格式，默认为image/png

encoderOptions

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

html

functionimgChange(e){
//检查是否有文件被选中
if(e.files.length!=0){
varfile=e.files[0],
fileType=file.type,
reader=newFileReader();
if(!reader){
e.value='';
return;
};
varsize=file.size;
varmax_size=2*1024*1024;
if(size>max_size){
e.value='';
$("#send_alert").html('fileistoolarge(>2M)');
return;
}
$("#showLoadingimg").show();
reader.onload=function(e){
//读取成功，显示到页面并发送到服务器
e.value='';
varorg_img=e.target.result;
varimage_base64=org_img;
if(size>1024*80){//>80K的
varimg=newImage();
img.src=org_img;
img.onload=function(){
varscale=1;
if(this.width>300||this.height>300){
if(this.width>this.height){
scale=300/this.width;
}else{
scale=300/this.height;
}
}
varcanvas=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);
vartmp_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);
}
}
/**
*为将图片赋值给消息
**/
functionimg_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还没执行完

发送的还是原来的图片

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐