在react的移动端项目中实现手机拍摄图片、压缩、预览、裁剪、上传的实现方案

女爷i 2023-06-12 04:26 15阅读 0赞

###### *最新更新时间：2019年10月31日15:33:32* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

> 本文内容：在移动端实现图片拍摄、压缩、预览、裁剪、上传的五大功能，看起来是一套很复杂的业务逻辑组合，实际上每个模块可以单独开发，细分并拆分业务模块是常见复杂业务形态开发的基本方案。

#### 概述 ####

> 在移动端做开发永远越不过的两个障碍或技术瓶颈，兼容性和性能。
> 
>  *  兼容性，某些HTML元素的默认样式在不同浏览器下显示效果不一；CSS样式的兼容性，移动端常见的是同一样式在不同OS和不同机型下显示效果不一；原生事件交互的兼容性，比如拍照和键盘输入场景下，Android和iOS系统表现的形式不一；
>  *  性能，主要表现在硬件设备系统内存容量的受限，比如视频播放、图片连续拍摄都是高功耗的应用场景，处理不当容易造成内存泄漏导致浏览器crash。

> 本文中的技术方案，瓶颈在于连续拍摄照片有数量限制，实测过程中iPhone X等高性能手机连续拍摄几十张照片的时候，容易导致浏览器crash，这个问题经过长期探索和研究，手动实现了实时垃圾回收，以及图片压缩比例调整和压缩时机控制，性能有所提高和改善，从二十张左右的数量提升到了四十张左右的数量，但部分机型无限连续拍摄图片出现崩溃的场景终究没有解决方案，究其本质原因，受限于手机系统、可用内存容量等硬件。

> 本方案，对于大部分机型连续拍摄照片，并实施压缩预览裁剪上传功能，无数量限制。最终向服务器上传的是base64数据格式的图片数据。

#### 技术方案的实现 ####

*  DOM布局如下：

import React from 'react'
    //引入Cropper图片裁剪组件
    import Cropper from 'react-cropper';
    import 'cropperjs/dist/cropper.css';
    let styles = .contianer { 
    	.cropModal{ 
    		position: absolute;
    		width: 100%;
    		height: 100%;
    		top: 0;
    		left: 0;
    		background: #000000;
    		display: flex;
    		flex-direction: column;
    		justify-content: center;
    		align-items: center;
    		z-index: 3;
    		.crop{ 
    		
    		}
    		.btn{ 
    			display: flex;
    			flex-direction: row;
    			justify-content: space-between;
    			position: absolute;
    			bottom: 0;
    			left: 50%;
    			transform: translateX(-50%);
    			width: 285px;
    			height: 60px;
    			.cropperBtn{ 
    				width: 60px;
    				height: 60px;
    				line-height: 30px;
    				color: #FFFFFF;
    				font-size: 14px;
    				text-align: center;
    				img{ 
    					width: 23px;
    					height: 22px;
    					vertical-align: top;
    					position: relative;
    					top: 50%;
    					transform: translateY(-50%);
    				}
    			}
    		}
    		.cropTips{ 
    			position: absolute;
    			top: 22px;
    			font-size: 11px;
    			line-height: 15px;
    			color: #B8B8B8;
    			padding: 0 26px;
    			letter-spacing: 0.5px;
    		}
    	}
    }
    
    export default class TakePhoto extends React.Component { 
    
      constructor(props) { 
        super(props);
        this.state = { 
          displayLoading: false,
          cropperData:'',
          showCropModal: false
        };
        this.fReader = new FileReader();
        this.closureTime = 0;
      }
      
      render() { 
        return <div id='testPage' className={ styles.contianer}>
        { /*图片裁剪组件*/}
            { 
              this.state.showCropModal ? <div className={ styles.cropModal} id='cropModal'>
                <Cropper
                  className={ styles.crop}
                  ref='cropper'
                  src={ this.state.cropperData}
                  style={ { maxHeight: '78%', width: '100%'}}
                  //0-默认-没有任何限制 1-限制裁剪框不超过canvas画布边缘 2-如果是长图-限制图片不超过cropper的最高可视区域-同时裁剪框不超过canvas画布边缘
                  viewMode={ 2}
                  dragMode='none'
                  minCanvasWidth={ 285}
                  //隐藏棋盘背景色
                  background={ false}
                  //裁剪框内部的横竖虚线可见
                  guides={ true}
                  //裁剪框内部的十字线可见
                  center={ false}
                  //可旋转原图
                  rotatable={ true}
                  //可缩放原图
                  scalable={ true}
                  //crop={(e)=>{this.crop(e)}}
                />
                <div className={ styles.btn}>
                  <div className={ styles.cropperBtn} onClick={ this.cancelCrop}>取消</div>
                  <div className={ styles.cropperBtn} onClick={ this.confirmCrop}>确认</div>
                  <div className={ styles.cropperBtn} onClick={ this.rotateCrop}>旋转</div>
                </div>
              </div> : null
            }
        	{ this.state.displayLoading ? <Loading></Loading> : null}
    	    <input
    			type="file"
    			onChange={ (e)=>{ this.onChange(e)}}
    			className={ styles.getImg}
    			title={ this.state.title}
    			id="fileinput"
    			ref='onChange'
    			accept="image/*"
    			// capture="camera"
    		/>
        </div>
      }
    }

