HTML5下Base64圖片處理結合攝像頭抓拍裁切

阿新 • • 發佈：2019-01-20

最近要實現一個現場報名功能，採用B/S結構系統實現現場報名，現場採集使用者資訊錄入系統。

前端使用bootstrap框架，後臺使用ASP.NET MVC4。

剛開始只需要使用者提供身份證，用讀卡器讀出身份證的資訊自動填充到輸入框中，然後補充其他資訊儲存即可。

身份證讀卡器就是這貨，USB介面。

做了個操作介面：

讀身份證資訊比較好辦，呼叫讀卡器介面對應的方法即可。

通過實驗發現介面方法讀取頭像照片時，得到的是Base64格式的jpg圖片，並且不包含“data:image/jpg;base64,”這段頭資訊，需要自己手工加上。圖片尺寸為102*126畫素，在圖片上右擊看屬性：

提交報名資訊時，後臺將獲取的Base64字串轉換成jpg並儲存在指定路徑下：

本來功能也就完成了，後來使用者提出沒帶身份證報名的情況，需要增加從檔案選擇照片和現場用攝像頭拍照兩種方式，先感慨一下需求變更，還是要想辦法實現功能。

分析後決定將檔案選取和攝像頭拍照用彈窗來操作，取得的圖片直接展示在頭像框處，並且為了和身份證讀卡器讀出的圖片格式相容，都設為Base64格式。這樣就形成了統一思路，不論用什麼方式獲得頭像照片（讀身份證、檔案選取、攝像頭拍照），均以Base64格式展示在操作介面，這樣提交到後臺處理時方式是一樣的。

================================= 分割一下 =================================

從檔案中選取照片的處理

瀏覽照片選中時，用js控制在操作介面中展示選中照片，同時父視窗頭像框處展示經過Base64處理過的影象。點選右上角關閉按鈕或右下角確定按鈕時，關閉當前彈窗。

元素"imgFile"為圖片選擇視窗中要展示的圖片，"imgAvatar"為父視窗中的頭像框，"hPhoto"為父視窗記錄Base64內容的隱藏域，注意去掉了"data:image/jpeg;base64,"這段頭資訊，只保留圖片資料內容。

此時頭像框中圖片格式與讀身份證得到的圖片格式一樣，後臺儲存方法都不用改。即使選擇的圖片格式不是jpg的，仍然會在後臺程式碼中自動轉換成jpg格式。

=================================再分割一下=================================

攝像頭拍照的處理稍微麻煩一下，主要在於拍照的圖片是橫版的，但系統要求的頭像圖片是豎版的，需要進行裁切。

攝像頭就是普通那種USB介面的攝像頭，免驅動的。

網頁呼叫攝像頭拍照有多種方案，對比後採用的是flash方式。

專案中引用需要的資原始檔：

頁面中呼叫：

思路是這樣的：flash顯示攝像頭實時畫面，點選“拍照”按鈕時捕獲當前畫面，然後按比例裁切中間一部分影象展示在畫布中。

攝像頭實時畫面設定為320*240畫素，按照頭像實際尺寸計算，應該擷取拍照畫面中間的194*240區域。

為了方便操作者預覽，在攝像頭實時畫面的左右兩側增加了一個半透明區域，意思是這兩塊區域要刪掉，只保留中間一部分。

彈窗中左側是攝像頭畫面，下方有“拍照”按鈕，拍照的圖片自動裁切後顯示在右側，父視窗同步顯示拍照結果。

左右兩側的半透明區域是用css控制的div透明度，注意flash呼叫攝像頭的z-index數值，要將半透明區域疊加到flash之上才行。

攝像頭畫面只保留中間的194*240區域的內容，因此拍照後要將原始圖片從（63,0）位置開始裁切大小為194*240區域的影象，js程式碼是image = ctx.getImageData(63, 0, 194, 240);

顯示攝像頭畫面和抓拍畫面的html：

