Convert a Base64 into an image in javascript

Question

<script type="text/javascript">
    window.onload = function() {
        var options =
        {
            imageBox: '.imageBox',
            thumbBox: '.thumbBox',
            spinner: '.spinner',
            imgSrc: 'avatar.png'
        }
        var cropper = new cropbox(options);
        document.querySelector('#file').addEventListener('change', function(){
            var reader = new FileReader();
            reader.onload = function(e) {
                options.imgSrc = e.target.result;
                cropper = new cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
        })
        document.querySelector('#btnCrop').addEventListener('click', function(){
            var img = cropper.getDataURL();            
            document.querySelector('.cropped').innerHTML += '<img src="'+img+'">';
        })
        document.querySelector('#btnZoomIn').addEventListener('click', function(){
            cropper.zoomIn();
        })
        document.querySelector('#btnZoomOut').addEventListener('click', function(){
            cropper.zoomOut();
        })



    };
</script>

I downloaded an image cropping tool and it working fine . but it returns a Base64. I want that to be saved as a image file in the local drive. Help me with the code . Thanks in advance :)

http://stackoverflow.com/questions/17397319/save-canvas-as-jpg-to-desktop — mplungjan, Jan 27 '16 at 10:38
Possible duplicate of [HTML5 Canvas to PNG File](http://stackoverflow.com/questions/12796513/html5-canvas-to-png-file) — Harald K, Jan 27 '16 at 10:45

score 0 · Answer 1 · answered Jan 27 '16 at 10:45

0

try this code for rendering a base64 data (say base64_string) into an image

var html = "<img src='data:image/png;base64," + base64_string + "'>";
document.body.appendChild( html );

also you need to put this code in the onload event of the reader api

reader.onload = function(event) {
       var html = "<img src='data:image/png;base64," + event.target.result + "'>";
       document.body.appendChild( html );
   };

answered Jan 27 '16 at 10:45

gurvinder372

66,980
10
72
94

in which place the image will be stored @gurvinder – Parthiban MK Jan 27 '16 at 10:53
@ParthibanMK with my code, it will be appended to the body since I don't know where you want to append it. Where do you want it to be stored? – gurvinder372 Jan 27 '16 at 10:54
I want it to be stored as an image file in any of my directory @gurvinder372 – Parthiban MK Jan 27 '16 at 10:59
You cannot just store it in your default filesystem. FileSystem API works only in a sandboxed mode. You could use something like that to download a image into your browsers default download directory: var a = $("").attr("href", "http://www.example.com/some_image.png").attr("download", "img.png").appendTo("body"); a[0].click(); a.remove(); – hkernbach Jan 27 '16 at 16:24

Convert a Base64 into an image in javascript

1 Answers1