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. 判断字符串a是否以字符串b开头或结尾

    使用字符串的 str.startwith() 和 str.endswith()方法 import os , stat for name in os.listdir('.') if name.endsw ...

  2. UVA 12299 线段树 （ 单点跟新 ， 区间查询）

    题目链接:题意:在传统的RMQ的基础上加上一个操作:shift(i1,i2,i3...ik),表示将这些元素,依次向左移动一位(训练指南247页) #include <iostream> ...

  3. sh_01_重复执行

    sh_01_重复执行 # 打印 500 遍 Hello Python(复制粘贴的方法,手动复制500次) print("Hello Python") print("Hel ...

  4. 小样本学习Few-shot learning

    One-shot learning Zero-shot learning Multi-shot learning Sparse Fine-grained Fine-tune 背景:CVPR 2018收 ...

  5. django model序列化作用举例

    一直对使用DRF的了解停留在一知半解的状态,今天在实际操作中,感受到了DRF带来的方便 Django工程,其中两个model定义如下: AutomationHeadRaw: class Automat ...

  6. [BZOJ3812]主旋律：状压DP+容斥原理

    分析 Miskcoo orz 令\(f[S]\)表示使得\(S\)这个点集强连通的方案数. 然后呢?不会了 考虑到将一个有向图SCC缩点后,得到的新图是一个DAG,所以我们可以类比带标号DAG计数的解 ...

  7. beforeRouterEnter与replace的使用

    这次使用beforeRouterEnter来判断是一定条件下才执行相应的页面跳转. beforeRouterEnter:组件内路由,跟data,methods同级 beforeRouteEnter ( ...

  8. linux系统安装步骤

    在虚拟机安装OEL linux 6.5图解(64位) 一,搭建虚拟机环境 虚拟机环境建议10.0版本及以上 可以从官网上下载OELlinux的安装包,http://www.oracle.com 打开虚 ...

  9. 大数据笔记（三十一）——SparkStreaming详细介绍，开发spark程序

    Spark Streaming: Spark用于处理流式数据的模块,类似Storm 核心:DStream(离散流),就是一个RDD=================================== ...

  10. 译-使用Scroll Snapping实现CSS控制页面滚动

    特别声明,本文翻译自@alligatorio的Control Page Scroll in CSS Using Scroll Snapping一文,受限于译者能力,译文或存在不足,欢迎大家指出.如需转 ...