如何把base64转成图片

先从视频流中截取图片，转成base64码；

function CatchCode() {  

var canvans = document.getElementById("canvas");  
var imgData = canvans.toDataURL();
var base64Data = imgData.substr(22);
$("#newimg").attr("src",imgData);

}

然后，从保存的base64码，转化成图片

function catc(){

var oCanvas = document.getElementById("canvas"); 
if (oCanvas.getContext) {
        var C = oCanvas.getContext('2d');
}  
var imgdata = oCanvas.toDataURL('image/png');
var newdata = imgdata.replace(/^data:image\/png/, 'data:application/octet-stream');
$('#downloader').attr('download',times+'.png' ).attr('href', newdata);
}

下面贴上我写的代码

html代码

<div id="wrap">
<div class="left f-l">
<video id="video" width="320" height="320" autoplay>
</video>
<div class="c-l"></div>
<button id="capbtn">拍照</button>
</div>

<div class="right f-r">
<canvas id="canvas"></canvas>
<a href="#" id="downloader" onclick="catc()" download="">Download!</a>

<img id="newimg" src="" width="320" height="320" />
</div>

<input id="file" type="file" value="上传图片" />
<input type="button" name="" id="bu" value="dianj" />
</div>

js代码

// 获取摄像头的视频流在video标签中显示          
window.addEventListener("DOMContentLoaded", function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = {
"video": true
},
errBack = function(error) {
console.log("Video capture error: ", error.code);
};     
if (navigator.getUserMedia) {
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) {
navigator.webkitGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}else if (navigator.mozGetUserMedia) { // Firefox-prefixed
navigator.mozGetUserMedia(videoObj, function(stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
//拍照，          
$("#capbtn").click(function() {
context.drawImage(video, 0, 0, 320, 320);
CatchCode();           
});
}, false);
   
var interval = setInterval(CatchCode,"300");
// 刷新上传图像       
function CatchCode() {
// $("#snap").click();   
var canvans = document.getElementById("canvas");  
var imgData = canvans.toDataURL();
var base64Data = imgData.substr(22);
$("#newimg").attr("src",imgData);
}


var times = Date.parse(new Date());


function catc(){

var oCanvas = document.getElementById("canvas"); 
if (oCanvas.getContext) {
        var C = oCanvas.getContext('2d');
}  
var imgdata = oCanvas.toDataURL('image/png');
var newdata = imgdata.replace(/^data:image\/png/, 'data:application/octet-stream');
$('#downloader').attr('download',times+'.png' ).attr('href', newdata);
}