互联网知识

精准传达 • 价值共享

洞悉互联网前沿资讯，探寻网站营销规律

网站建设 > 互联网知识 >

查看其它板块

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

作者：狐灵科技 | 2020-02-10 09:59 |点击：

一、我们在看代码时经常在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 文件对象
    }  
}
 
如没特殊注明，文章均为狐灵科技原创,转载请注明  https://www.hulingweb.cn/hulianwang/892.html
相关推荐
返回首页 了解更多建站资讯

—— 微信公众号 ——

热门标签

上一篇———————

利用sql将织梦文章内容图片绝对地址改成相对地址

下一篇———————

重庆网站建设利用js将图片转换为base64
多一份免费策划方案，总有益处。

请直接添加技术总监微信联系咨询

立即询问 技术总监在线 15523356218
网站设计 品牌营销

多一份参考，总有益处

联系狐灵科技，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：023-68168040 / 大客户专线：15523356218

在线咨询 在线咨询 提交需求

关于狐灵科技

+

狐灵致力于互联网品牌建设与网络营销，专业领域包括 网站建设、 SEO优化、移动互联网营销、高端网站建设、高端网站设计、品牌网站定制开发、营销策划推广电子商务、移动互联网营销、 为不同类型的客户提供良好的互联网应用定制解决方案，我们将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供一体化全方位的互联网品牌整合方案！

我们的优势

量身打造个性化网站制作

代码深度符合SEO优化

一站式企业网站建设服务

前沿视觉设计、研发能力

重庆网站建设公司

多项网站设计传播大奖

营销型网站建设专家

自主研发网站管理系统

B2C电商网站建设供应商

完善的售后服务体系

我们的不同

+

在我们的对手消耗大量的时间停留在碎片化的互联网设计或者程序实现的时候，我们已经开始把数字化品牌建设和网络传播进行了整合。我们提供从前期的网站品牌分析策划、网站设计、创意表现、系统开发以及后续网站运营反馈建议等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,为所有谋求长远发展的企业品牌贡献全力！

友情链接 交换友情链接 交换友情链接 展开

公司地址：重庆市九龙坡杨家坪重百大楼21-8 | 业务热线：023-68168040

Copyright © 2017-2020 Fox spirit Network. 狐灵科技 版权所有 | 渝ICP备19005721号-1

专业团队为您提供 重庆网页设计, 品牌网站设计,营销型网站制作,SEO优化关键词排名推广等服务,建网站就找狐灵科技！ | TAG标签 | 网站建设地图 | 网站地图

业务咨询 业务咨询 业务热线 023-68168040 提交需求 官方微信 狐灵网络科技官方微信