*  input元素onChange事件调起相机和相册的功能代码如下：

/** * input onChange事件 * @param e * @return */
    onChange(e){ 
    	//此处是崩溃点 相机调用的频率越高，崩溃越快
    	let _this = this;
    	//弹出加载动画
    	this.openLoading()
    	let file = e.currentTarget.files[0];//object-Blob //96K 的文件转换成 base64 是 130KB
    	//用户取消操作
    	if(file == undefined){ 
    		return
    	}
    	this.fReader = new FileReader();
    	let tempTimer = setTimeout(function(){ 
    		_this.fReader.readAsDataURL(file);
    		_this.fReader.onload=function(e) { 
    			this.zip(this.result);//压缩逻辑
    		}
    		file = null;
    		tempTimer = null;
    	},500)
    }
    
    /** * 显示loading组件 * @param * @return */
    openLoading(){ 
    	this.setState({ 
    		displayLoading: true
    	})
    }

*  图片压缩

/** * 图片压缩 * @param base64 * @return */
    zip(base64){ 
    	let img = new Image();
    	let canvas = document.createElement("canvas");
    	let ctx = canvas.getContext("2d");
    	let compressionRatio = 0.5
    	//获取用户拍摄图片的旋转角度
    	let orientation = this.getOrientation(this.base64ToArrayBuffer(base64));//1 0° 3 180° 6 90° 8 -90°
    	img.src = base64
    	img.onload = function () { 
    		let width = img.width, height = img.height;
    		//图片旋转到 正向
    		if(orientation == 3){ 
    			canvas.width = width;
    			canvas.height = height;
    			ctx.rotate(Math.PI)
    			ctx.drawImage(img, -width, -height, width, height)
    		}else if(orientation == 6){ 
    			canvas.width = height;
    			canvas.height = width;
    			ctx.rotate(Math.PI / 2)
    			ctx.drawImage(img, 0, -height, width, height)
    		}else if(orientation == 8){ 
    			canvas.width = height;
    			canvas.height = width;
    			ctx.rotate(-Math.PI / 2)
    			ctx.drawImage(img, -width, 0, width, height)
    		}else{ 
    			//不旋转原图
    			canvas.width = width;
    			canvas.height = height;
    			ctx.drawImage(img, 0, 0, width, height);
    		}
    
    //第一次粗压缩
    // let base64 = canvas.toDataURL('image/jpeg', compressionRatio);//0.1-表示将原图10M变成1M 10-表示将原图1M变成10M
    //100保证图片容量 0.05保证不失真
    //console.log('第一次粗压缩',base64.length/1024,'kb，压缩率',compressionRatio);
    //第二次细压缩
    // while(base64.length/1024 > 500 && compressionRatio > 0.01){ 
    //console.log('while')
    // compressionRatio -= 0.01;
    // base64 = canvas.toDataURL('image/jpeg', compressionRatio);//0.1-表示将原图10M变成1M 10-表示将原图1M变成10M
    //console.log('第二次细压缩',base64.length/1024,'kb，压缩率',compressionRatio)
    // }
    		this.setCropperDate(canvas.toDataURL('image/jpeg', compressionRatio));
    	};
    }
    
    /** * 拍照第一次压缩后为cropper组件赋值 * @param imgDataBase64 图片的base64 * @return */
    setCropperDate = (imgDataBase64) => { 
    	let _this = this;
    	this.state.cropperData = imgDataBase64;
    	//定时器的作用，上面的imgDataBase64赋值，属于大数据赋值操作，消耗资源过大，加上定时器等待大数据赋值成功内存释放之后再渲染UI，不会出现白屏
    	let tempTimer = setTimeout(function(){ 
    		_this.setState({ 
    			displayLoading: false,
    			showCropModal: true
    		})
    		clearTimeout(tempTimer)
    	},300)
    }

