html5base64的简单介绍

如何使用HTML5实现利用摄像头拍照上传功能

HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。

成都创新互联公司，专注为中小企业提供官网建设、营销型网站制作、响应式网站建设、展示型成都网站设计、成都做网站等服务，帮助中小企业通过网站体现价值、有效益。帮助企业快速建站、解决网站建设与网站营销推广问题。

1、视频流

HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMedia（请注意目前仅Chrome和Opera支持）获得摄像头提供的视频流。我们需要做的是添加一个HTML5 的 Video 标签，并将从摄像头获得的视频作为这个标签的输入来源。

video id=”video” autoplay=”"/video

script

var video_element=document.getElementById(‘video’);

if(navigator.getUserMedia){ // opera应使用opera.getUserMedianow

navigator.getUserMedia(‘video’,success,error); //success是回调函数,当然你也可以直接在此写一个匿名函数

}

function success(stream){

video_element.src=stream;

}

/script

此时，video 标签内将显示动态的摄像视频流。下面需要进行拍照了。

2、拍照

拍照是采用HTML5的Canvas功能，实时捕获Video标签的内容，因为Video元素可以作为Canvas图像的输入，所以这一点很好实现。主要代码如下：

var canvas=document.createElement(‘canvas’); //动态创建画布对象

var ctx=canvas.getContext(’2d’);

var cw=vw,ch=vh;

ctx.fillStyle=”#ffffff”;

ctx.fillRect(0,0,cw,ch);

ctx.drawImage(video_element,0,0,cw,ch,0,0,vw,vh); //将video对象内指定的区域捕捉绘制到画布上指定的区域，可进行不等大不等位的绘制。

document.body.append(canvas);

3、图片获取

从Canvas获取图片数据的核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

var imgData=canvas.toDataURL(“image/png”);

这样，imgData变量就存储了一长串的字符数据内容，表示的就是一个PNG图像的base64编码。因为真正的图像数据是base64编码逗号之后的部分，所以要让实际服务器接收的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

var data=imgData.substr(22);

如果要在上传前获取图片的大小，可以使用：

var length=atob(data).length; //atob 可解码用base-64解码的字串

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串（也就是在前台略过上面这步直接上传）。例如PHP里：

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

4、图片上传

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时可以用：

$.post(‘upload.php’,{‘data’:data});

在后台我们用PHP脚本接收数据并存储为图片。

