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内存溢出

解决方案:图片压缩后再放到页面显示

 

 

  

      

posted @ 2018-11-01 16:50  AKLIN  阅读(581)  评论(0编辑  收藏  举报