相机插件的缩小画廊照片

Question

我正在使用 Cordova 2.6 相机插件，从设备库中获取图像，我使用 base64 编码获取它们，我试图使用“质量”选项将它们压缩到较低的质量。

我注意到压缩不起作用，当我在 https://github.com/apache/cordova-plugin-camera/blob/master/doc/index.md 阅读 Cordova 文档时，我可以阅读：

注意：较新设备上的照片分辨率非常好。 已选择照片 设备库中的图片不会缩小到较低的质量，即使 如果指定了质量参数。为了避免常见的内存问题， 将 Camera.destinationType 设置为 FILE_URI 而不是 DATA_URL。

在我的情况下，我只能使用 DATA_URL，因为我使用 base64 加密通过第三方网络服务上传图像。我也只使用来自设备库的图像（而不是来自相机本身）。 我遇到了一些性能问题，主要是在 Windows Phone 上。由于图像大小的原因，我的应用程序花费了太多时间来处理 base64 数据（我正在使用保存在设备库中的大图像进行测试，但这些图像是使用 5 MP 或 8 MP 手机的相机拍摄的）。

我的问题是有一个解决方案可以让 Cordova 插件中的画廊照片的“质量”选项工作吗？

是否有任何自定义插件或 fork 可以压缩设备图库照片？

您还有其他建议吗？ （例如使用 FILE_URI 并返回压缩图像 base64 加密的自定义原生插件）

Answer 1

我们在调用 .getPicture 时使用以下选项：

quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
encodingType: Camera.EncodingType.JPEG,
sourceType: Camera.PictureSourceType.CAMERA,
targetWidth: 800,
correctOrientation: true

不过，质量参数似乎对文件大小没有太大影响。 targetWidth 并且出于某种奇怪的原因，correctOrientation 可以。使用这些设置生成的图片大小约为 24kB，具体取决于设备的相机分辨率。

Answer 2

在从相机或图库中拿起任何照片后，我将使用下一个功能。我正在使用插件cordova-plugin-simple-image-resizer

  function resizeImageIfNeeded (imageUri, callback) {
    // if image larger than this, resize
    var MAX_IMG_FILE_SIZE = 307200 // 300kb

    app.functions.getFileSize(imageUri, function (fileSize, err) {
      if (!err && fileSize && fileSize < MAX_IMG_FILE_SIZE) {
        // no need to resize image, return image unchanged
        console.log('Image Not resized (file already small): ' + imageUri)
        callback(imageUri)
      } else {
        // resize image (try even if file size is not obtained)
        resizeImage(imageUri, function (resizedImageUri, err) {
          if (err) {
            // could not resize image
            callback(imageUri, Error(err))
          }
          // return resized image
          callback(resizedImageUri)
        })
      }
    })
  }

  function resizeImage (imageUri, callback) {
    // get just fileName with suffix, ex.: "photo1_resized.jpg"
    var fileNameResized = addSuffixToFileName(
      getFilenameFromURL(imageUri)[1],
      '_resized'
    )

    var resizeOptions = {
      uri: imageUri,
      fileName: fileNameResized,
      quality: 90,
      width: 1200,
      height: 1200,
      base64: false
    }

    window.ImageResizer.resize(resizeOptions,
      function (resizedImageUri) {
        // success on resizing
        console.log('%c Image resized: ', 'color: green; font-weight:bold', resizedImageUri)
        callback(resizedImageUri)
      },
      // failed to resize
      function (err) {
        console.log('%c Failed to resize: ', 'color: red; font-weight:bold')
        callback(imageUri, Error(err))
      })
  }

  function getFileSize (fileUri, callback) {
    var fileSize = null
    window.resolveLocalFileSystemURL(fileUri, function (fileEntry) {
      fileEntry.file(function (fileObj) {
        fileSize = fileObj.size
        callback(fileSize)
      },
      function (err) {
        console.error('fileEntry error:\n', JSON.stringify(err))
        callback(fileSize, Error(err))
      })
    },
    function (err) {
      console.error('resolveLocalFileSystemURL error:\n', JSON.stringify(err))
      callback(fileSize, Error(err))
    })
  }

  // ex: from "file:///storage/emulated/0/Android/data/com.form.parking.violation/cache/1525698243664.jpg"
  // output[0] == "file:///storage/emulated/0/Android/data/com.form.parking.violation/cache"
  // output[1] == "1525698243664.jpg"
  function getFilenameFromURL (url) {
    if (!url) {
      return false
    }
    var output = []
    output[1] = url.split('/').pop()
    output[0] = url.substring(0, url.length - output[1].length - 1)
    return output
  }