H5+APP 从相册选取图片进行扫码

最近刚刚接触H5+APP遇到了一个问题:

在我自己打包的一个H5+APP项目中(利用的线上地址打包)，我想要加一个从相册中选取图片进行扫码，查了查API，发现很简单，利用gallery的pick()方法获取到图片地址，然后利用barcode的scan()方法就可以了(我这里用的是vue写的)

pickImageFromGallery () {
  plus.gallery.pick((path) => {
      // 成功选取回调
      // alert(path)
      // 处理图片
      this.scanImage(path)
    }, (err) => {
      // 选择图片错误处理
      plus.nativeUI.alert('选择图片出现了一个错误:' + err, '错误', '确认')
  })
},
scanImage (path) {
  plus.barcode.scan(path, (type, result) => {
    // 识别成功回调
  }, (err) => {
    // 识别失败回调
  }, [plus.barcode.QR])
}

满心欢喜的在模拟器上真机测试一波，可以没问题，然后是真机测试。问题就来了直接报错，错误编码：8，内容没有，上网查一查，可能是选择的图片大了(不得不说一句啊，130kb的图片都大了吗？简直欲哭无泪)那么我们就需要压缩图片(利用canvas)，这个时候坑就来了

线上地址打包APP无法读取本地文件

// 这里的path就是上面plus.gallery.pick()返回的文件路径
imageCompression (path) {
  let img = new Image()
  img.src = path
  img.onload = () => {
    let canvas = document.createElement('canvas')
    canvas.width = img.width / 2
    canvas.height = img.height / 2
    canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height)
    let dataURL = canvas.toDataURL()
  }
}

这里会报错'not allowed to load local resource',大概意思就是不允许访问本地文件，这是浏览器的安全策略，这里我想过用相对路径访问，但是最重要的一点就是我们利用的是线上项目打包，index.html文件根本就不在本地，所以这个方法直接pass，在网上翻了翻资料发现了一个可以解决这个问题的方法。
我们通过plus.gallery.pick()获取到的图片文件路径path，再利用获得的path通过plus.io.resolveLocalFileSystemURL()方法获取到该文件的文件对象entry，通过文件对像的file()方法获取该文件的信息，然后就是这个方法的核心内容了，通过文件信息利用FileReader的readAsDataURL()方法将图片以URL格式读取(也就是base64格式读取出来)，后面的操作也就是常规的canvas绘图然后保存到本地，我就不多废话了，直接上代码。

// 获取图片文件的base64
getImageDataURL (path) {
  plus.io.resolveLocalFileSystemURL(path, (entry) => {
    entry.file((file) => {
      // 读取文件信息成功
      let reader = new plus.io.FileReader()
      reader.onloadend = (e) => {
        console.log(e)
        path = e.target.result // 这里就获得了图片的Base64
        this.imageCompression(path)
        // console.log(path)
      }
      reader.readAsDataURL(file)
    }, (e) => {
      // 读取文件信息失败
    })
  }, () => {
    // 获取文件失败
  })
}

这里将imageCompression()方法修改一下

imageCompression (path) {
  let img = new Image()
  img.src = path
  console.log(img)
  img.onload = () => {
    console.log(img)
    let canvas = document.createElement('canvas')
    // 压缩一倍，这里你可以自己设置  
    canvas.width = img.width / 2
    canvas.height = img.height / 2
    canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height)
    let dataURL = canvas.toDataURL()
    // 创建原生图片对象
    let bitmap = new plus.nativeObj.Bitmap()
    let tempImg = '_doc/imgCompression.png'
    bitmap.loadBase64Data(dataURL, () => {
      console.log('创建成功')
      bitmap.save(tempImg, {
        overwrite: true, // 这里覆盖文件，节省用户空间
        quality: 100,
        format: 'png'
      }, () => {
        console.log('保存成功')
        bitmap && bitmap.recycle()
        bitmap && bitmap.clear()
        this.scanImage(tempImg, true)
      }, () => {
        console.log('保存失败')
      })
    }, () => {
      console.log('创建失败')
    })
  }
}

到这里这个问题基本就解决了。

总结

这是我个人的解决方案，如果各位有什么更好的方法，欢迎留言交流。如果你觉得有用也可以点一个赞，谢谢。