Convert a Base64 into an image in javascript -


<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 image cropping tool , working fine . returns base64. want saved image file in local drive. me code . in advance :)

try code rendering base64 data (say base64_string) image

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

also need put code in onload event of reader api

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

Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -