[vue與h5+]使用h5+進行拍照或圖片上傳壓縮功能合並

// 頁面:拍照和從相冊選擇
// 開發者:糖羽仙
//說明:針對h5+中的拍照和從相冊選擇上傳進行默認壓縮處理,圖片使用默認直接壓縮
//--------plus相機拍攝
let camera = (success, error, zipOptions, cameraOptions) => {
  zipOptions = zipOptions ? zipOptions : {};
  cameraOptions = cameraOptions ? cameraOptions : {};
  plus.camera.getCamera().captureImage(
    function(path) {
      zipOptions.src = "file://" + plus.io.convertLocalFileSystemURL(path);
      if (zipOptions.type !== false) {
        imgZip(
          zipOptions,
          function(event) {
            success(event.target);
          },
          function(err) {
            error(err);
          }
        );
      } else {
        success(zipOptions.src);
      }
    },
    function(err) {
      error(err);
    },
    cameraOptions
  );
};
//--------plus相冊上傳
let gallery = (success, error, zipOptions, galleryOptions) => {
  zipOptions = zipOptions ? zipOptions : {};
  galleryOptions = galleryOptions ? galleryOptions : {};
  galleryOptions.filter = galleryOptions.filter
    ? galleryOptions.filter
    : "image";
  let imgList = [];
  galleryOptions.system = galleryOptions.system ? galleryOptions.system : false;
  galleryOptions.multiple = galleryOptions.multiple
    ? galleryOptions.multiple
    : false;
  plus.gallery.pick(
    function(event) {
      if (galleryOptions.multiple !== false) {
        imgList = event.files;
      } else {
        imgList.push(event);
      }
      if (zipOptions.type !== false && galleryOptions.filter === "image") {
        recursionImgZip(
          imgList,
          zipOptions,
          function(event) {
            if (galleryOptions.multiple !== false) {
              success(event);
            } else {
              success(event[0]);
            }
          },
          function(err) {
            error(err);
          }
        );
      } else {
        if (galleryOptions.multiple !== false) {
          success(imgList);
        } else {
          success(imgList[0]);
        }
      }
    },
    function(err) {
      error(err);
    },
    galleryOptions
  );
};

//---------plus圖片批量壓縮遞歸
let recursionImgZip = (imgList, zipOptions, success, error, imgZipList, i) => {
  i = i ? i : 0;
  imgZipList = imgZipList ? imgZipList : [];
  zipOptions.src = imgList[i];
  if (i <= imgList.length - 1) {
    imgZip(
      zipOptions,
      function(event) {
        console.log("壓縮后大小是" + event.size / 1024 + "kb"); //--文件大小
        imgZipList.push(event.target);
        recursionImgZip(imgList, zipOptions, success, error, imgZipList, i + 1);
      },
      function(err) {
        error(err);
      }
    );
  } else {
    success(imgZipList);
  }
};
//---------plus圖片壓縮
let imgZip = (zipOptions, success, error) => {
  zipOptions.size = zipOptions.size ? zipOptions.size : 1025;
  zipOptions.quality = zipOptions.quality ? zipOptions.quality : 1;
  plus.io.resolveLocalFileSystemURL(
    zipOptions.src,
    function(entry) {
      //--調用IO文件文件管理系統
      entry.file(function(file) {
        console.log("文件大小是" + file.size / 1024 + "kb"); //--文件大小
        if (zipOptions.size < file.size / 1024) {
          plus.zip.compressImage(
            zipOptions,
            function(event) {
              success(event);
            },
            function(err) {
              error(err);
            }
          );
        } else {
          success({
            target: zipOptions.src,
            size: file.size
          });
        }
      });
    },
    function(e) {
      error(e);
    }
  );
};
export { camera, gallery, test };

使用文檔:

拍照或相冊上傳文檔

camera

拍照上傳並壓縮

void camera(successCB, errorCB,zipOptions, cameraOptions);

說明：

可用於調用相機進行拍照,並對拍照后的圖片質量壓縮、大小縮放、方向旋轉、區域裁剪、格式轉換等。

參數：

• successCB: 可選 
  圖片壓縮轉換操作成功回調，操作成功時調用。

說明：

調用攝像頭拍照並壓縮后成功的回調函數，在拍照操作成功時調用，用於返回圖片文件的路徑。

參數：

• capturedFile: ( String ) 必選 拍照並壓縮后保存的文件路徑

 

• errorCB:  可選 
  圖片壓縮轉換操作失敗回調，操作失敗時調用。
• zipOptions:  可選 
  圖片壓縮轉換的參數

