1.准备一张图片,比如1.gif

2.使用chrome浏览器,新建立一个窗口,然后将a.png拖动至浏览器窗口里面,打开控制台(检查),最后点击source

3.使用方法:

注意source获取的一串字符串码,前面要加上base64编码的前缀,才能正常使用,下面是一个例子:

//在css里的写法

#fkbx-spch, #fkbx-hspch {

background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center;

}
//在html代码img标签里的写法

<img src="data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=">
由此两个文件可以看出,加上的前缀是:  data:image/gif;base64, + 浏览器拿到的 base64编码

如何获取图片的base64编码的更多相关文章

  1. JS 获取图片的base64编码

    获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  2. angularJS <input type="file> 图片的base64编码

    talk is cheap show me the code <input type="file" id="file" name="file&q ...

  3. 本地图片转base64编码

    通常获取图片的base64编码都是通过input的上传file属性获取转化,但是有时候需要的是本地图片不经过上传操作,直接拿本地图片转成base64编码就不行了,input上传操作需要人为操作一下,没 ...

  4. 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用

    前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...

  5. js将图片转为base64编码，以字符串传到后台存入数据库

    (前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...

  6. JavaScript—图片与base64编码互相转换

    图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...

  7. 图片的 base64 编码

    图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...

  8. Base64编码 图片与base64编码互转

    package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...

  9. PHP将图片转base64编码以及base64图片转换为图片并保存代码

    图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...

随机推荐

  1. memset设置最大值

    初始化为最大值 memset(mp,0x7f,sizeof(mp));

  2. 洛谷P3943 星空——题解

    一道很好的锻炼思维难度的题,如果您能在考场上直接想出来的话,提高组450分以上就没问题了吧.(别像作者一样看了好几篇题解才勉强会) 先提取出题目大意:给定一个长度n<=40000的01串,其中1 ...

  3. Flume的断点续传解决

    根据需求,首先定义以下3大要素 采集源,即source——监控文件内容更新 :  exec  ‘tail -F file’ 下沉目标,即sink——HDFS文件系统  :  hdfs sink Sou ...

  4. ORA-01034、ORA-27101、ORA-00119错误

    ORA-01034ORA-27101Linux-x86_64 Error: 2:No such file or directory. 或者是 ORA-00119: invalid specificat ...

  5. eclipse连接Mysql和测试

    一.前期准备: 1.eclipse 2.Mysql workbench 3.jdbc 下载地址:https://www.mysql.com/products/connector/ 点击JDBC Dri ...

  6. 深入理解php的输出缓冲区(output buffer)

    这篇文章是翻译自Julien Pauli的博客文章PHP output buffer in deep,Julien是PHP源码的资深开发和维护人员.这篇文章从多个方面讲解了PHP中的输出缓冲区以及怎么 ...

  7. @清晰掉 GDB调试器中的战斗机

    GDB 的命令很多,本文不会全部介绍,仅会介绍一些最常用的.在介绍之前,先介绍GDB中的一个非常有用的功能:补齐功能.它就如同Linux下SHELL中的命令补齐一样.当你输入一个命令的前几个字符,然后 ...

  8. Jenkins安装以及配置

    Jenkins介绍 Jenkins是一个java开发的.开源的.非常好用持续集成的工具,它能帮我们实现自动化部署环境.测试.打包等等的工作,还可以在构建任务成功或者失败之后给我们发邮件通知. 什么叫持 ...

  9. Python基本语法_集合set/frozenset_内建方法详解

    目录 目录 前言 软件环境 可变集合Set set函数创建集合 创建空集合 集合元素的唯一性 集合推导式 set类型对象的内置方法 add增加一个元素 remove删除一个元素 pop随机删除并返回一 ...

  10. 初学单片机：Proteus介绍、Proteus与Keil联调(Windows10环境下)

    Proteus是一个仿真软件,可以在里面设计电路并模拟测试,也可生成PCB的布线等等,反正就是强大的不行.初学单片机,除了开发板,这个仿真器就是一个很好的调式环境.软件安装信息: Proteus 8. ...