一、介紹說明
主要特點：
①在前端壓縮好要上傳的圖片可以更快的發送給后端，因此也特別適合在移動設備上使用。
②兼容IOS/Android，修復了IOS/Android某些版本已知的BUG。
③按需加載文件，僅需引入lrz.bundle.js文件，例如當檢測是IOS7的用戶，那么會自動異步再載入修復BUG的文件，而無需擔心浪費寶貴的帶寬開銷。
④原生JS編寫，不依賴例如jquery等第三方庫。
二、如何獲取
下載地址：
https://files.cnblogs.com/files/sunyuweb/lrz.bundle.js
<script src="./lrz.bundle.js"></script>
三、如何使用
方式1:圖片用於用戶上傳
<script src="./lrz.all.bundle.js"></script>(博客暫時沒有資源可以自行Google download)
這里加載的這個有個all，和上面地址的例子可能是不一樣。因為這個all的js是比較全的兼容android和ios。
如果您的圖片來自用戶拍攝或者上傳的，您需要一個input file來獲取圖片。
上傳圖片<input type="file" capture="camera" accept="image/*" name="logo" />
capture（捕獲的意思）表示調用相冊相機camera，錄音機video和攝像機audio。
accept 表示直接打開系統文件目錄。（其實html5的input:file標簽還支持一個multiple屬性，表示可以支持多選。加上這個multiple后，capture就沒啥用了，因為multiple是專門用來支持多選的。）
input type="file" 添加了 accept="image/*"屬性在Chrome和Safari等Webkit瀏覽器下卻出現了響應滯慢的問題，使得頁面彈出選擇文件的彈窗非常的慢6-10s，這是因為accept="image/*"會每一個文件都遍歷一次所有的”image/*”文件類型。
解決辦法是：刪掉它或者將 * 通配符，或者修改為指定的MIME類型：
<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg">
$(function(){
$('input[name=logo]').on('change', function(){
lrz(this.files[0], {width: 640}) //width:640這個代表的是圖片占得內存的大小,值越小,占內存越小
.then(function (rst) { //請求ajax把圖片地址傳過去
$.ajax({
url: site_url + 'api/user/updLogo',
type: 'post',
data: {img: rst.base64}, //rst.base64就是這個圖片的地址 base64字符串
dataType: 'json',
timeout: 200000,
error: doAjax.error,
success: doAjax.success,
});
})
.catch(function (err) { //捕獲錯誤，而且一旦出錯上面的then都不會執行 })
.always(function () { //無論成敗都會執行這里 });
});
})
<input onchange="upload()" type="file" capture="camera" />
接着通過change事件可以得到用戶選擇的圖片
function upload () {
lrz(this.files[0])
.then(function (rst) { // 處理成功會執行 })
.catch(function (err) { // 處理失敗會執行 })
.always(function () { // 不管是成功失敗，都會執行 });
});
方式2：如果圖片不是來自用戶上傳的，那么也可以直接傳入圖片路徑
lrz('./xxx/xx/x.png')
.then(function (rst) { // 處理成功會執行 })
.catch(function (err){ // 處理失敗會執行 })
.always(function () { // 不管是成功失敗，都會執行 });
四、后端處理
后端最終會收到前端發送的base64字符串，接着處理字符串為圖片即可。
前端生成的結果中有一個base64Len，這是字符串的長度，后端應該核對以確認是否提交完整。
五、兼容性
IE9以上及大部分非IE瀏覽器（chrome、微信什么的）
六、FAQ
有疑問請直接在 issues 中提問 :see_no_evil:
Q：有時拍攝完照片后，頁面自動刷新或閃退了。
A：雖然已作了優化處理，但內存似乎還是爆掉了，常見於低配android手機。
Q: 怎么批量上傳圖片?
A: 您可以自己寫個循環來傳入用戶多選的圖片，但在移動端上請勿這樣做，原因同上。
Q: 直接傳入圖片路徑的無法生成圖片
A: 可能是跨域的問題，具體請看CORS_enabled_image
Q: 想要商用可以嗎？
A: 沒問題，但請留意issue里已知的問題。