JSON對象，配置圖片壓縮轉換的參數

說明：

設置width/height屬性則表示需對圖片進行縮放轉換操作； 設置rotate屬性則表示需對圖片進行旋轉轉換操作； 設置clip屬性則表示需對圖片進行裁剪轉換操作； 如同時設置了多個轉換操作，則按縮放、旋轉、裁剪順序進行操作。

屬性：

• type: (Boolean 類型 )是否進行壓縮

true表示進行壓縮，false表示不壓縮，默認值是true。

 

• dst: (String 類型 )壓縮轉換目標圖片的路徑

支持以下圖片路徑： 絕對路徑 - 系統絕對路徑，如Android平台"/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/ａ.jpg"，iOS平台"/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png"； 相對路徑URL(RelativeURL) - 以"_"開頭的相對路徑，如"_doc/b.jpg"、"_documents/c.jpg"、"_downloads/d.jpg"，注意不支持"_www"開頭的路徑； 本地路徑URL - 以“file://”開頭，后面跟隨系統絕對路徑。 注意：如果設置的路徑無權限訪問，則返回失敗。

 

• overwrite: (Boolean 類型 )覆蓋生成新文件

僅在dst制定的路徑文件存在時有效： true表示覆蓋存在的文件； false表示不覆蓋，如果文件存在，則返回失敗。 默認值為false。

 

• format: (String 類型 )壓縮轉換后的圖片格式

支持"jpg"、"png",如果未指定則使用源圖片的格式。

 

• quality: (Number 類型 )壓縮圖片的質量

取值范圍為1-100，1表示使用最低的圖片質量（轉換后的圖片文件最小）、100表示使用最高的圖片質量（轉換后的圖片文件最大）； 默認值為1。

 

• width: (String 類型 )縮放圖片的寬度

支持像素值（如"100px"）、百分比（如"50%"）、自動計算（如"auto"，即根據height與源圖高的縮放比例計算，若未設置height則使用源圖高度）； 默認值為"auto"。 注意：若設置了width屬性值不合法（如"0px"），則不對圖片進行縮放操作。

 

• height: (String 類型 )縮放圖片的高度

支持像素值（如"100px"）、百分比（如"50%"）、自動計算（如"auto"，即根據width與源圖寬的縮放比例計算，若未設置width則使用源圖高度）； 默認值為"auto"。 注意：若設置了height屬性值不合法（如"0px"），則不對圖片進行縮放操作。

 

• rotate: (Number 類型 )旋轉圖片的角度

支持值：90-表示旋轉90度；180-表示旋轉180度；270-表示旋轉270度。 注意：若設置rotate屬性值不合法，則不對圖片進行旋轉操作。

 

• clip: (ClipImageOptions 類型 )裁剪圖片的區域

值參考ClipImageOptions定義，若設置clip屬性值不合法，則不對圖片進行裁剪操作。

 

 

• cameraOptions: 可選 
  圖片壓縮轉換的參數

JSON對象，調用攝像頭的參數

屬性：

• filename: (String 類型 )拍照文件保存的路徑

可設置具體文件名（如"_doc/camera/a.jpg"）；也可只設置路徑，以"/"結尾則表明是路徑（如"_doc/camera/"）。 如未設置文件名稱或設置的文件名沖突則文件名由程序程序自動生成。

• index: (String 類型 )拍照或攝像默認使用的攝像頭

拍照或攝像界面默認使用的攝像頭編號，1表示主攝像頭，2表示輔攝像頭。

 

平台支持

 

• Android - 2.2+ (不支持): 暫不支持設置默認使用的攝像頭，忽略此屬性值。打開拍攝界面后可操作切換。
• iOS - 4.3+ (支持)

 

• optimize: (Boolean 類型 )是否優化圖片

自動調整圖片的方向，在部分設備上可能出現圖片方向不正確的問題，此參數將配置是否自動調整圖片方向。 可取值： true - 自動調整圖片方向； false - 不調整。 默認值為true。 注意：自動調整圖片方向將消耗部分系統資源，可能會導致拍照后回調觸發時機延遲，將此值設置為false則可避免延遲問題。

 

平台支持

 

• Android - ALL (支持)
• iOS - ALL (不支持): 忽略此屬性。

 

• resolution: (String 類型 )拍照使用的分辨率

可通過Camera對象的supportedImageResolutions或supportedVideoResolutions獲取，如果設置的參數無效則使用系統默認值。

 

平台支持

 

