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

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

 

 

　 

      

转载于:https://www.cnblogs.com/aklin/p/9890196.html