*  获取图片的旋转角度

/** * base64转ArrayBuffer对象 * @param base64 * @return buffer */
    base64ToArrayBuffer(base64) { 
    	base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    	var binary = atob(base64);
    	var len = binary.length;
    	var buffer = new ArrayBuffer(len);
    	var view = new Uint8Array(buffer);
    	for (var i = 0; i < len; i++) { 
    		view[i] = binary.charCodeAt(i);
    	}
    	return buffer;
    }
    	
    /** * 获取jpg图片的exif的角度 * @param * @return */
    getOrientation(arrayBuffer) { 
    	var dataView = new DataView(arrayBuffer);
    	var length = dataView.byteLength;
    	var orientation;
    	var exifIDCode;
    	var tiffOffset;
    	var firstIFDOffset;
    	var littleEndian;
    	var endianness;
    	var app1Start;
    	var ifdStart;
    	var offset;
    	var i;
    	// Only handle JPEG image (start by 0xFFD8)
    	if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) { 
    		offset = 2;
    		while (offset < length) { 
    			if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) 
    				app1Start = offset;
    				break;
    			}
    			offset++;
    		}
    	}
    	if (app1Start) { 
    		exifIDCode = app1Start + 4;
    		tiffOffset = app1Start + 10;
    		if (getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') { 
    			endianness = dataView.getUint16(tiffOffset);
    			littleEndian = endianness === 0x4949;
    			if (littleEndian || endianness === 0x4D4D /* bigEndian */) { 
    				if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) { 
    					firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
    					if (firstIFDOffset >= 0x00000008) { 
    						ifdStart = tiffOffset + firstIFDOffset;
    					}
    				}
    			}
    		}
    	}
    	if (ifdStart) { 
    		length = dataView.getUint16(ifdStart, littleEndian);
    		for (i = 0; i < length; i++) { 
    			offset = ifdStart + i * 12 + 2;
    			if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */) { 
    				// 8 is the offset of the current tag's value
    				offset += 8;
    				// Get the original orientation value
    				orientation = dataView.getUint16(offset, littleEndian);
    				// Override the orientation with its default value for Safari (#120)
    				if (true) { 
    					dataView.setUint16(offset, 1, littleEndian);
    				}
    				break;
    			}
    		}
    	}
    	return orientation;
    }
    	
    /** * Unicode码转字符串 ArrayBuffer对象 Unicode码转字符串 * @param * @return */
    getStringFromCharCode(dataView, start, length) { 
    	var str = '';
    	var i;
    	for (i = start, length += start; i < length; i++) { 
    		str += String.fromCharCode(dataView.getUint8(i));
    	}
    	return str;
    }

*  Cropper组件的取消、裁剪、旋转的三个方法：

/** * 无线逆时针旋转图片 * @param * @return */
    rotateCrop(){ 
    	this.refs.cropper.rotate(-90);
    }
    
    /** * 在裁剪组件中确认裁剪 * @param * @return */
    confirmCrop(){ 
    	let _this = this;
    	//节流
    	if(Date.now() - this.closureTime < 2000){ 
    		return
    	}
    	this.closureTime = Date.now()
    	document.getElementById('cropModal').style.visibility = 'hidden';
    	this.setState({ 
    		displayLoading: true,
    	})
    	let tempTimer = setTimeout(function(){ 
    		//获取裁剪后的图片base64 向服务器传递500KB以内的图片
    		let compressionRatio = 0.5;
    		let cropperData = _this.refs.cropper.getCroppedCanvas().toDataURL("image/jpeg", compressionRatio)
    		while(cropperData.length/1024 > 500 && compressionRatio > 0.1){ 
    			compressionRatio -= 0.1;
    			cropperData = _this.refs.cropper.getCroppedCanvas().toDataURL("image/jpeg", compressionRatio)
    		}
    		_this.state.cropperData = null;
    		_this.refs.cropper.clear();//去除裁剪框
    		//_this.refs.cropper.destroy();//需要修改npm包
    		_this.upload(cropperData);//向服务器提交base64图片数据
    		cropperData = null;
    		//必须先拿到cropper数据 关闭裁剪框 显示加载框
    		_this.setState({ showCropModal: false})
    		clearTimeout(tempTimer)
    	},300)
    }
    
    /** * 在裁剪组件中取消裁剪 * @param * @return */
    cancelCrop(){ 
    	this.state.cropperData = null;
    	this.refs.cropper.clear()
    	this.setState({ 
    		showCropModal: false
    	})
    }

#### 参考资料 ####

*  无

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460