JS 图片转Base64
JS 图片转Base64
有时候需要向HTML中插入一张图片，可苦于上线后找不到一个合适的网盘来存储这些图片，有没有一种办法能将图片转换成文字，然后直接插入HTML中呢，通过Base64编码就可以解决这个问题。
废话不多说直接上代码。不知道什么是Base64的请自行百度。
图片转Base64 示例代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>JS 图片转Base64</title>
- <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
- <script>
- function run(input_file,get_data){
- /*input_file：文件按钮对象*/
- /*get_data: 转换成功后执行的方法*/
- if ( typeof(FileReader) === 'undefined' ){
- alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
- } else {
- try{
- /*图片转Base64 核心代码*/
- var file = input_file.files[0];
- //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
- if(!/image\/\w+/.test(file.type)){
- alert("请确保文件为图像类型");
- return false;
- }
- var reader = new FileReader();
- reader.onload = function(){
- get_data(this.result);
- }
- reader.readAsDataURL(file);
- }catch (e){
- alert('图片转Base64出错啦！'+ e.toString())
- }
- }
- }
- $(function () {
- $("input").change(function () {
- run(this, function (data) {
- $('img').attr('src',data);
- $('textarea').val(data);
- });
- });
- });
- </script>
- </head>
- <body>
- <input type="file">
- <hr>
- <img style="max-height: 300px; height: 8em; min-width:8em;">
- <hr>
- <textarea style="display: block; width: 100%;height: 30em;"></textarea>
- </body>
- </html>
Base64图片的使用
- Base64格式
- data:[][;charset=][;base64],
- Base64 在CSS中的使用
- .demoImg{ background-image: url("data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...."); }
- Base64 在HTML中的使用
- <img width="40" height="30" src="data:image/jpg;base64,/9j/4QMZRXhpZgAASUkqAAgAAAAL...." />
