如何使用javascript解码数据:image/png:base64...到真实图像

我使用HTML5从网络摄像头捕获了图像,但结果在base64中编码.如何在文件上传中解码并放置真实图像.这是我的代码

HTML

    


    

        
        

            Camera button
            
            

            
            
            base64 image:
              
            

                Done
            
        
    

CSS

 body{
    font-family:Sans-Serif;
}
canvas{
    position:absolute; 
    left: -9999em;
}
#button{
    background-color: Red; 
    color: #fff; 
    padding: 3px 10px; 
    cursor:pointer; 
    display: inline-block; 
    border-radius: 5px;
}
#sidebar{
    float:right; 
    width: 45%;
}
#main{
    float:left; 
    width: 45%;
}
#imageToForm{
    width:100%;
}
#preview{
    margin: 20px 0;
}
label{
    display: block;
}
video#video{
    width:50%;
    float:left;
    height:100%;
}
.CUpopup{
    position:fixed;
    top:0px;
    left:0px; 
    bottom:0px;
    right:0px; 
    background:rgba(0,0,0,0.3);
}
#CUmain{position:absolute;
    top:0px;
    left:0px; 
    bottom:0px;
    right:0px;
    margin:auto;
    background:#fff;
    width:50%;
    height:50%;
    padding:10px;
    border-radius:10px;
}
.CUvideoside{
    width:48%;
    float:left;
    margin-left:2%;
}
.CUdone a{
    background-color: Red; 
    color: #fff; 
    padding: 3px 10px; 
    cursor:pointer; 
    display: inline-block; 
    border-radius: 5px;
    text-decoration:none;
}


**JS**


$(document).ready(function(){
    $('.CUupload').click(function(){
        $('.CUpopup').show();
    });
    $('.CUdone').click(function(){
        if($('preview').attr('src') != ""){
             $('.CUpopup').hide();
        }
    });

});
        var video;
        var dataURL;

        //http://coderthoughts.blogspot.co.uk/2013/03/html5-video-fun.html - thanks :)
        function setup() {
            navigator.myGetMedia = (navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
            navigator.myGetMedia({ video: true }, connect, error);
        }

        function connect(stream) {
            video = document.getElementById("video");
            video.src = window.URL ? window.URL.createObjectURL(stream) : stream;
            video.play();
        }

        function error(e) { console.log(e); }

        addEventListener("load", setup);

        function captureImage() {
            var canvas = document.createElement('canvas');
            canvas.id = 'hiddenCanvas';
            //add canvas to the body element
            document.body.appendChild(canvas);
            //add canvas to #canvasHolder
            document.getElementById('canvasHolder').appendChild(canvas);
            var ctx = canvas.getContext('2d');
            canvas.width = video.videoWidth / 4;
            canvas.height = video.videoHeight / 4;
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            //save canvas image as data url
            dataURL = canvas.toDataURL();
            //set preview image src to dataURL
            document.getElementById('preview').src = dataURL;
            // place the image value in the text box
           // document.getElementById('imageToForm').value = dataURL;
            $('.CUupload').attr('value',dataURL);
        }

        //Bind a click to a button to capture an image from the video stream
        var el = document.getElementById("button");
        el.addEventListener("click", captureImage, false);

我想使用文件上传来上传网络摄像头拍摄的图像

将base64字符串转换为blob.使用文件上传器的文件是具有额外属性的blob,因此上传blob的工作方式相同.

var file = dataURItoBlob(canString, 'image/png');


function dataURItoBlob(dataURI, type) {
    // convert base64 to raw binary data held in a string
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i 

UPDATE

要将base64字符串转换为图像:

var image = new Image(),
    cOntainerWidth= null,
    cOntainerHeight= null;

image.Onload=function(){
    cOntainerWidth= image.width;
    cOntainerHeight= image.height;
}
image.src = base64string;


或者将base64字符串保存在本地作为文件(当我找到我实现它的位置时,这个文件是关闭内存的):

    function saveImage(base64string) {
        var imageData = base64string.split(',')[1];
        var a = $("").attr("href", "data:Application/base64," + imageData )
                        .attr("download","image.png")
                        .appendTo("body");

            a[0].click();

        a.remove();
    }