最近刚刚接触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('创建失败')
})
}
}
到这里这个问题基本就解决了。
总结
这是我个人的解决方案，如果各位有什么更好的方法，欢迎留言交流。如果你觉得有用也可以点一个赞，谢谢。
网友评论