其中，id為“webcam”的div在頁面載入時會append上flash，由flash呼叫攝像頭。

=================================待改進地方 =================================

1、程式中bootstrap框架採用ACE1.3.3版本，開啟對話視窗時，是將彈窗檔案解析後附加在本頁中，因此會受本月的指令碼和程式碼影響。從檔案選取圖片功能用預設的對話視窗可以實現功能，但攝像頭拍照功能則不能生效，我只能用模態視窗來實現效果，並且在點選“拍照”按鈕時將抓拍的圖片回傳給父視窗。

2、因客戶只使用IE瀏覽器，並且版本也固定，因此可以不用考慮過多相容問題。身份證讀卡器使用Activex控制元件註冊，如果是火狐或谷歌瀏覽器要載入不同的控制元件。另外實時攝像頭畫面兩側半透明區域只在IE下起作用，其他瀏覽器要再處理。

=================================總結=================================

1、通過三種不同方式獲取頭像資訊，傳到後臺儲存時已經處理成同樣的格式，這也是程式碼分離原則的體現。以頭像框為中轉站，前臺js各種處理，達到同樣格式的Base64圖片；後臺獲取圖片字串，統一儲存成jpg格式。也相當於呼叫後臺的一個方法時，通過各種手段將傳入引數統一好格式，伺服器端方法只需要接收到引數內容處理即可，不需要再做更多情況判斷。

2、不同版本的bootstrap有一定的瀏覽器相容問題，特別是jquery版本。某些時候使用原生js是更好的選擇。

3、花哨的功能儘量少，用最簡單的方式實現功能，穩定性是最好的。

附：程式碼檔案

父頁面部分程式碼

<br />

</div>

jQuery(function ($) {

$("#FilePicture").on("hidden.bs.modal", function () {
$(this).removeData("bs.modal");
});

function CapturePicture() {
return window.showModalDialog("CapturePicture", GetResult, "dialogWidth=620px,dialogHeight=400px");
}
function GetResult(imageContent) {
document.getElementById('imgAvatar').src = imageContent;
document.getElementById('hPhoto').value = imageContent.substring(imageContent.indexOf(";base64,") + 8);
}

});

</script>

檔案選擇子頁面（FilePicture）

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function showImage(file) {
var imageContent = '';
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
imageContent = evt.target.result;
document.getElementById('imgFile').src = imageContent;
document.getElementById('imgAvatar').src = imageContent;
document.getElementById('hPhoto').value = imageContent.substring(imageContent.indexOf(";base64,") + 8);
}
reader.readAsDataURL(file.files[0]);
}
</script>

</head>
<body class="no-skin">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="smaller lighter blue no-margin">選擇照片</h3><h5>(尺寸：102*126畫素或等比例)</h5>
</div>
<div class="modal-body">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<input type="file" id="picFile" name="picFile" onchange="showImage(this)" />
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<img id="imgFile" style="height:220px;" alt="" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" data-bb-handler="success" class="btn btn-sm btn-success">
<i class="ace-icon fa fa-check"></i> 確定
</button>
</div>
</body>
</html>

攝像頭抓拍子頁面（CapturePicture）

@{
Layout = null;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>拍照</title>
<style type="text/css">
#webcam {
width: 320px;
}
#webcam {
position:relative;
}
object {
display:block; /* HTML5 fix */
position:relative;
z-index:100;
}
.div1{
width:320px;
height:240px;
position:relative;
border:1px solid #cccccc;
}
.div2{
width:63px;
height:240px;
position:absolute;
left:0;
top:0;
background:#000000;
z-index:9999;
opacity:0.3;
filter:alpha(opacity:30);
moz-opacity:0.3;
}
.div3{
width:63px;
height:240px;
position:absolute;
right:0;
top:0;
background:#000000;
z-index:9999;
opacity:0.3;
filter:alpha(opacity:30);
moz-opacity:0.3;
}
</style>
<script src="/assets/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/assets/js/webcam/jquery.webcam.js"></script>
<script type="text/javascript">
var pos = 0;
var ctx = null;
var cam = null;
var saveCB;
var image = [];

