Come decodificare i dati: image/png: base64 ... con un'immagine reale usando javascript

Question

Ho catturato l'immagine dalla webcam usando HTML5 ma il risultato è codificato in base64. Come posso decodificare e mettere un'immagine reale sul caricamento del file. Ecco il mio codice

HTML

<div class="fileUpload"> 
    <input type="file" accept="image/*" class="CUupload" onClick="return false"> 
</div> 
<div class="CUpopup" style="display:none"> 
    <div id="CUmain"> 
     <video id="video"></video> 
     <div class="CUvideoside"> 
      <a id="button">Camera button</a> 
      <!-- target for the canvas--> 
      <div id="canvasHolder"></div> 
      <!--preview image captured from canvas--> 
      <img id="preview" src="" width="160" height="120"> 
      <label>base64 image:</label> 
       <!--<input id="imageToForm" type="text">--> 
      <div class="CUdone"> 
       <a href="javascript:void(0);">Done</a> 
      </div> 
     </div> 
    </div> 
</div> 

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); 

voglio caricare un'immagine catturata dalla webcam usando file di caricamento

Answer 1

convertire la stringa base64 a un blob. Un file che utilizza un uploader di file è un blob con proprietà aggiuntive, quindi il caricamento di un BLOB funziona allo stesso modo.

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 < byteString.length; i++) { 
     ia[i] = byteString.charCodeAt(i); 
    } 

    // write the ArrayBuffer to a blob, and you're done 
    var bb = new Blob([ab], { type: type }); 
    return bb; 
} 

UPDATE

per convertire una stringa base64 a un'immagine:

var image = new Image(), 
    containerWidth = null, 
    containerHeight = null; 

image.onload=function(){ 
    containerWidth = image.width; 
    containerHeight = image.height; 
} 
image.src = base64string; 

o per salvare la stringa Base64 localmente come un file (questo è fuori dalla memoria, mentre io individuare dove ho implementato esso):

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

      a[0].click(); 

     a.remove(); 
    }