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);
欢迎关注小程序,感谢您的支持!
html5在线拍照,h5调用html5拍照上传功能相关推荐
- html上传图片裁剪,基于HTML5+JS实现本地图片裁剪并上传功能
基于HTML5+JS实现本地图片裁剪并上传功能 2019-01-07 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了基于HTML5+JS实现本地图片裁剪并上传功 ...
- camera.swf java_java调用摄像头保存图片上传功能
在项目中要用到jsp页面实现网页采集摄像头图像,并实现上传的功能,页面主要js调用的,所以可以使用多种语言php,asp等都可以使用,而且是跨浏览器的. 可以整合的到SSH项目中和struts1或者s ...
- H5调用手机摄像头拍照,如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
- h5前端调用android拍照功能,H5调用Android拍照和摄像以及选取相册
之前一直认为H5调用Android,H5不需要Android配合能直接实现功能.前段时间,自己做这个功能,才发现不是这么回事. H5编写 html文件里只需要标签即可实现代码,代码如下所示: 拍照 ο ...
- 微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件 调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
- 手机端本地图片或者拍照的上传功能
原文连接 https://blog.csdn.net/m0_37852904/article/details/78550136 ------------------------------------ ...
- android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
- android 微信高仿,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间 ...
- 解决H5 IOS手机图片上传时图片会旋转90°问题
解决H5 IOS手机图片上传时图片会旋转90°问题 Vant 官方给出的解答需要自己解决,没有处理. 解决办法主要使用了 compressorjs 插件库 一.Vant UI库Uploader 组件图 ...
- thinkphp 调用php文件上传,ThinkPHP实现带验证码的文件上传功能实例
本文实例讲述了ThinkPHP实现带验证码的文件上传功能.分享给大家供大家参考.具体实现方法如下: ThinkPHP上传文件非常的简单我们只要调用一个文件上传类UploadFile就可以快速的实现上传 ...
最新文章
- c语言编的游戏怎么在安卓平台使用,谁知道怎么把c语言写的游戏安装到安卓手机上面玩??...
- python入门教程软件-程序员带你十天快速入门Python,玩转电脑软件开发(四)
- Ajax提交后Moedl And View不进行页面跳转的解决方案
- Bugku—web(一)
- Apache伪静态学习
- 简单,方便,功能全的php分页类
- Linux 在不重启的情况下识别新挂载的磁盘
- DOM疑惑点整理(三)
- C# 在word文档中寻找指定的关键字
- FFmpeg分离音视频,音视频合并,添加多音轨,格式转换,裁切,剪切常用参数详解
- hd Aruba wifi / honor
- 数学知识整理:布朗运动与伊藤引理 (Ito‘s lemma)
- 服务器运维工程师岗位要求
- pcs9000系统plat服务器,CSD361現场调试手册.docx
- Android倒计时实现及Timer和TimerTask的使用
- 计算机右键括号内的字母,电脑操作中菜单后面括号里的字母的介绍
- 微信摇一摇插件ios_iOS开发——全局响应MotionEvent(微信摇一摇)
- WPF的介绍和XAML语言
- 牛逼的人生都是从苦逼的岁月爬过来的
- FM立体声 matlab 左右,FM立体声收音机的制作
热门文章
- 同人游戏开发手记(三) - 第二章 守护者之剑系列 (2.1 ~ 2.2)
- Vbs脚本编程简明教程之五
- 步进电机的正反向旋转c语言编程,实现步进电机自动正反转程序怎么写
- 一个漂亮的电子数字字体分享electronicFont
- 简指南越狱的iOS及原因,负责其
- 破解获取微信小程序源代码
- 【行业应用】阿里云实时计算 Flink 版 IoT 行业解决方案
- [源码解读]position_estimator_inav_main解读(如何启动光流)
- ENVI实验教程(3)遥感图像预处理—几何校正
- 神经网络反向传播(BP)算法推导