H5前摄像头拍照,转base64

<input name="video" type="file"  accept="image/*" capture="camera"  @change="onFileChange">
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: '照片不存在'
        })
    }
},
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值