JS實現壓縮上傳圖片base64長度功能

這篇文章主要介紹了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"?>

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還沒執行完

發送的還是原來的圖片

在調整后就可以實現圖片的壓縮了

參考的文章:

• Nodejs實現圖片上傳、壓縮預覽、定時刪除功能

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

• JS和Canvas實現圖片的預覽壓縮和上傳功能

• js實現上傳并壓縮圖片效果

• JS移動端/H5同時選擇多張圖片上傳并使用canvas壓縮圖片

• Vue.js 2.0 移動端拍照壓縮圖片上傳預覽功能

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

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