移動端使用localResizeIMG4壓縮圖片
移動h5開發(fā)避免不了上傳圖片，一般我們使用html自帶的控件input或者使用微信上傳API。但微信上傳API不是任何地方都可以使用的，使用html自帶的控件input上傳又免不了圖片體積太大，上傳不穩(wěn)定。localResizeIMG4就是為此而生的。
本文演示版本localResizeIMG 4.9.35。
特點
兼容IOS，Android，PC、自動按需加載文件
支持壓縮比例
支持原生JS、jQuery/Zepto
支持Promise特性
使用Base64
下載地址
localResizeIMG共有4個歷史版本，每個版本間使用方法可能不一樣。本文以最新穩(wěn)定版本localResizeIMG4為例。
https://github.com/think2011/localResizeIMG/archive/4.9.35.zip
如何使用
頁面引入
<script src="./dist/lrz.bundle.js"></script>
html
<input type="file" capture="camera" accept="image/*" name="logo" id="file">
capture="camera"可以出現(xiàn)拍照；
accept="image/*"僅接受圖片
通過change事件可以得到用戶選擇的圖片。
使用原生js
document.querySelector('input').addEventListener('change', function () {
// this.files[0] 是用戶選擇的文件
lrz(this.files[0], {width: 1024})
.then(function (rst) {
// 把處理的好的圖片給用戶看看唄（可選）
var img = new Image();
img.src = rst.base64; //base64字符串
img.onload = function () {
document.body.appendChild(img);
};
return rst;
})
.then(function (rst) {
// 這里該上傳給后端啦
/* ==================================================== */
// 原生ajax上傳代碼，所以看起來特別多，但絕對能用
// 其他框架，例如jQuery處理formData略有不同，請自行g(shù)oogle，baidu。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:5000/');
xhr.onload = function () {
if (xhr.status === 200) {
// 上傳成功
} else {
// 處理其他情況
}
};
xhr.onerror = function () {
// 處理錯誤
};
xhr.upload.onprogress = function (e) {
// 上傳進度
var percentComplete = ((e.loaded / e.total) || 0) * 100;
};
// 添加參數(shù)
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他參數(shù)');
// 觸發(fā)上傳
xhr.send(rst.formData);
/* ==================================================== */
return rst;
})
.catch(function (err) {
// 萬一出錯了，這里可以捕捉到錯誤信息
// 而且以上的then都不會執(zhí)行
alert(err);
})
.always(function () {
// 不管是成功失敗，這里都會執(zhí)行
});
});
返回的rst對象數(shù)據(jù)示例：
{origin: File, base64: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD…iigAooooAKKKKACiiigAooooAKKKKACiiigAooooAKKKKAP/Z", base64Len: 1507}
origin: File
lastModified: 1442482311173
lastModifiedDate: Thu Sep 17 2015 17:31:51 GMT+0800 (中國標(biāo)準(zhǔn)時間)
name: "upload-add.png"
size: 291
type: "image/png"
webkitRelativePath: ""
其中base64屬性是帶圖片類型的base64編碼，可直接用于img標(biāo)簽的src。如果后端需要將這個屬性值轉(zhuǎn)為圖片保存，就要先去除圖片類型，文章后面有示例。之前的版本localResizeIMG1會同時返回result.base64和result.clearBase64(不帶圖片類型的編碼)。
使用jQuery/Zepto
$(function(){
$('input[name=logo]').on('change', function(){
lrz(this.files[0], {width: 640})
.then(function (rst) {
$.ajax({
url: site_url + 'api/user/updLogo',
type: 'post',
data: {img: rst.base64},
dataType: 'json',
timeout: 200000,
error: doAjax.error,
success: doAjax.success,
});
})
.catch(function (err) {
})
.always(function () {
});
});
});
如果您的圖片不是來自用戶上傳的，那么也可以直接傳入圖片路徑：
lrz('./xxx/xx/x.png')
.then(function (rst) {
// 處理成功會執(zhí)行
})
.catch(function (err){
// 處理失敗會執(zhí)行
})
.always(function () {
// 不管是成功失敗，都會執(zhí)行
});
后端處理（PHP）
$base64_image_content = $_POST['img'];
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2]; //jpeg
//去除圖片類型
$img = base64_decode(str_replace($result[1], '', $base64_image_content)); //返回文件流
}
//使用AliOSS上傳
$url = OSS::upload($img, $type);
其中$result內(nèi)容：
Array ( [0] => data:image/jpeg;base64, [1] => data:image/jpeg;base64, [2] => jpeg )
完整例子（HTML+PHP）
請在服務(wù)器環(huán)境(如LAMP)運行。
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>移動端使用localResizeIMG4壓縮圖片</title>
<script src="./dist/lrz.bundle.js"></script>
<script src="./dist/zepto.min.js"></script>
</head>
<body>
上傳圖片<input type="file" capture="camera" accept="image/*" name="logo" id="file">
<script>
$(function(){
$('input[name=logo]').on('change', function(){
lrz(this.files[0], {width: 640})
.then(function (rst) {
console.log(rst);
$.ajax({
url: 'upload.php',
type: 'post',
data: {img: rst.base64},
dataType: 'json',
timeout: 200000,
success: function (response) {
if (response.ecd == '0') {
alert('成功');
return true;
} else {
return alert(response.msg);
}
},
error: function (jqXHR, textStatus, errorThrown) {
if (textStatus == 'timeout') {
a_info_alert('請求超時');
return false;
}
alert(jqXHR.responseText);
}
});
})
.catch(function (err) {
})
.always(function () {
});
});
});
</script>
</body>
upload.php
<?php
$base64_image_content = $_POST['img'];
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2]; //jpeg
$img = base64_decode(str_replace($result[1], '', $base64_image_content)); //返回文件流
}
//var_dump($_POST); //string(1507) "data:image/jpeg;base64,/9j/4AAQSkZJR...
//var_dump($result); //"data:image/jpeg;base64," "data:image/jpeg;base64," "jpeg"
//var_dump($img); //返回的是資源，直接使用<img src="$img" />可以顯示圖片
/* 輸出到文件 */
//方式一：直接使用file_put_contents
$tmp_file = time(). '.' .$type;
//file_put_contents($tmp_file, $img); //可以直接將文件流保存為本地圖片
//方式二：先轉(zhuǎn)換為GD圖像資源，再生成文件或顯示輸出
$im = imagecreatefromstring($img); //resource(2) of type (gd) 圖像資源
imagejpeg ($im, $tmp_file); //圖像流（image）以 JPEG 格式輸出到標(biāo)準(zhǔn)輸出(瀏覽器或者文件)
//或者使用AliOSS上傳
//$url = OSS::upload($img, $type);
return ajaxReturn($tmp_file);
function ajaxReturn($data = array(), $code = 0, $msg = '成功'){
$result = array(
'result' => $data,
'ecd' => $code,
'msg' => $msg,
);
echo json_encode($result);
exit;
}
示例代碼在github上：https://github.com/52fhy/localResizeIMG4/tree/master/lrz
參數(shù)文檔
參數(shù)
lrz(file, [options]);
- file 通過 input:file 得到的文件，或者直接傳入圖片路徑
- [options] 這個參數(shù)允許忽略
- width {Number} 圖片最大不超過的寬度，默認(rèn)為原圖寬度，高度不設(shè)時會適應(yīng)寬度。
- height {Number} 同上
- quality {Number} 圖片壓縮質(zhì)量，取值 0 - 1，默認(rèn)為0.7
- fieldName {String} 后端接收的字段名，默認(rèn)：file
返回結(jié)果
返回值是一個promise對象
- then(rst)
- rst.formData 后端可處理的數(shù)據(jù)
- rst.file 壓縮后的file對象（默認(rèn)已經(jīng)丟在rst.formData有一份了），需要注意的是如果壓縮率太低的話，這個會是原始的file對象
- rst.fileLen 生成后的圖片的大小，后端可以通過此值來校驗是否傳輸完整
- rst.base64 生成后的圖片base64，后端可以處理此字符串為圖片，也直接用于img.src = base64
- rst.base64Len 生成后的base64的大小，后端可以通過此值來校驗是否傳輸完整 (如果采用base64上傳方式)
- rst.origin 也就是原始的file對象，里面存了一些原始文件的信息，例如大小，日期等。
- catch(err)
- always()
lrz的歷史
lrz1，基于jquery，使用需要引用jquery.js、localResizeIMG.js、patch/mobileBUGFix.mini.js（客戶端）。
lrz2，基于原生js，卻是用coffeescript寫的 Orz, 有UI，存在已知BUG。
lrz3，基于原生js，提供pc & mobile版本，修復(fù)BUG和疑問，再一次重構(gòu)了代碼，移除了UI，僅作為純粹的工具，方便二次開發(fā)。
lrz4，基于原生js，已升級到穩(wěn)定版本，推薦使用。
lrz原理
基本原理是通過canvas渲染圖片，再通過 toDataURL 方法壓縮保存為base64字符串（能夠編譯為jpg格式的圖片）。
詳見WIKI
如何自定義上傳按鈕
默認(rèn)的上傳按鈕不好看，而且安卓和iPhone也不一樣。需要進行統(tǒng)一：
原理就是使用背景圖，把input本身透明度設(shè)置為0.
<div style="background:url(images/upload-add.png) no-repeat right/40px;"> <input type="file" capture="camera" accept="image/*" name="logo" id="file" class="selectinput" style="width:100%;opacity:.01"> </div>
1、php讀取和保存base64編碼的圖片內(nèi)容 - fxhover的個人空間 - 開源中國社區(qū)
2、參數(shù)文檔 · think2011/localResizeIMG Wiki
https://github.com/think2011/localResizeIMG/wiki
3、think2011/localResizeIMG: 前端本地客戶端壓縮圖片，兼容IOS，Android，PC、自動按需加載文件
https://github.com/think2011/localResizeIMG
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實現(xiàn)三張圖（文）片一起切換的banner焦點圖
這篇文章主要介紹了js實現(xiàn)三張圖（文）片一起切換的banner焦點圖，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法
這篇文章主要介紹了ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法,需要的朋友可以參考下2014-06-06
微信小程序?qū)嵺`之動態(tài)控制組件的顯示/隱藏功能
這篇文章主要介紹了微信小程序?qū)嵺`之動態(tài)控制組件的顯示/隱藏功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
返回unix時間戳所對應(yīng)的具體時間的代碼2010-07-07
顯示一定時間后消失，刷新之后清空變量值，重新開始記錄鍵值。 程序的原理就是檢測按鍵的鍵值，當(dāng)達到預(yù)定條件時執(zhí)行規(guī)定的函數(shù)。2009-09-09
這篇文章主要介紹了JS實現(xiàn)圖片預(yù)覽的兩種方式,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-12-12
JavaScript利用生成器函數(shù)實現(xiàn)優(yōu)雅處理異步任務(wù)流
Generators?是?JavaScript?中的一種特殊函數(shù)，它們可以暫停執(zhí)行并根據(jù)需要生成多個值,本文將詳細介紹?generators?的作用、用法以及與其他語言特性的配合使用,希望對大家有所幫助2023-07-07
本篇文章主要介紹了JavaScript中瀏覽器兼容問題的寫法小議，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-12-12
在使用了母板頁面的項目中 使用js獲取其中的標(biāo)簽id 需要先加載到本地看看他在瀏覽時候的頁面源代碼然后確定他的id2010-04-04