function convert_data($data){

$image=base64_decode(str_replace(‘data:image/jpeg;base64,’,”,$data);

save_to_file($image);

}

function save_to_file($image){

$fp=fopen($filename,’w');

fwrite($fp,$image);

fclose($fp);

}

以上的解决方案不仅能用于Web App拍照上传，也可以通过Canvas的编辑功能函数提供图片编辑，例如裁剪、上色、涂鸦、圈点等功能，然后把用户编辑完的图片上传保存到服务器上。

在还在不断补充修正的HTML5的驱动下，Web App与Native App之间的距离将越来越小。在可预见的不远的未来，越来越多老的和新的开发项目必将会迁移到WEB应用上来。

如何通过html5调用摄像头拍照

ios拍照默认是旋转的，有个exif的插件是专门解决这个问题的。js版连接: 网页链接，里面有使用教程。通过这个判断照片的旋转角度之后，可以把它旋转过来再保存，教程：网页链接。如果只有预览需求，直接旋转容器进行显示也是可以的。

html5怎样调用手机摄像头或者相册

用input type=file capture=camcorder调用摄像头，会先让你选择拍照或者从相册选取。

首先实现在浏览器中调用手机摄像头，实现拍照功能并且把拍下的照片显示在页面并上传到服务器上，然后再在服务器端进行分析。

首先实现在浏览器中调用摄像头，当然用现在火的不行的html5，html5中的video标签，并将从摄像头获得视频作为这个标签的输入来源。实现拍照功能的html5代码：

article

style scoped

video { transform: scaleX(-1); }

p { text-align: center; }

/style

h1Snapshot Kiosk/h1

section id="splash"

p id="errorMessage"Loading.../p

/section

section id="app" hidden

pvideo id="monitor" autoplay/video canvas id="photo"/canvas

pinput type=button value="????" onclick="snapshot()"

/section

script

navigator.getUserMedia({video:true}, gotStream, noStream);

var video = document.getElementById('monitor');

var canvas = document.getElementById('photo');

function gotStream(stream) {

video.src = URL.createObjectURL(stream);

video.onerror = function () {

stream.stop();

};

stream.onended = noStream;

video.onloadedmetadata = function () {

canvas.width = video.videoWidth;

canvas.height = video.videoHeight;

document.getElementById('splash').hidden = true;

document.getElementById('app').hidden = false;

};

}

function noStream() {

document.getElementById('errorMessage').textContent = 'No camera available.';

}

function snapshot() {

canvas.getContext('2d').drawImage(video, 0, 0);

}

/script

/article

经本人测试在android手机的opera浏览器浏览器下可以正常实现手机拍照功能。android手机下的google chrome浏览器还不行，自带的浏览器也测试没有通过。iphone手机的safari浏览器也是不支持的。

想了解更多关于html5调用手机摄像头的内容可以点击。

图片的获取：

下面我们要从Canvas获取图片数据，其核心思路是用canvas的toDataURL将Canvas的数据转换为base64位编码的PNG图像，类似于“data:image/png;base64,xxxxx”的格式。

Html代码

var imgData =canvas.toDataURL("image/png");

因为真正图像数据是base64编码逗号之后的部分，所以我们实际服务器处理的图像数据应该是这部分，我们可以用两种办法来获取。

第一种：是在前端截取22位以后的字符串作为图像数据，例如：

Html代码

var data = imgData.substr(22);

如果要在上传前获取图片的大小，可以使用：

Html代码

var length = atob(data).length;// atob decodes a string of data which has been encoded using base-64 encoding

第二种：是在后端获取传输的数据后用后台语言截取22位以后的字符串。例如PHP里

php代码:

$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);

图片上传：

在前端可以使用Ajax将上面获得的图片数据上传到后台脚本。例如使用jQuery时：

js代码

$.post('upload.php',{ 'data' : data } );

在后台我们用PHP脚本接收数据并存储为图片。

php代码

function convert_data($data){

$image = base64_decode( str_replace('data:image/jpeg;base64,', '',$data);

save_to_file($image);

}

function save_to_file($image){

$fp = fopen($filename, 'w');

fwrite($fp, $image); fclose($fp);

}

请注意，以上的解决方案不仅能用于Web App拍照上传，并且你可以实现把Canvas的输出转换为图片上传的功能。这样你可以使用Canvas为用户提供图片编辑，例如裁剪、上色、涂鸦的画板功能，然后把用户编辑完的图片保存到服务器上。

HTML5中FileReader怎么使用？

FileReader 对象FileReader 对象主要用来把文件读入内存，并且读取文件中的数据。通过构造函数创建一个 FileReader 对象。

这个文件读取对象有以下几种方法：

1.readAsText():读取文本文件(可以使用Txt打开的文件)，返回文本字符串，默认编码是UTF-8。

2.readAsBinaryString():读取任意类型的文件。返回二进制字符串。这个方法不是用来读取文件展示给用户看，而是存储文件。例如：读取文件的内容，获取二进制数据，传递给后台，后台接收了数据之后，再将数据存储。

3.readAsDataURL():读取文件获取一段以data开头的字符串，这段字符串的本质就是DataURL.DataURL是一种将文件(这个文件一般就是指图像或者能够嵌入到文档的文件格式)嵌入到文档的方案。DataURL是将资源转换为base64编码的字符串形式，并且将这些内容直接存储在url中优化网站的加载速度和执行效率。

4.abort():中断读取

该对象常见应用在即时预览：

即时：当用户选择完图片之后就立刻进行预览的处理 onchange

预览：通过文件读取对象的readAsDataURL()完成。

其中获取数据时，FileReader还提供一个完整的事件模型，用来捕获读取文件时的状态。

onabort:读取文件中断片时触发

onerror:读取错误时触发

onload:文件读取成功完成时触发

onloadend:读取完成时触发，无论成功还是失败

onloadstart:开始读取时触发

onprogress:读取文件过程中持续触发（BY三人行慕课）

java怎么接收html5的base64

img src="data:image/png;base64,图片base64编码"/

前端显示的时候这样显示就好了

至于后台接收，这个编码就是一个字符串，用String 接收就好了

分享文章：html5base64的简单介绍
文章分享：http://cqcxhl.cn/article/dsdocej.html

重庆分公司，新征程启航

html5base64的简单介绍

如何使用HTML5实现利用摄像头拍照上传功能

如何通过html5调用摄像头拍照

html5怎样调用手机摄像头或者相册

HTML5中FileReader怎么使用？

java怎么接收html5的base64

其他资讯