html5在线拍照,h5调用html5拍照上传功能

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

示例代码，直接拷贝运行：

base

*{

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;

}

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);

});

}

使用：

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);

});

}

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);

欢迎关注小程序，感谢您的支持！