点击“保存”按钮，画布图片将被保存为“照片.png”以供下载。APP开发者可以自己体验，本例不做图片说明。利用编辑器打开“8-1.用HTML5拍照和摄像.html”文件，代码如下：【代码8-1】
01 <! DOCTYPE HTML> 02 < html> 03 < head> 04 < style> // ...... 省略 样式 代码， 读者 可以 参考 下载 资 源源 码 </ style> 05 </ head> 06 < body> 07 < header>< h2> 用 HTML 5 拍照 和 摄像</ h2></ header>
08 < section> 09 <!-- 关闭 音频、 显示 视频 工具 条 --> 10 < video width=" 360" height=" 240" muted controls></ video> 11 <!-- 快照 画布 --> 12 < canvas width=" 240" height=" 160"></ canvas> 13 </ section> 14 < section> 15 < a id=" save" href=" javascript:;" download=" 照片"> 保 存</ a> 16 < button id=" photo"> 快 照</ button> 17 </ section> 18 </ body> 19 < script> 20 (function () { 21 var video = document. querySelector(' video'), // 视频 元素 22 canvas = document. querySelector(' canvas'), // 画布 元素 23 photo = document. getElementById(' photo'), // 拍照 按钮 24 save = document. getElementById(' save'); // 保存 按钮 25 // 获取 浏览器 摄像 头 视频 流 26 navigator. getUserMedia = navigator. getUserMedia || navigator.
navigator. webkitGetUserMedia || 27 navigator. mozGetUserMedia; 28 if (navigator. getUserMedia) { 29 navigator. getUserMedia({ video: true }, function (stream) { // 摄像 头 连接 成功 回 调 30 if ('mozSrcObject' in video) { // 是否 为 火狐 浏览器 31 video. mozSrcObject = stream; 32 } else if (window. webkitURL) { // 是否 为 Webkit 核心 浏览器 33 // 获取 流的 对象 URL 值 赋予 video 元素 src 34 video. src = window. webkitURL. createObjectURL( stream); 35 } else { // 其他 标准 浏览器 36 video. src = stream; 37 } 38 video. play(); // 播放 视频 39 }, function (error) { // 摄像 头 连接 失败 回 调 40 console. log( error); // 控制台 显示 错误 回 调 信息
41 }); 42 }; 43 photo. addEventListener(' click', function (e) {// 拍照 按钮 点击 事件 监听 44 e. preventDefault(); // 阻止 按钮 默认 事件 45 canvas. getContext(' 2d'). drawImage( video, 0, 0, 240, 160); // 在 画布 中 绘制 视频 照片 46 save. setAttribute(' href', canvas. toDataURL(' image/ png')); // href 属性 值 为 图片 base64 值 47 }, false); 48 })(); 49 </ script> 50 </ html>
