ionic3 拍照 打水印 上传出现闪退等问题
最近的项目要求拍照打水印并上传,完成测试过程中发现部分Android手机在拍照过程中出现闪退或者APP重启的情况。并且少部分机型会出现部分照片能打水印,部分照片则无法打水印(打水印报错)等奇葩问题。经过一个多月的调试跟踪才完全弄明白原因。本人也不是专业的APP开发,真被这些问题弄得头大O__O 。下面是问题总结:
问题1:拍照打水印闪退或重启
原因:拍照后打水印用到了canvas对图片进行等比例缩放和压缩 并且打水印(网上的打水印方法),但是canvas对象加载图片的时候(调用drawImage方法)如果图片过大会导致canvas对象内存溢出,溢出的结果就是app重启或闪退。
解决方法:在拍照或者从相册获取图片的时候就压缩图片,我这里就限制了长宽最大1500px(应该还能再大点)
// 打开手机相册 private openImgPicker() { this.commitdisable = true let options: ImagePickerOptions = { width: 1500, height: 1500, quality: 50, maximumImagesCount: this.maxUploadCount - this.filearr.length }; this.imagePicker.getPictures(options).then((results) => { this.compressArr = []; this.compressArr = results this.getWaterMarkerImg(); }, (err) => { this.commitdisable = false }); }
// 启动拍照功能 private startCamera() { this.commitdisable = true; let options: CameraOptions = { targetWidth: 1500, targetHeight: 1500, quality: 50, destinationType: this.camera.DestinationType.FILE_URI, // Camera.DestinationType.FILE_URI, sourceType: this.camera.PictureSourceType.CAMERA, encodingType: this.camera.EncodingType.JPEG, mediaType: this.camera.MediaType.PICTURE, allowEdit: false, correctOrientation: true, saveToPhotoAlbum: true }; this.camera.getPicture(options).then((results) => { this.compressArr = []; this.compressArr.push(results); this.getWaterMarkerImg(); }, (err) => { console.log('拍照错误:' + err) this.commitdisable = false }); }
问题2:少部分机型的部分照片打水印失败
原因1:照片格式不一致 。我代码中有一部分需要判断照片格式
解决方案:不同机型的照片格式可能是.jpg、.JPG、.jpeg、.JPEG,注意区分大小写就行了
原因2:照片名称包含中文(特别是截图),部分机型(包括ios)读取照片路径的时候就会报错。
解决方案:把照片名称的中文替换掉
问题3:显示大量图片会导致页面卡顿
原因:ui内存溢出
解决方案:图片压缩后再放到页面显示