H5前摄像头拍照，转base64

雨点打透心脏的1/2处 2023-07-18 12:44 2阅读 0赞

onFileChange (e) { 
        if(!e.target.files.length) return false;
        const self = this;
        const file = e.target.files[0];
        const fileName = file.name;
        const fileType = file.type;
        const formData = new FormData();
        for(let i in self.uploadData) { 
            formData.append(i, self.uploadData[i]);
        }
        // formData.append('fileInput', file, fileName);
        // self.doUpload(formData);
        // return false;
        // document.getElementById('originFile').src = window.URL.createObjectURL(file)
        if(file) { 
            // this.$vux.loading.show()
            if(fileType === 'image/jpeg' || fileType === 'image/png') { 
                self.getOrientation(file, Orientation => { 
                    const reader = new FileReader();
                    reader.onload = (ev) => { 
                        const data = ev.target.result;
                        const image = new Image();
                        image.src = data;
                        // console.log('原始base64：', data);
                        image.onload = () => { 
                            let imgWidth = image.width;
                            let imgHeight = image.height;
                            // console.log('onload start', imgWidth, imgHeight)
    
                            // 这里先设置最大宽高1920*1080，先进行压缩，否则后台再次压缩图片会很糊（实际上图片旋转过，else if 不会进入，宽度会一直是1080px）
                            if(imgWidth > imgHeight && imgWidth > 1080){ 
                                imgWidth = 1080;
                                imgHeight = Math.ceil(1080 * image.height / image.width);
                            }else if(imgWidth < imgHeight && imgHeight > 1920){ 
                                imgWidth = Math.ceil(1920 * image.width / image.height);
                                imgHeight = 1920;
                            }
    
                            const canvas = document.createElement("canvas"),
                            ctx = canvas.getContext('2d');
                            console.log('原图像宽高以及旋转信息Orientation：', image.width, image.height, Orientation);
                            canvas.width = imgWidth;
                            canvas.height = imgHeight;
                            console.log(Orientation, '-1')
                            if(Orientation && Orientation != 1){ 
                                switch(Orientation){ 
                                    case 6:
                                        canvas.width = imgHeight;
                                        canvas.height = imgWidth;
                                        ctx.rotate(Math.PI / 2);
                                        ctx.drawImage(image, 0, -imgHeight, imgWidth, imgHeight);
                                        break;
                                    case 3:
                                        ctx.rotate(Math.PI);
                                        ctx.drawImage(image, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                        break;
                                    case 8:
                                        canvas.width = imgHeight;
                                        canvas.height = imgWidth;
                                        ctx.rotate(3 * Math.PI / 2);
                                        ctx.drawImage(image, -imgWidth, 0, imgWidth, imgHeight);
                                        break;
                                }
                            } else { 
                                ctx.drawImage(image, 0, 0, imgWidth, imgHeight);
                            }
    
                            
                            if (navigator.userAgent.match(/Android/i)) { // Android 压缩使用JPEGEncoder，质量使用100。提高ocr识别率
                                try { 
                                    console.log('encoder:100')
                                    const encoder = new JPEGEncoder();
                                    this.dataURL = encoder.encode(ctx.getImageData(0, 0, imgWidth, imgHeight), 100);
                                } catch (error) { // 不支持JPEGEncoder 也使用canvas.toDataURL
                                    this.dataURL = canvas.toDataURL(fileType, 0.92);
                                }
                            } else { // iphone 和其他使用canvas.toDataURL
                                this.dataURL = canvas.toDataURL(fileType, 0.92);
                            }
                            console.log('图片纠正旋转后base64：', this.dataURL);
    
                            const finalFile = self.dataURLtoFile(this.dataURL, fileName);
                            // console.log('转化为二进制的图片：', finalFile, finalFile.size)
                            formData.append('fileInput', finalFile, fileName);
                            self.doUpload(formData);
                        }
                    };
                    reader.readAsDataURL(file);
                }, () => { 
                    formData.append('fileInput', file, fileName);
                    self.doUpload(formData);
                });
            } else { 
                formData.append('fileInput', file, fileName);
                self.doUpload(formData);
            }
        } else { 
            this.$vux.alert.show({ 
                title: '提示',
                content: '照片不存在'
            })
        }
    },