h5调用html5拍照上传功能

作者: MJ 分类: javascript 发布时间: 2019-05-06 17:08

今天遇到一个需求,需要用到html5的拍照功能,然后生成base64格式的图片,然后上传后台。其实找了好多解决方案,大致都说了思路,没有完整的解决ios和安卓的各种问题(比如:ios横向和竖向图片展示的问题),然后再群里问了一下,一个兄弟给推荐了这个插件ImageFile,用了一下挺好用的,赞一个,mark一下。

demo

示例代码,直接拷贝运行:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <style type="text/css">
    	*{
    		margin:0;
    		padding:0;
    	}
    	body{
    		
    	}
    	.img-box{
			padding:20px;
			overflow: hidden;
    	}
    	.img-box .item{
    		width:100px;
    		height:100px;
    		background: #dedede;
    		float:left;
			margin-right:20px;
			position:relative;
    	}
    	.img-box .item input{
    		position: absolute;
    		width:100px;
    		height:100px;
    		top:0;
    		left:0;
    		opacity: 0;
    	}
    </style>
</head>
<body>
	<div class="img-box">
		<div class="item" id="img0">
			<img src="" width="100%" />
			<input type="file" accept="image/*" onchange="fileChange(event)">
		</div>
		<div class="item" id="img1">
			<img src="" width="100%" />
			<input type="file" accept="image/*" onchange="fileChange(event)">
		</div>
	</div>

	<script src="https://kelen.github.io/ImageFile/dist/imageFile.umd.js"></script>
	<script>
	function fileChange(ev) {
	    let file = ev.target.files[0];
	    ImageFile.getImageFileData(file, { 
	    	width: 100, 
	    	height: 100, 
	    	cover: false 
	    }).then(({ blob, base64 }) => {
	        ev.target.previousSibling.previousSibling.setAttribute('src',base64);
	    });
	}

	</script>
</body>
</html>

使用:

<input type="file" accept="image/*" onchange="fileChange(event)">
<script src="../dist/imageFile.umd.js"></script>
<script>
function fileChange(ev) {
  let file = ev.target.files[0];
  ImageFile.getImageFileData(file, { width: 600, height: 800, cover: false }).then(({ blob, base64 }) => {
    let img = ImageFile.blobToImage(blob);
    img.style.width = '300px';
    console.log(blob, base64.length)
    document.body.appendChild(img);
  });
}
</script>

API

getImageFileData(file, option);

get image file input data, can compress size with option with and height

参数类型说明
filefile type文件类型
optionobject配置项
width宽度
height高度
cover是否覆盖整个区域,默认false
function fileChange(ev) {
  let file = ev.target.files[0];
  ImageFile.getImageFileData(file, { width: 300, height: 400, cover: true }).then(blob => {
    let img = ImageFile.blobToImage(blob);
    document.body.appendChild(img);
  })
}

blobToImage(blob)

blob translate to image, use for ImageFileData() result

参数类型说明
blobblob二进制文件
let img = ImageFile.blobToImage(blob);

fileToCanvas(file, option);

file translate to canvas and image, get canvas and image

参数类型说明
filefile type文件类型
optionobject配置项
width宽度
height高度
cover是否覆盖整个区域,默认false
ImageFile.fileToCanvas(file, { width: 400, height: 400 }).then(({ canvas, image }) => {
  document.body.appendChild(canvas);
})

fileToImage(file);

file translate to image

参数类型说明
filefile type文件类型
ImageFile.fileToImage(file).then(img => {
    document.body.appendChild(img);
})

imageToCanvas(img);

image translate to canvas

参数类型说明
imgimage element图片
let canvas = ImageFile.imageToCanvas(img);

canvasToImage(canvas);

canvas tranlate to image, return promise

参数类型说明
canvascanvascanvas
ImageFile.canvasToImage(cvs, 'image/png').then(canvas => {
  document.body.append(canvas);
})

canvasToFile(canvas);

canvas translate to file

let file = ImageFile.canvasToFile(cvs);

canvasToBase64(canvas, type = ‘image/png’, encoderOptions = ‘0.92’);

canvas to base64

let base64 = ImageFile.canvasToBase64(cvs);

imageToBase64(img);

image translate to base64

let base64 = ImageFile.imageToBase64(img);

rotate(canvas, image, degree);

rotate image by canvas and return canvas

参数类型说明
canvascanvas需要绘制的canvs
imageimgimg元素
degreeint角度
ImageFile.rotate(cvs, img, degree);

欢迎关注小程序,感谢您的支持!

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注