html5拍照上传下载demo

最新推荐文章于 2023-05-06 21:00:05 发布
最新推荐文章于 2023-05-06 21:00:05 发布
阅读量289 收藏
点赞数
分类专栏： 实用demo 文章标签： 拍照上传图片 下载图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w409384898/article/details/102510605
版权

<!DOCTYPE html>  
    <html>  
    <head>  
        <title>拍照上传</title>  
        <meta charset="utf-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <script src="/assets/js/jquery.min.js"></script>
    </head>  
    <body> 
        <video id="video" width="100%" height="270px" autoplay></video>
        <button id="snap" style="margin-left: 42%;">拍照上传</button>
        <!-- <button onClick="saveFile(filename);" type="button">下载图片</button> -->
        <canvas id="canvas" height="270px" style="display:none;"></canvas>
        <script type="text/javascript">
            var aVideo=document.getElementById('video');
            var aCanvas=document.getElementById('canvas');
            var ctx=aCanvas.getContext('2d');
            var width = '';
            
            navigator.getUserMedia  = navigator.getUserMedia ||
                              navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia ||
                              navigator.msGetUserMedia;//获取媒体对象（这里指摄像头）
            navigator.getUserMedia({video:true}, gotStream, noStream);//参数1获取用户打开权限；参数二成功打开后调用，并传一个视频流对象，参数三打开失败后调用，传错误信息
            
            function gotStream(stream) {
                video.src = URL.createObjectURL(stream);
                video.onerror = function () {
                  stream.stop();
                };
                stream.onended = noStream;
                video.onloadedmetadata = function () {
                  alert('摄像头成功打开！');
                  width = $("#video").width();
                  $("#canvas").width(width);
                };
            }
            function noStream(err) {
                alert(err);
            }
            function getTime() {
                var nowDate = new Date();var year = nowDate.getFullYear();
                var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1): nowDate.getMonth() + 1;
                var day = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
                var hours = nowDate.getHours()<10?"0" + nowDate.getHours():nowDate.getHours();
                var minutes = nowDate.getMinutes()<10?"0" + nowDate.getMinutes():nowDate.getMinutes();
                var seconds = nowDate.getSeconds()<10?"0" + nowDate.getSeconds():nowDate.getSeconds();
                var dateStr = year + month + day + hours + minutes + seconds;
                return dateStr;
            }

            document.getElementById("snap").addEventListener("click", function() {
                ctx.drawImage(aVideo, 0, 0, width, 270);//将获取视频绘制在画布上
                //获取canvas标签里的图片内容
                var imgData = document.getElementById('canvas').toDataURL(type);
                $.ajax({
                    type: "POST",
                    contentType:"application/json",
                    dataType: "json",
                    url: "https://localhost/api/app/savePhoto", //https才可以通过，不然会报错提示安全问题！
                    data: JSON.stringify({baseImg:"data:"+imgData, cm000034name:getTime()}),
                    success: function(data) {
                        console.log(data);
                        if (data.state == 'ok') {
                            alert("上传成功");
                            self.location = "http://localhost:8080/wxTools/index.html";
                        }
                    },
                    error: function(data) {
                        console.log(data);
                    }
                });
            });
            
            //下载代码
            var saveFile = function(filename){
                //获取canvas标签里的图片内容
                var imgData = document.getElementById('canvas').toDataURL(type);
                imgData = imgData.replace(_fixType(type),'image/octet-stream');
                
                var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = imgData;
                save_link.download = filename;
               
                var event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);
            };
            
            //下面的代码是保存canvas标签里的图片并且将其按一定的规则重命名
            var type = 'png';
            var _fixType = function(type) {
                type = type.toLowerCase().replace(/jpg/i, 'jpeg');
                var r = type.match(/png|jpeg|bmp|gif/)[0];
                return 'image/' + r;
            };
            
            // 下载后的文件名规则
            var filename = (new Date()).getTime() + '.' + type;
        </script>
    </body>  
</html>

早安晨之馨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PhoneGap-拍照上传DEMO
11-24
PhoneGap html5 拍照上传DEMO
HTML5实现文件上传下载功能实例解析
Mr_Zang666的博客
04-23 1589
" size="small" type="success" @click="submitUpload">上传到服务器选取文件responseType: "blob" // 表明返回服务器返回的数据类型。
html5手机端拍照上传demo,HTML5 实现手机拍照上传
weixin_39669769的博客
06-05 340
对上传的图片进行压缩，须要借助于canvas API，调用其中的canvas.toDataURL(type,encoderOptions);将图片按照必定的压缩比进行压缩，获得base64编码。重点来了：压缩策略：先设置图片的最大宽度 or 最大高度，通常设置其中一个就能够了，由于全部的手机宽高比差异不是很大。而后设置图片的最大size，allowMaxSize，根据图片的实际大小和最大容许大...
如何使用HTML5实现利用摄像头拍照上传功能
20386053
12-03 574
（为便于阅读，对原文进行了不失原意的适当修改，包括代码中一些错误的重复，并作了注释） 　　HTML5技术支持WebApp在手机上拍照，显示在页面上并上传到服务器。这是手机微博应用中常见的功能，当然你也可以在其它类型应用中适当使用此技术。 　　1、 视频流 　　HTML5 的 The Media Capture（媒体捕捉） API 提供了对摄像头的可编程访问，用户可以直接用 getUserMe...
HTML5图片上传预览，手机端
做个好的手艺人
11-03 655
&lt;!DOCTYPE html&gt; &lt;html lang="zh-cn"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="author" content="EdieLei" /&gt; &am
HTML5调用摄像头和麦克风Demo
u014265398的博客
05-06 1869
【代码】HTML5调用摄像头和麦克风Demo。
html页面通过ActiveX控件调用摄像头实现拍照上传demo代码下载
08-08
1.功能 ... //上传已拍照的相片 08 Camer.UpFileNew("D:/test1.bmp","http://127.0.0.1:8080/imagesUpload/upload.jsp"); 09 10 //删除本地照片 11 Camer.DeleteFile("D:/test1.bmp");
h5+实现手机端的录音，拍照，录像App
02-26
该demo使用h5+的功能基于android手机实现了录音，拍照，录像并进行上传下载，播放的功能，采用h5开发移动app，理论是支持android和ios的开发，开发工具采用hbuilder，利用hbuilder打包app在android机上运行，目前只...
原生apphtml2.rar
11-21
该demo使用h5+的功能基于android手机实现了录音，拍照，录像并进行上传下载，播放的功能，采用h5开发移动app，理论是支持android和ios的开发，开发工具采用hbuilder，利用hbuilder打包app在android机上运行，目前只...
H5人脸识别+活体检测（眨眼&摇头）
05-28
1.眨眼和摇头 2.使用的是clmtrackr.js 3.眨眼或摇头成功校验后请重新刷新页面或自行修改初始化逻辑
实现HTML5拍照上传
03-21
在HTML5的支持下，在手机上拍照已经成为可能。如何用手机进行拍照，显示在页面上并上传到服务器。HTML5 提供了对摄像头的可编程访问，用户可以直接获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签的输入来源
基于html5、JS实现的拍照上传图片
01-26
原理：调出摄像头，拍照保存到画布，将图片URi传送到后台
前端实现拍照上传demo
07-26
一个pc端实现拍照,并且上传到后台的demo,生成的是base64码需要后台处理
HTML5+CSS3 漂亮的个性相册
07-31
HTML5+CSS3 漂亮的个性相册，HTML5+CSS3 漂亮的个性相册.zip 解 压 密 码 [www.0html.com]
HTML5 拍照上传图片
05-19
支持google内核的浏览器，由于ie暂时不支持html5中的一些属性。 改代码采用getUserMedia属性编写的
H5调用手机摄像头，实时拍照上传（旧）
热门推荐
草巾冒小子的博客
07-05 3万+
H5调用手机摄像头，完成拍照实时上传 项目开发中，偶尔会遇到网页中调用手机摄像头，通过相册选择或直接实时拍照的方式，完成图片上传的功能型需求。 今天，就通过一个小的案例，演示一下完整的实现流程【效果截图省略】。 案例全部代码，示下： &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &am
HTML5 实现手机拍照上传
Yiu的博客
12-08 1万+
页面样式： 上传图片有原生的方法，如果只想要拍照上传，不希望用户选择图片上传，可以通过添加capture属性，该属性值有camcorder/microphone/camera...，此处选择camera。PS：该属性存在浏览器兼容性问题，不是所有的浏览器都支持。 input type="file" accept="image/*" capture="camera" > 因为原生file样
【Demo】HTML5 拍照
weixin_34293141的博客
08-02 228
本文主要讲解 手机浏览器 如何拍照为什么会有这个需求最近做一个项目要用到拍照然后上传照片，但是网页拍照一般都是用Flash做的，而我们主要是H5页面，如果在微信里面有权限就可以通过JSSDK调起摄像头拍照的。这里我们主要说下手机端浏览器如何调起摄像头H5如何打开摄像头不需要特别的支持，只需要一行代码就可以了<inputid="upload"type="file"a...
如何使用HTML5实现拍照上传应用
mixer_a的专栏
03-14 221
在HTML5规范的支持下，WebApp在手机上拍照已经成为可能。在下面，我将讲解Web App如何用手机进行拍照，显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。我们需要做的是添加一个HTML5的Video标签，并将从摄像头获得视频作为这个标签...
android上传下载图片demo
最新发布
07-06
Android上传下载图片的demo可以分为两部分来实现，一部分是上传图片，另一部分是下载图片。以下是一个简单的示例代码： 上传图片的demo代码： 1. 首先，在AndroidManifest.xml文件中加入网络权限： 2. 在布局文件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值