• Android - 2.2+ (不支持): 忽略此屬性。
• iOS - 4.3+ (支持): 設置攝像的分辨率，分辨率越高越清晰，文件也越大。

 

• popover: (PopPosition 類型 )拍照或攝像界面彈出指示區域

對於大屏幕設備如iPad，拍照界面為彈出窗口，此時可通過此參數設置彈出窗口位置，其為JSON對象，格式如{top:"10px",left:"10px",width:"200px",height:"200px"}，默認彈出位置為屏幕居中。

 

平台支持

 

• Android - ALL (不支持): 忽略此屬性值
• iOS - 5.0+ (支持): 僅iPad設備支持此屬性，iPhone/iTouch上忽略此屬性值

 

 

返回值：

void : 無

 

 

gallery

拍照上傳並壓縮

void gallery(successCB, errorCB,zipOptions, galleryOptions);

說明：

可用於調用相冊選擇圖片,並對選擇后的圖片質量壓縮、大小縮放、方向旋轉、區域裁剪、格式轉換等。

參數：

• successCB: 可選 
  圖片壓縮轉換操作成功回調，操作成功時調用。

說明：

調用調用相冊選擇圖片並壓縮后成功的回調函數，在選擇相冊成功時調用，用於返回圖片文件的路徑或一組包含文件路徑的數組。

參數：

• event: ( String or Array ) 必選 從相冊選擇后的圖片壓縮后的路徑信息,當galleryOptions中的參數multiple值 為false時,返回圖片路徑信息,反之則返回數組,數組中包含多個圖片路徑.參數默認參數值為false

 

• errorCB:  可選 
  圖片壓縮轉換操作失敗回調，操作失敗時調用。
• zipOptions:  可選 
  圖片壓縮轉換的參數

JSON對象，配置圖片壓縮轉換的參數

說明：

設置width/height屬性則表示需對圖片進行縮放轉換操作； 設置rotate屬性則表示需對圖片進行旋轉轉換操作； 設置clip屬性則表示需對圖片進行裁剪轉換操作； 如同時設置了多個轉換操作，則按縮放、旋轉、裁剪順序進行操作。

屬性：

• type: (Boolean 類型 )是否進行壓縮

true表示進行壓縮，false表示不壓縮，默認值是true。

 

• dst: (String 類型 )壓縮轉換目標圖片的路徑

支持以下圖片路徑： 絕對路徑 - 系統絕對路徑，如Android平台"/storage/sdcard0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/ａ.jpg"，iOS平台"/var/mobile/Containers/Data/Application/757966CF-345C-4348-B07F-EEF83CF9A369/Library/Pandora/apps/HBuilder/doc/a.png"； 相對路徑URL(RelativeURL) - 以"_"開頭的相對路徑，如"_doc/b.jpg"、"_documents/c.jpg"、"_downloads/d.jpg"，注意不支持"_www"開頭的路徑； 本地路徑URL - 以“file://”開頭，后面跟隨系統絕對路徑。 注意：如果設置的路徑無權限訪問，則返回失敗。

 

• overwrite: (Boolean 類型 )覆蓋生成新文件

僅在dst制定的路徑文件存在時有效： true表示覆蓋存在的文件； false表示不覆蓋，如果文件存在，則返回失敗。 默認值為false。

 

• format: (String 類型 )壓縮轉換后的圖片格式

支持"jpg"、"png",如果未指定則使用源圖片的格式。

 

• quality: (Number 類型 )壓縮圖片的質量

取值范圍為1-100，1表示使用最低的圖片質量（轉換后的圖片文件最小）、100表示使用最高的圖片質量（轉換后的圖片文件最大）； 默認值為1。

 

• width: (String 類型 )縮放圖片的寬度

支持像素值（如"100px"）、百分比（如"50%"）、自動計算（如"auto"，即根據height與源圖高的縮放比例計算，若未設置height則使用源圖高度）； 默認值為"auto"。 注意：若設置了width屬性值不合法（如"0px"），則不對圖片進行縮放操作。

 

• height: (String 類型 )縮放圖片的高度

支持像素值（如"100px"）、百分比（如"50%"）、自動計算（如"auto"，即根據width與源圖寬的縮放比例計算，若未設置width則使用源圖高度）； 默認值為"auto"。 注意：若設置了height屬性值不合法（如"0px"），則不對圖片進行縮放操作。

 

• rotate: (Number 類型 )旋轉圖片的角度

支持值：90-表示旋轉90度；180-表示旋轉180度；270-表示旋轉270度。 注意：若設置rotate屬性值不合法，則不對圖片進行旋轉操作。

 

