使用 HTML5 调用手机摄像头实现拍照上传 - 文章教程

使用 HTML5 调用手机摄像头实现拍照上传

发布于 2018-10-22 字数 3679 浏览 2654 评论 0

拍照上传功能一般都用于用户的头像设置和手机端的分享图片,对于 PC 端的头像设置,如果采用拍照的方式设置,需要用户使用带有摄像头的电脑,不过现在 HTML5 那么火爆,使用手机端的用户也可以通过网页拍照上传图片,其中使用了 HTML5 中的 <video> 标签,并将从摄像头获得视频作为这个标签的输入来源。

HTML代码

首先我们编写简单的 HTML 的代码,编写一个 <video> 标签作为图片的来源,当然还要加入一些描述性的文字,告诉用户如何操作和上传图片,创建一个 <canvas> 标签用于储存图片。

<style scoped>
    video { transform: scaleX(-1); }
    p { text-align: center; }
</style>
<h1>Snapshot Kiosk</h1>
<section id="splash">
    <p id="errorMessage">Loading...</p>
</section>
<section id="app" hidden>
    <p><video id="monitor" autoplay></video> <canvas id="photo"></canvas>
    <p><input type=button value="&#x1F4F7;" onclick="snapshot()">
</section>

JavaScript 代码

接下来我们编写 JavaScript 代码,设置 <canvas> 的高度和宽度等于 <video> 的高度和宽度,获取 <video> 里面的内容,然后绘制到 <canvas> 里面。

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

经过测试在 Android 手机的 Opera 浏览器浏览器下可以正常实现手机拍照功能。Android 手机下的 Google Chrome 浏览器还不行,自带的浏览器也测试没有通过。iPhone 手机的 Safari 浏览器也是不支持的。

获取图片

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

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

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

1、在前端截取 22 位以后的字符串作为图像数据,例如:

var data = imgData.substr(22);

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

var length = atob(data).length;

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

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

上传图片

在前端可以使用 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 的输出转换为图片上传的功能。这样你可以使用 Canvas 为用户提供图片编辑,例如裁剪、上色、涂鸦的画板功能,然后把用户编辑完的图片保存到服务器上。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0