成人无码黄动漫在线播放,亚洲国产精品一区二区色迷迷影院,欧美日本国产一区,99热只有这里有精品

首頁
  1. 當前位置：
  2. 首頁
  3. 技術(shù)部落
  4. HTML中網(wǎng)頁拍照并上傳照片的實現(xiàn)方法

HTML中網(wǎng)頁拍照并上傳照片的實現(xiàn)方法

網(wǎng)頁拍照 2018-05-29 3064

對于如何在網(wǎng)頁上進行拍照并上傳照片的方法，可能很多程序員都覺得非常的簡單，不就是調(diào)動一下攝像頭開啟嗎?但是真正實現(xiàn)起來的話會發(fā)現(xiàn)，其實并不是這樣子的，經(jīng)過我們多次嘗試終于成功了，下面就跟大家分享一下。

代碼如下：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%@ page session="false" %>  
<%@ page language="java" contentType="text/html;  
charset=UTF-8"  
         pageEncoding="UTF-8"%>  
<html>  
<head>  
    <title>spittr.Spitter</title>  
    <link rel="stylesheet"  
    type="text/css"  
    href="/resource/layui/css/layui.css" >  
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.js"></script>  
    <script src="/resource/jquery.webcam.js"></script>  
    <script type="text/javascript">  
        $(function() {  
  
            var pos = 0, ctx = null, saveCB, image = [];  
//創(chuàng)建畫布指定寬度和高度  
            var canvas = document.createElement("canvas");  
            canvas.setAttribute('width', 320);  
            canvas.setAttribute('height', 240);  
//如果畫布成功創(chuàng)建  
            if (canvas.toDataURL) {  
//設置畫布為2d，未來可能支持3d  
                ctx = canvas.getContext("2d");  
//截圖320*240，即整個畫布作為有效區(qū)(cutx?)  
                image = ctx.getImageData(0, 0, 320, 240);  
  
                saveCB = function(data) {  
//把data切割為數(shù)組  
                    var col = data.split(";");  
                    var img = image;  
//繪制圖像(這里不是很理解算法)  
//參數(shù)data  只是每行的數(shù)據(jù)  ，例如320*240 大小的照片，一張完整的照片下來需要240個data，每個data有320個rgb  
                    for(var i = 0; i < 320; i++) {  
                        //轉(zhuǎn)換為十進制  
                        var tmp = parseInt(col[i]);  
                        img.data[pos + 0] = (tmp >> 16) & 0xff;  
                        img.data[pos + 1] = (tmp >> 8) &  0xff;  
                        img.data[pos + 2] = tmp & 0xff;  
                        img.data[pos + 3] = 0xff;  
                        pos+= 4;  
                    }  
//當繪制320*240像素的圖片時發(fā)給后端php  
                    if (pos >= 4 * 320 * 240) {  
//把圖像放到畫布上,輸出為png格式  
                        ctx.putImageData(img, 0, 0);  
                        console.log(1,canvas.toDataURL("image/jpeg"));  
                        $.post("/fileupload", {type: "data", img: canvas.toDataURL("image/jpeg")},  
                            function(data,status){  
                                alert(status);  
                            }  
                        );  
                        pos = 0;  
  
                    }  
                };  
  
            } else {  
                saveCB = function(data) {  
//把數(shù)據(jù)一點點的放入image[]  
                    image.push(data);  
                    pos+= 4 * 320;  
                    console.log(1,image.join('|'));  
                    if (pos >= 4 * 320 * 240) {  
                        $.post("/fileupload", {type: "pixel", img: image.join('|')});  
                        pos = 0;  
                    }  
                };  
            }  
            $("#webcam").webcam({  
                width: 320,  
                height: 240,  
                mode: "callback",  
                swffile: "/resource/jscam_canvas_only.swf",  
                onSave: saveCB,  
                onCapture: function () {  
                    webcam.save();  
                },  
  
                debug: function (type, string) {  
                    console.log(type + ": " + string);  
                }  
            });  
        });  
    </script>  
</head>  
<body>  
<div id="webcam"></div>  
<input type="button" onclick="webcam.capture();" value="點擊觸發(fā)" >  
</body>  
</html> 

注意

這是通過ajax來post圖片到服務器上，這是http請求，不能直接本地post。

需要jquery.webcam.js和jscam_canvas_only.swf 使用的時候目錄修改一下

服務端

網(wǎng)上的方法大都也都是這樣，不過都不提要去掉"data:image/jpeg;base64,"的事情，害我找了好久。

還有一點Base64最好用org.apache.commons.codec.binary.Base64的 其他的好像有一個會出錯，maven地址如下

<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.11</version>
</dependency>

服務端代碼如下

import org.apache.commons.codec.binary.Base64;  
import org.springframework.stereotype.Controller;  
import org.springframework.web.bind.annotation.*;  
  
import java.io.FileOutputStream;  
import java.io.IOException;  
import java.io.OutputStream;  
import java.util.List;  
  
@Controller  
@RequestMapping("/fileupload")  
public class FileUploadController {  
  
  @RequestMapping(method=RequestMethod.GET)  
  public String uploadForm() {  
    return "uploadForm";  
  }  
}  
@RequestMapping(method=RequestMethod.POST)  
@ResponseBody  
public String processUpload(@RequestParam("img") String img) throws IOException {  
  GenerateImage(img);  
  return "success";  
}  
public static boolean GenerateImage(String imgStr)  
{   //對字節(jié)數(shù)組字符串進行Base64解碼并生成圖片  
  if (imgStr == null) //圖像數(shù)據(jù)為空  
    return false;  
  try  
  {  
    //Base64解碼  
    imgStr=imgStr.replaceFirst("data:image/jpeg;base64,", "");  
    byte[] b = Base64.decodeBase64(imgStr);  
    for(int i=0;i<b.length;++i)  
    {  
      if(b[i]<0)  
      {//調(diào)整異常數(shù)據(jù)  
        b[i]+=256;  
      }  
    }  
    //生成jpeg圖片  
    String imgFilePath = "D:\\img\\new.jpg";//新生成的圖片  
    OutputStream out = new FileOutputStream(imgFilePath);  
    out.write(b);  
    out.flush();  
    out.close();  
    return true;  
  }  
  catch (Exception e)  
  {  
    e.printStackTrace();  
    return false;  
  }  
}  

本文由專業(yè)的app開發(fā)報價燚軒科技整理發(fā)布，如需轉(zhuǎn)載請注明作者及出處。

分享到微信朋友圈 +
打開微信，點擊底部的“發(fā)現(xiàn)”，使用 “掃一掃” 即可將網(wǎng)頁分享到我的朋友圈。 如何使用？
推薦文章

熱貼More +

服務范圍More +

聯(lián)系我們

請掃二維碼聯(lián)系客服

854221200@qq.com

185-3825-9583

QQ客服

關(guān)于  ·  招聘  ·  案例中心  ·  網(wǎng)站地圖

?@2018 燚軒科技版權(quán)所有 豫ICP備16015002號-4

百度提供搜索支持

燚軒軟件科技