JS實(shí)現(xiàn)壓縮上傳圖片base64長(zhǎng)度功能
這篇文章主要介紹了js實(shí)現(xiàn)壓縮上傳圖片base64長(zhǎng)度功能,文中通過示例代碼介紹的非常詳細(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 事件中, 通過 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
圖片格式，默認(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" 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) {
//讀取成功，顯示到頁(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("");
}
}
開始時(shí)，toDataURL獲取的值是data:,
$("#send_image_value").val(image_base64);
send_msg();
這兩句寫在
reader.onload方法的最下面這就導(dǎo)致圖片并沒有壓縮
因?yàn)閕mg.onload還沒執(zhí)行完
發(fā)送的還是原來(lái)的圖片
在調(diào)整后就可以實(shí)現(xiàn)圖片的壓縮了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
table對(duì)象中的insertRow與deleteRow使用示例
本文為大家介紹下table對(duì)象insertRow deleteRow的使用示例，適合新手朋友們2014-01-01
如何基于webRTC實(shí)現(xiàn)人臉識(shí)別功能
WebRTC技術(shù)包含了音視頻編解碼技術(shù)、傳輸技術(shù)、流媒體服務(wù)器技術(shù)等,涵蓋了音視頻處理和傳輸?shù)姆椒矫婷?下面這篇文章主要給大家介紹了關(guān)于如何基于webRTC實(shí)現(xiàn)人臉識(shí)別的相關(guān)資料,需要的朋友可以參考下2022-12-12
uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法
在uni-app中彈窗的用途很常見,比如商品規(guī)格選取、廣告彈窗等,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序與H5的彈窗滾動(dòng)穿透解決方法,需要的朋友可以參考下2023-01-01
基于Web Audio API實(shí)現(xiàn)音頻可視化效果
這篇文章主要介紹了基于Web Audio API實(shí)現(xiàn)音頻可視化效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
可以檢驗(yàn)雙色球是否中獎(jiǎng)的js2008-04-04
支持ie與FireFox的剪切板代碼，包括讀取與寫入剪切板的實(shí)現(xiàn)代碼。2009-09-09
Bootstrap編寫一個(gè)兼容主流瀏覽器的受眾門戶式風(fēng)格頁(yè)面
這篇文章主要介紹了Bootstrap編寫一個(gè)兼容IE8、谷歌等主流瀏覽器的受眾門戶式風(fēng)格頁(yè)面，感興趣的小伙伴們可以參考一下2016-07-07
本文代碼使用 JavaScript。 一些同學(xué)對(duì)遞歸的理解還停留在“是一種求階乘比循環(huán)低效的方法”。但其實(shí)遞歸和循環(huán)處理的問題是不同。拿“遍歷數(shù)組”這個(gè)問題來(lái)說(shuō)：循環(huán)適合同一維度（單層長(zhǎng)度不限）上的遍歷，而遞歸則適合跨維度（層數(shù)不限）的遍歷。2013-02-02
這篇文章主要給大家介紹了關(guān)于JavaScript中事件與異常捕獲的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件（可帶文本框）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12