h5调用html5拍照上传功能
今天遇到一个需求，需要用到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
| 参数 | 类型 | 说明 |
|---|---|---|
| file | file type | 文件类型 |
| option | object | 配置项 |
| 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
| 参数 | 类型 | 说明 |
|---|---|---|
| blob | blob | 二进制文件 |
let img = ImageFile.blobToImage(blob);
fileToCanvas(file, option);
file translate to canvas and image, get canvas and image
| 参数 | 类型 | 说明 |
|---|---|---|
| file | file type | 文件类型 |
| option | object | 配置项 |
| width | 宽度 | |
| height | 高度 | |
| cover | 是否覆盖整个区域，默认false |
ImageFile.fileToCanvas(file, { width: 400, height: 400 }).then(({ canvas, image }) => {
document.body.appendChild(canvas);
})
fileToImage(file);
file translate to image
| 参数 | 类型 | 说明 |
|---|---|---|
| file | file type | 文件类型 |
ImageFile.fileToImage(file).then(img => {
document.body.appendChild(img);
})
imageToCanvas(img);
image translate to canvas
| 参数 | 类型 | 说明 |
|---|---|---|
| img | image element | 图片 |
let canvas = ImageFile.imageToCanvas(img);
canvasToImage(canvas);
canvas tranlate to image, return promise
| 参数 | 类型 | 说明 |
|---|---|---|
| canvas | canvas | canvas |
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
| 参数 | 类型 | 说明 |
|---|---|---|
| canvas | canvas | 需要绘制的canvs |
| image | img | img元素 |
| degree | int | 角度 |
ImageFile.rotate(cvs, img, degree);
欢迎关注小程序，感谢您的支持！
