How to decode data: image / png: base64 ... to a real image using javascript

Question

I captured a webcam image using HTML5, but the result is encoded in base64. How can I decode and put the real image on file upload. Here is my code

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

I want to upload a webcam image using a file upload

Answer 1

Convert base64 string to blob. A file that uses a file loader is a blob with additional properties, so blob loading works the same way.

 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

To convert a base64 string to an image:

 var image = new Image(), containerWidth = null, containerHeight = null; image.onload=function(){ containerWidth = image.width; containerHeight = image.height; } image.src = base64string; 

Or save the base64 string locally as a file (this file is turned off, but I find where I implemented it):

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