1. 程式人生 > >移動端壓縮圖片。上傳獲取圖片並壓縮。lrz.all.bundle.js外掛。 accept="image/*"載入慢的問題

移動端壓縮圖片。上傳獲取圖片並壓縮。lrz.all.bundle.js外掛。 accept="image/*"載入慢的問題

檢視下載地址:http://www.cnblogs.com/52fhy/p/5355601.html

檢視input[type='file']的圖片路徑。在我的另一篇部落格:http://blog.csdn.net/qq_33769914/article/details/54705820

而這篇文章可以說是綜合性的,用了這個外掛方法就也是可以獲取圖片路徑的,並且還壓縮了。所以這樣就淘汰原來方法。更加好啦。

希望在上傳的時候獲取圖片並壓縮他,之後上傳至伺服器。

<script src="./dist/lrz.all.bundle.js"></script> //這裡載入的這個有個all,和上面地址的例子可能是不一樣。因為
這個all的js是比較全的相容android和ios的啦。

上傳圖片<input type="file" capture="camera" accept="image/*" name="logo" />



capture(捕獲的意思)表示呼叫相簿相機camera,錄音機video和攝像機audio
accept 表示,直接開啟系統檔案目錄。(其實html5的input:file標籤還支援一個multiple屬性,表示可以支援多選。加上這個multiple後,capture就沒啥用了,因為multiple是專門yong用來支援多選的。)


但是!!!!

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 () { //無論成敗都會執行這裡 }); }); })

如果您的圖片不是來自使用者上傳的,那麼也可以直接傳入圖片路徑:

lrz('./xxx/xx/x.png')
        .then(function (rst) {
            // 處理成功會執行
        })
        .catch(function (err){
            // 處理失敗會執行
        })
        .always(function () {
            // 不管是成功失敗,都會執行
        });