如何将图片转换base64格式?data:image/png;base64又是什么?

一、我们在看代码时经常在img或css背景图片中看到: 
src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOus 
bgAAAAeFBMVEUAwAD///+U5ZTc9twOww7G8MYwzDCH4==”

src或 url() 中有一大串编码。它把一些 8-bit 数据翻译成标准 ASCII 字符,网上有很多免费的base64 编码和解码的工具, 后面跟的一串代码就相当于链接地址。

二、目前,Data URL scheme 支持的类型:

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

三、js将图片转化为base64(2种方法)

利用canvas 将图片转化为base64 编码格式
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d'),
   img = new Image;
   img.src="./vheider.jpg";
 //  img.setAttribute('crossOrigin', 'anonymous')  // 图片跨域时有用
   img.onload = function(){
       canvas.height = img.height;
       canvas.width = img.width;
       ctx.drawImage(img,0,0);
       dataURL =canvas.toDataURL("image/jpeg");

        $('#img').attr('src', dataURL);
        console.log(canvas.toDataURL("image/jpeg"))

  };

注意: 这里要在服务端打开,不然浏览器可能会报 index.html:41 Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 错误

2 . 利用 html5 的 FileReader 将图片转化base64格式 
FileReader 是H5提供的一个处理文件的API, 
① 判断浏览器是否支持FileReader

if(window.FileReader){
    //处理文件
}else{
   return "浏览器不支持FileRedaer"
}

② FileReader 接口有四个方法:

readAsBinaryString (file) 将文件读取为二进制码 
readAsDataURL (file) 将文件读取为 DataURL 
readAsText (file,encoding) 将文件读取为文本(第二个参数是编码格式,一般默认是UTF-8) 
about 中断读取

③ FileReader还提供给了一些事件:

onabort 中断时触发
onerror 出错时触发
onload 文件读取成功完成时触发
onloadend 读取完成触发,无论成功或失败
onloadstart 读取开始时触发
onprogress 读取中
注意:重点内容 
FileReader 读取后的文件不会返回给FileReader 本身, 而是存储在了 result 中

HTML

<input type="file" id="file"  multiple="multiple">
<div id="imgDiv"></div>       

var result = document.getElementById("result");  
var file = document.getElementById("file");
file.change=function(){
    var file = file.files[0]
    var reader=new FileReader();  

    reader.readAsBinaryString(file);  
    reader.οnlοad=function (e){  
        imgDiv.innerHTML='<img src="'+this.result+'" alt=""/>'  
        console.log(this) // 打印出转换后的 file 文件对象
    }  
}

  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值