$(document).ready(function () {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0, 0, 320, 240);
var img = new Image();
img.src = "";
img.onload = function () {
ctx.drawImage(img, 0, 0);
}
image = ctx.getImageData(0, 0, 320, 240);
}

if (canvas.toDataURL) {
ctx = canvas.getContext("2d");
image = ctx.getImageData(63, 0, 194, 240);
saveCB = function (data) {
var col = data.split(";");
var img = image;
for (var i = 63; i < 257; i++) {
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;
}
if (pos >= 4 * 194 * 240) {
ctx.putImageData(img, 0, 0);
pos = 0;
}
};

} else {
saveCB = function (data) {
image.push(data);
pos += 4 * 194;
if (pos >= 4 * 194 * 240) {
pos = 0;
}
};
}

jQuery("#webcam").webcam({

mode: "callback",
swffile: "/assets/js/webcam/jscam_canvas_only.swf",
onCapture: function () {
webcam.save();
var canvas = document.getElementById("canvas")
var imageContent = canvas.toDataURL("image/png")
var callBack = window.dialogArguments;
if (callBack != undefined && callBack != null) {
callBack(imageContent);
}
},
onSave: saveCB,
debug: function (type, string) {
jQuery("#status").html(type + ": " + string);
},
onLoad: function () {
var cams = webcam.getCameraList();
for (var i in cams) {
jQuery("#cams").append("<li>" + cams[i] + "</li>");
}
}
});
});

</script>
</head>

<body class="no-skin" style="margin:10px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="56"><ul id="cams"></ul></td>
<td width="50"> </td>
<td><p id="status"></p></td>
</tr>
<tr style="height:3px;">
<td><hr /></td>
<td></td>
<td><hr /></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="center">
攝像頭畫面
</td>
<td></td>
<td align="center">
拍照結果
</td>
</tr>
<tr>
<td align="center">
<div id="webcam" class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</td>
<td></td>
<td align="center">
<div>
<canvas id="canvas" width="194" height="240"></canvas>
</div>
</td>
</tr>
<tr>
<td align="center"><a href="javascript:webcam.capture();void(0);">拍照</a></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" height="20"> </td>
</tr>
<tr>
<td colspan="3" height="50" align="center" style="background-color:#cccccc"><input type="button" value="完成" onclick="window.close();" /></td>
</tr>
</table>

</body>
</html>

HTML5下Base64圖片處理結合攝像頭抓拍裁切

HTML5下Base64圖片處理結合攝像頭抓拍裁切

Android圖片上傳（頭像裁切+原圖原樣）

圖片處理之 Base64

base64圖片上傳處理方式

前端性能優化------------圖片處理Css Sprites&Base64

還在羨慕微信／微博的圖片處理?－android酷炫圖片處理(下)

將圖片檔案轉化為位元組陣列字串，並對其進行Base64編碼處理和對位元組陣列字串進行Base64解碼並生成圖片

(python)subprocess利用ffmpeg處理多目錄下的圖片合成某一幀率的視訊

關於實現接收base64圖片資料並以圖片儲存到本地的處理

基於HTML5 Canvase的線上畫圖及圖片處理工具

結合springmvc，使用ajax上傳base64圖片資料

前端開發之使用base64模式處理圖片

base64圖片在各種瀏覽器的相容性處理

如何使用 HTML5 的picture元素處理響應式圖片

html5 canvas 載入圖片URL並轉換成base64

Linux下使用v4l2程式設計操作攝像頭裝置獲取圖片

通過圖片地址，將圖片處理成base64，使用ajax上傳圖片

base64加密圖片處理

css3圖片處理方式 object-fit

Android 中圖能夠用到的圖片處理類 BitmapUtils

HTML5下Base64圖片處理結合攝像頭抓拍裁切

相關推薦