移動(dòng)端使用localResizeIMG4壓縮圖片

移動(dòng)h6開發(fā)避免不了上傳圖片，一般我們使用html自帶的控件input或者使用微信上傳API。但微信上傳API不是任何地方都可以使用的，使用html自帶的控件input上傳又免不了圖片體積太大，上傳不穩(wěn)定。localResizeIMG4就是為此而生的。

創(chuàng)新互聯(lián)專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、溫州網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5頁(yè)面制作、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為溫州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

本文演示版本localResizeIMG 4.9.35。

特點(diǎn)

兼容IOS，Android，PC、自動(dòng)按需加載文件
支持壓縮比例
支持原生JS、jQuery/Zepto
支持Promise特性
使用Base64

下載地址

localResizeIMG共有4個(gè)歷史版本，每個(gè)版本間使用方法可能不一樣。本文以最新穩(wěn)定版本localResizeIMG4為例。

https://github.com/think2011/localResizeIMG/archive/4.9.35.zip

如何使用

頁(yè)面引入

<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/*"僅接受圖片

通過(guò)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上傳代碼，所以看起來(lái)特別多，但絕對(duì)能用
   // 其他框架，例如jQuery處理formData略有不同，請(qǐng)自行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 () {
    // 處理錯(cuò)誤
   };

   xhr.upload.onprogress = function (e) {
    // 上傳進(jìn)度
    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) {
   // 萬(wàn)一出錯(cuò)了，這里可以捕捉到錯(cuò)誤信息
   // 而且以上的then都不會(huì)執(zhí)行

   alert(err);
  })

  .always(function () {
   // 不管是成功失敗，這里都會(huì)執(zhí)行
  });
});

返回的rst對(duì)象數(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 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
name: "upload-add.png"
size: 291
type: "image/png"
webkitRelativePath: ""

其中base64屬性是帶圖片類型的base64編碼，可直接用于img標(biāo)簽的src。如果后端需要將這個(gè)屬性值轉(zhuǎn)為圖片保存，就要先去除圖片類型，文章后面有示例。之前的版本localResizeIMG1會(huì)同時(shí)返回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 () {

   });
 });
});

如果您的圖片不是來(lái)自用戶上傳的，那么也可以直接傳入圖片路徑：

lrz('./xxx/xx/x.png')
  .then(function (rst) {
   // 處理成功會(huì)執(zhí)行
  })
  .catch(function (err){
   // 處理失敗會(huì)執(zhí)行
  })
  .always(function () {
   // 不管是成功失敗，都會(huì)執(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）

請(qǐng)?jiān)?a title="服務(wù)器" target="_blank" >服務(wù)器環(huán)境(如LAMP)運(yùn)行。

index.html

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <title>移動(dòng)端使用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('請(qǐng)求超時(shí)');

        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 通過(guò) input:file 得到的文件，或者直接傳入圖片路徑
  • [options] 這個(gè)參數(shù)允許忽略
  • width {Number} 圖片最大不超過(guò)的寬度，默認(rèn)為原圖寬度，高度不設(shè)時(shí)會(huì)適應(yīng)寬度。
  • height {Number} 同上
  • quality {Number} 圖片壓縮質(zhì)量，取值 0 - 1，默認(rèn)為0.7
  • fieldName {String} 后端接收的字段名，默認(rèn)：file

返回結(jié)果

返回值是一個(gè)promise對(duì)象

  • then(rst)
  • rst.formData 后端可處理的數(shù)據(jù)
  • rst.file 壓縮后的file對(duì)象（默認(rèn)已經(jīng)丟在rst.formData有一份了），需要注意的是如果壓縮率太低的話，這個(gè)會(huì)是原始的file對(duì)象
  • rst.fileLen 生成后的圖片的大小，后端可以通過(guò)此值來(lái)校驗(yàn)是否傳輸完整
  • rst.base64 生成后的圖片base64，后端可以處理此字符串為圖片，也直接用于img.src = base64
  • rst.base64Len 生成后的base64的大小，后端可以通過(guò)此值來(lái)校驗(yàn)是否傳輸完整 (如果采用base64上傳方式)
  • rst.origin 也就是原始的file對(duì)象，里面存了一些原始文件的信息，例如大小，日期等。
  • 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和疑問(wèn)，再一次重構(gòu)了代碼，移除了UI，僅作為純粹的工具，方便二次開發(fā)。
lrz4，基于原生js，已升級(jí)到穩(wěn)定版本，推薦使用。
lrz原理

基本原理是通過(guò)canvas渲染圖片，再通過(guò) toDataURL 方法壓縮保存為base64字符串（能夠編譯為jpg格式的圖片）。

詳見WIKI

如何自定義上傳按鈕

默認(rèn)的上傳按鈕不好看，而且安卓和iPhone也不一樣。需要進(jìn)行統(tǒng)一：

原理就是使用背景圖，把input本身透明度設(shè)置為0.

<div > 
 <input type="file" capture="camera" accept="image/*" name="logo" id="file" class="selectinput" >
</div>

1、php讀取和保存base64編碼的圖片內(nèi)容 - fxhover的個(gè)人空間 - 開源中國(guó)社區(qū)

2、參數(shù)文檔 · think2011/localResizeIMG Wiki
https://github.com/think2011/localResizeIMG/wiki

3、think2011/localResizeIMG: 前端本地客戶端壓縮圖片，兼容IOS，Android，PC、自動(dòng)按需加載文件
https://github.com/think2011/localResizeIMG

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：移動(dòng)端使用localResizeIMG4壓縮圖片
網(wǎng)頁(yè)路徑：http://muchs.cn/article12/pisigc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、搜索引擎優(yōu)化、云服務(wù)器、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)