图片在线转换base64

  • Post author:
  • Post category:其他


DEMO预览


图片在线转换base64


图片在线转换base64—-实现方法

采用

FileReader

对象的

readAsDataURL

方法进行图片的转换!


JS实现

  1. 获取上传按钮,文字按钮,显示base64的结果,预览按钮,预览图片显示;
  2. 判断当前浏览器是否支持

    FileReader

    对象;
  3. 给上传按钮绑定 onchange 事件,判断上传的是图片文件;
  4. 清空预览图片和实例结果;
  5. new 一个

    FileReader

    对象,在其加载完成时将该对的 result 赋值给‘显示base64的结果’的 textarea 中;
  6. 执行 readAsDataURL 方法,传入files[0];
  7. 绑定预览结果!

(function(){
    // 获取上传按钮,文字按钮,显示base64的结果,预览按钮,预览图片显示
    var ruiUploadFile = document.getElementById('rui-upload-file');
    var uploadBtn = document.getElementById('upload-btn');
    var ruiBase64Result = document.getElementById('rui-base64-result');
    var previewImgBtn = document.getElementById('preview-img-btn');
    var ruiPreviewImg = document.getElementById('rui-preview-img');
    // 判断浏览器是否支持 FileReader
    window.onload = function(){
        if ( typeof(FileReader) === 'undefined' ){
            uploadBtn.innerHTML = '该浏览器不支持 FileReader,请更新您的浏览器!'
            ruiUploadFile.disabled = true;
        }
    }
    // 上传按钮绑定 onchange 事件
    ruiUploadFile.onchange = function(){
        var file = this.files[0];
        if(!/image\/\w+/.test(file.type)){   
            alert("请确保文件为图像类型"); 
            return false; 
        }
        ruiBase64Result.value = '';
        ruiPreviewImg.src = '';
        var r = new FileReader();  
        r.onload = function(){
            ruiBase64Result.value = r.result;
        }
        r.readAsDataURL(file);
    }
    // 预览按钮绑定 click 事件
    previewImgBtn.addEventListener('click',function(){
        ruiPreviewImg.src = ruiBase64Result.value;
    },false);
}())

DOM结构

  1. 上传按钮;
  2. 显示转换结果;
  3. 预览按钮;
  4. 预览图片的显示位置。

// 上传按钮
<div class="rui-upload-btn">
    <input type="file" id="rui-upload-file" value="上传要转换成base64的图片">
    <span id="upload-btn">上传要转换成base64的图片</span>
</div>
// 显示转换结果
<div class="rui-base64-box">
    <textarea name="rui-base64-result" id="rui-base64-result">data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ+2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd+X3az/ufvdtcH6H7+d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon+Hv+Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz+WY9pzSAGaAJeErq2/BXLob0GgQ+STgTflhJCMRpUxTxjMFbDl+EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS++jHU1Ii+h/eIX0UTi04d+G+bVtbqtcjdVorZi3Lk9/VHtw+Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/+L9dSqp+HS4+Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC+gECIwg0AAAAASUVORK5CYII=</textarea>
</div>
// 预览按钮
<div  class="rui-upload-btn rui-btng" id="preview-img-btn">预览图片</div>
// 预览图片的显示位置
<div class="rui-img-preview">
    <img id="rui-preview-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAC3klEQVRoQ+2YX0hTcRTHv9tqq2hWOlcINhNahJURQf9olBlREBRBBRGRSrSokKKVFVtGhPbk6qFBPUQUgT1UEPjiQ0KCEy0SZSVyM2s2Fdsauc2teePeMARLd+X3az/ufvdtcH6H7+d8zz2/c6d5talIRAY9Gg6scre5wyo3GNxh7rDKKsBbWmWGTsLhDnOHVVYB3tIqM5QPLd7SvKVVVgEqLb2iqhpL9h5IuVRjozEkR0YQbPfCX/8I4a6OlM8qDWQCeKLon+Hv+Ohxo/95vVKWlOKpA4c73k4p3mBejOwNW2AsWgOt3iCLHh0MoLvmGr61vE4JQkkQdeBQWwvena2YVlPevoNYZq/ELGMWIIoYbGyAz+WY9pzSAGaAJeErq2/BXLob0GgQ+STgTflhJCMRpUxTxjMFbDl+EpZjJ6DR6xEfGoDvehVC7a3qBc4/UoaCilPQGuZkBnBGtXTO1u2wXnBCb8pV99DK3myDuWQXTLYS6OYb5fc11v9FntA0FhDqQ0vRxBFFRPt60eOupXIHS1qYABbjccS++jHU1Ii+h/eIX0UTi04d+G+bVtbqtcjdVorZi3Lk9/VHtw+Cx42gt1lRQ8wkmDrwvzateQWFsDpcWFC8Tl40EsFhCHfrEHj5bCYcKZ9JG7CkUIJeVXsHc/Mt1Hfo8YqkFVgSkbf/EArtlX8mdKjNi85LZ6i9x2kHlndoVw3MO/cAWi3ERAKfnzyQPxFpPEwAT2rtgQDe37hMfI/+L9dSqp+HS4+Ww1Jml/doaXIPNzeh03GauMlMODxOVXz7Phau3yj/HItGIXjq4H/6mCg0U8Am2w5YLzp/388AIkIPuq6eQ6RXIAbNFLBEtfz8FUj/fkCnA5JJBBpe4MNNJ9vAxNRRSETFYQo6iaXkwMRKyWgi7jCjxhCTxR0mVkpGE3GHGTWGmCzuMLFSMpqIO8yoMcRkcYeJlZLRRNxhRo0hJivjHP4F3rC+gECIwg0AAAAASUVORK5CYII=" alt="">
</div>

CSS样式表

.rui-upload-btn{
    display: inline-block;
    border: 1px solid #ccc;
    font-size: 15px;
    color: #888;
    background-color: #eee;
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    position: relative;
}
#rui-upload-file{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}
#rui-base64-result{
    width: 100%;
    height: 300px;
    resize: none;
    border-radius: 3px;
    outline: medium;
    box-sizing: border-box;
    padding: 10px;
}
.rui-base64-box{
    margin: 20px auto;
}
.rui-img-preview{
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 10px;
    margin: 20px auto;
}
.rui-btng{
    background-color: lightgreen;
    border-color: lightgreen;
    color: #fff;
}

总结

通过整个流程可以看出,FileReader 对象是先将图片转化为base64,然后再进行的预览,由此可以知,该对象还能制作前端的图片预览功能!


DEMO预览


图片在线转换base64


DEMO下载


我的博客,欢迎交流!


我的CSDN博客,欢迎交流!


微信小程序专栏


前端笔记专栏


微信小程序实现部分高德地图功能的DEMO下载


微信小程序实现MUI的部分效果的DEMO下载


微信小程序实现MUI的GIT项目地址


微信小程序实例列表


前端笔记列表


游戏列表



版权声明:本文为m0_38082783原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。