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

Question

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 ```

``` 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:…

Accepted Answer

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

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

Solution

Problem

Related problems