• clip: (ClipImageOptions 類型 )裁剪圖片的區域

值參考ClipImageOptions定義，若設置clip屬性值不合法，則不對圖片進行裁剪操作。

 

 

• galleryOptions: 可選 
  調用相冊參數

JSON對象，從相冊中選擇文件的參數

屬性：

• animation: (Boolean 類型 )是否顯示系統相冊文件選擇界面的動畫

可取值true、false，默認值為true。

 

平台支持

 

• Android - 2.2+ (不支持): 忽略此參數，無動畫效果。
• iOS - 4.3+ (支持): 支持動畫效果。

 

 

• filename: (String 類型 )選擇文件保存的路徑

某些系統不能直接使用系統相冊的路徑，這時需要將選擇的文件保存到應用可訪問的目錄中，可通過此參數設置保存文件的路徑。 如果路徑中包括文件后綴名稱，則表明指定文件路徑及名稱，否則僅指定文件保存目錄，文件名稱自動生成。

 

平台支持

 

• Android - 2.2+ (不支持): 直接返回系統相冊中的文件路徑，忽略此參數。
• iOS - 4.3+ (支持): 如果未設置則默認使用應用臨時目錄（系統在磁盤控件不足時自動清理）。 如果希望將文件拷貝到應用沙箱目錄中，可通過此參數配置目標路徑（如"_doc/gallery/"）。

 

• filter: (GalleryFilter 類型 )相冊中選擇文件類型過濾器

系統相冊選擇器中可選擇的文件類型，可設置為僅選擇圖片文件（“image”）、視頻文件（“video”）或所有文件（“none”），只有當參數為“image”才啟用壓縮功能.默認值為“image”。

 

• maximum: (Number 類型 )最多選擇的圖片數量

僅在支持多選時有效，取值范圍為1到Infinity，默認值為Infinity，即不限制選擇的圖片數。 如果設置的值非法則使用默認值Infinity。

 

平台支持

 

• Android - ALL (支持): 系統相冊文件選擇界面不支持設置選擇的圖片數量，為了確保此功能可正常使用，應該設置system屬性值為false強制使用5+統一相冊選擇界面。
• iOS - ALL (支持)

 

• multiple: (Boolean 類型 )是否支持多選圖片

可從系統相冊中選擇多張圖片，默認為false

 

• onmaxed: (Function 類型 )超過最多選擇圖片數量事件

使用相冊多選圖片時，可通過maximum屬性設置最多選擇的圖片數量，當用戶操作選擇的數量大於此時觸發此事件。

 

平台支持

 

• Android - ALL (支持): 系統相冊文件選擇界面不支持設置選擇的圖片數量，只有當用戶選擇的圖片數量超過最多圖片數是觸發，為了確保此功能可正常使用，應該設置system屬性值為false強制使用5+統一相冊選擇界面。 注意：此時顯示的相冊文件選擇界面，需要使用plus.nativeUI.*彈出提示框，否則可能無法正常顯示。
• iOS - ALL (支持)

 

 

• popover: (PopPosition 類型 )相冊選擇界面彈出指示區域

對於大屏幕設備如iPad，相冊選擇界面為彈出窗口，此時可通過此參數設置彈出窗口位置。 其為JSON對象，格式如{top:"10px",left:"10px",width:"200px",height:"200px"}，所有值為像素值，左上坐標相對於容器的位置，默認彈出位置為屏幕居中。

 

• selected: (Array[ String ] 類型 )已選擇的圖片路徑列表

僅在多圖片選擇時生效，相冊選擇界面將選中指定的圖片路徑列表。 如果指定的路徑無效，則忽略此項；如果指定的路徑數超過maximum屬性指定的最大選擇數目則超出的圖片不選中。

 

平台支持

 

• Android - ALL (支持): 系統相冊文件選擇界面不支持設置已選擇的圖片列表，為了確保此功能可正常使用，應該設置system屬性值為false強制使用5+統一相冊選擇界面。
• iOS - ALL (支持)

 

• system: (Boolean 類型 )是否使用系統相冊文件選擇界面

multiple屬性設置為true時，如果系統自帶相冊選擇控件時則優先使用，否則使用5+統一相冊選擇控件；設置為false則不使用系統自帶相冊選擇控件，直接使用5+統一相冊選擇界面。 默認值為false。

 

平台支持

 

• Android - 2.3+ (支持): Android4.0以上系統支持自帶相冊選擇控件。
• iOS - 5.1+ (不支持): 不支持系統自帶相冊選擇控件，忽略此參數。

 

 

返回值：

void : 無