JS實(shí)現(xiàn)壓縮上傳圖片base64長(zhǎng)度功能

這篇文章主要介紹了js實(shí)現(xiàn)壓縮上傳圖片base64長(zhǎng)度功能,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

im發(fā)送圖片，現(xiàn)將圖片壓縮再上傳

1) 調(diào)用 FileReader 的 reader.readAsDataURL(img); 方法, 在其onload事件中, 將用戶選擇的圖片讀入 Image對(duì)象.

2) 在image對(duì)象的 onload 事件中, 通過(guò) canvas 的 canvas.getContext('2d') 的 drawImage 方法, 將Image 改變大小繪制到canvas上.

3) 通過(guò) canvas.toDataURL("image/jpeg", 1); 方法, 將圖片變成base64字符串, 放到send_image_value

toDataURL

canvas.toDataURL(type,?encoderOptions);　

返回值

包含 data URI 的DOMString

type

圖片格式，默認(rèn)為 image/png

encoderOptions

在指定圖片格式為 image/jpeg 或 image/webp的情況下，可以從 0 到 1 的區(qū)間內(nèi)選擇圖片的質(zhì)量。如果超出取值范圍，將會(huì)使用默認(rèn)值 0.92。其他參數(shù)會(huì)被忽略。

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"?>

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)?{
//讀取成功，顯示到頁(yè)面并發(fā)送到服務(wù)器
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("");
}
}　　

開(kāi)始時(shí)，toDataURL獲取的值是data:,

$("#send_image_value").val(image_base64);
send_msg();

這兩句寫(xiě)在

reader.onload方法的最下面這就導(dǎo)致圖片并沒(méi)有壓縮

因?yàn)閕mg.onload還沒(méi)執(zhí)行完

發(fā)送的還是原來(lái)的圖片

在調(diào)整后就可以實(shí)現(xiàn)圖片的壓縮了

參考的文章:

• Nodejs實(shí)現(xiàn)圖片上傳、壓縮預(yù)覽、定時(shí)刪除功能

• 基于vue+axios+lrz.js微信端圖片壓縮上傳方法

• JS和Canvas實(shí)現(xiàn)圖片的預(yù)覽壓縮和上傳功能

• js實(shí)現(xiàn)上傳并壓縮圖片效果

• JS移動(dòng)端/H5同時(shí)選擇多張圖片上傳并使用canvas壓縮圖片

• Vue.js 2.0 移動(dòng)端拍照壓縮圖片上傳預(yù)覽功能

• HTML5 JS壓縮圖片并獲取圖片BASE64編碼上傳

文章同步發(fā)布：?https://www.geek-share.com/detail/2786432536.html