[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 : 无