Преобразование Base64 в изображение в 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> 

Я загрузил инструмент обрезки изображения, и он отлично работает. но он возвращает Base64. Я хочу, чтобы это было сохранено как файл изображения на локальном диске. Помогите мне с кодом. Заранее спасибо :)

Answer 1

попробовать этот код для рендеринга base64 данные (скажем base64_string) в изображение

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

также вы должны поместить этот код в onload случае reader апи

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