html5 如何将摄像头拍下的图片下载到本地

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 如何将摄像头拍下的图片下载到本地相关的知识,希望对你有一定的参考价值。

我用video调用了电脑的摄像头,然后截图显示在网页中的canvas中,请问如何将该图片保存到本地电脑。

首先你canvas已经有图了


然后通过ajax发给后台 然后后台做保存

js:

    var data = _canvas.toDataURL(); 
    //删除字符串前的提示信息 "data:image/png;base64,"  
    var b64 = data.substring(22);  
  
    $.ajax( url: "RotateCanvas.aspx", data:  data: b64, name: i.toString() , success:  
            function ()  
              
              alert('OK');  
              
    );

java:

if (Request["name"] != null)  
  
    string name = Request["name"];  
    String savePath = Server.MapPath("~/images/output/");  
  
    try  
      
        FileStream fs = File.Create(savePath + "/" + name + ".png");  
        byte[] bytes = Convert.FromBase64String(Request["data"]);  
  
        fs.Write(bytes, 0, bytes.Length);  
        fs.Close();  
      
    catch (Exception ex)  
      
      

追问

function cut() var videoElement。。
var canvasObj 。。
。。drawImage(videoElement, 0, 0, 320, 240);
这是我的截图函数,请问你提供的代码放在哪里?

追答

你看你保存是想怎么触发

自动保存就放drawImage(videoElement, 0, 0, 320, 240); 后面

 function cut() var videoElement。。
  var canvasObj  。。
。。drawImage(videoElement, 0, 0, 320, 240);  
   
   var data = canvasObj.toDataURL(); 
    //删除字符串前的提示信息 "data:image/png;base64,"  
    var b64 = data.substring(22);  
   
    $.ajax( url: "RotateCanvas.aspx", data:  data: b64, name: i.toString() , success:  
            function ()  
              
              alert('OK');  
              
    );

参考技术A 首先你canvas已经有图了
然后通过ajax发给后台
然后后台做保存
js:
12345678910 var data = _canvas.toDataURL(); //删除字符串前的提示信息 "data:image/png;base64," var b64 = data.substring(22); $.ajax( url: "RotateCanvas.aspx", data: data: b64, name: i.toString() , success: function () alert('OK'); );
java:
1234567891011121314151617if (Request["name"] != null) string name = Request["name"]; String savePath = Server.MapPath("~/images/output/"); try FileStream fs = File.Create(savePath + "/" + name + ".png"); byte[] bytes = Convert.FromBase64String(Request["data"]); fs.Write(bytes, 0, bytes.Length); fs.Close(); catch (Exception ex)
参考技术B 看得见吗??看得见直接用QQ截图不就行了? 看不见用浏览器缓存的办法 ! 你说的是图片吧 应该不是动态的..

以上是关于html5 如何将摄像头拍下的图片下载到本地的主要内容,如果未能解决你的问题,请参考以下文章

Python实现调用摄像头并拍照发邮箱

html5怎么扫描二维码

php将抓取的图片链接下载到本地

VB中如何将WebBrowser打开的网页图片缩放显示?

iOS开发-iOS调用相机调用相册将图片保存到本地相册

多实例集群部署下的图片上传