将Base64转换为javascript中的图像

时间:2016-01-27 10:35:20

标签: javascript image base64

<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。我希望将其保存为本地驱动器中的图像文件。帮我处理代码。在此先感谢:)

1 个答案:

答案 0 :(得分:0)

尝试使用此代码将base64数据(例如base64_string)渲染为图像

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

您还需要将此代码放入onload api

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