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


Tags: javascript,jquery,html,css,html5

Problem :

I have captured the image from webcam using HTML5 but the result is encoded in base64. How can I decode and put a 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 image captured by webcam using file upload



Solution :

Convert the base64 string to a blob. A file using a file uploader is a blob with extra properties, so uploading a blob works the same.

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 to save the base64 string locally as a file (this one is off memory while I locate 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();
    }

    CSS Howto..

    css ul and li - multiple spans in each li and how to line up the spans vertically

    How to hide a segment of my website using PHP

    How do the Sass variables get assigned to CSS selectors with Foundation 4?

    how to activate the functions of a div in css after focusing in a textbox in asp.net?

    How to Create a CSS3 Animated Circle that chages colors when clicked?

    How to get a website's position setup in a way that an image is centred?

    How to control number of items per row using media queries in Flexbox?

    How do you create a html scrollable area, that just uses the main browser scrollbar

    Ajax control toolkit combobox showing weird bullets in dropdown

    How are these sites implementing their onhover overlays?

    How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery?

    How to add code into a page with a lot of conflicting CSS, without using Scoped CSS?

    how do i avoid this title from overflowing?

    How to center text over an image while keeping it below fixed nav bar in css?

    How can I make browser scale image frames according to CSS before loading actual images into frames?

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to center a ul CSS

    How can I apply CSS to a JPG server-side?

    How Do I Use Gulp to Minify and Autoprefix CSS files from SASS/SCSS

    How to use “all” property in CSS

    How to hide text present inside search box?

    divs hide and show

    How to add circle shape to CSS button

    How to do simple client-side form validation using JavaScript/jQuery?

    How to get the same height on two Bootstrap columns? [duplicate]

    How to increase spacing between dt tags

    How can I have % of width of an img wrapped in a specific div width?

    How to create a floating JavaScript Clock for UTC and Local Time?

    how to zoom the background-image in ie8 with css

    how can I overcome existing css and change button style to the default windows style button?