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. CVPR 2018 DeepGlobe

    在刚刚结束的CVPR2018: DeepGlobe Road Extraction Challenge(全球卫星图像道路提取)比赛中,北京邮电大学信息与通信工程学院模式识别实验室张闯老师指导的研究生周 ...

  2. 一个优雅的图片裁剪插件vue-cropper

    github:  https://github.com/xyxiao001/vue-cropper

  3. sqli-labs29-31关Background-6 服务器（两层）架构

    首先介绍一下29,30,31这三关的基本情况: 服务器端有两个部分:第一部分为tomcat为引擎的jsp型服务器,第二部分为apache为引擎的php服务器,真正提供web服务的是php服务器.工作流 ...

  4. android开机引导界面的几种实现

    不少应用在设计的时候都会有几个引导界面,这里总结一下几个典型实现: 之前自己做过仅具有一个引导界面的应用,在welcomeActivity中设置一张图片,更复杂的为该图片设置一个渐入渐出的动画,然后利 ...

  5. centos7没有IP地址

    查看网卡 ip addr查看网卡 我截图中有ip,是因为我已经设置过了. eth0是对外的网卡,我们接下来设置这个网卡,你的网卡名字可能和我的不一样. 修改网卡 修改/etc/sysconfig/ne ...

  6. MVC的各个部分都有那些技术来实现?如何实现?

    MVC是Model-View-Controller的简写. Model 代表的是应用的业务逻辑(通过JavaBean,EJB组件实现), View 是应用的表示面(由JSP页面产生), Control ...

  7. 测开之路一百三十八：会话管理之session

    session管理和使用,需要用到flask的session模块和设置安全码:app.secret_key 比如列表页和编辑功能只能给admin用 列表页 编辑页 添加session 登录成功时,把u ...

  8. 算法初级（scala）

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/two-sum 1.给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为 ...

  9. jQuery 获取设置图片 src 的路径

    1.获取: $('#img')[0].src 2.设置:$('#img').attr("src", data.CodeUrl);

  10. python+selenium模拟鼠标操作

    from selenium.webdriver.common.action_chains import ActionChains #导入鼠标相关的包 ------------------------- ...