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. POJ 2155 Matrix (树状数组 && 区间计数)

    题意 : 给出一个N*N的矩阵, 矩阵只有可能包含0或1, 一开始则全部是0.对于矩阵可以进行两种操作, 第一种是输入 C x1 y1 x2 y2 表示, 对以(x1, y1)为左上角, 以(x2, ...

  2. VS Code报错Module 'xx' has no 'xx' member pylint(no-member)解决办法

    pylint是vscode的python语法检查器,pylint是静态检查,在用第三方库的时候有些成员只有在运行代码的时候才会被建立,它就找不到成员,在设置(settings.json)里添加 &qu ...

  3. Spotlight_on_windows 安装和监控

    一.下载 1.下载并安装Spotlight_on_windows 2.填写注册码 Authorization Key:295713336449229168750 Site Message:Bergel ...

  4. [UPC10525]:Dove打扑克（暴力+模拟）

    题目描述 $Dove$和$Cicada$是好朋友,他们经常在一起打扑克来消遣时光,但是他们打的扑克有不同的玩法. 最开始时,牌桌上会有$n$个牌堆,每个牌堆有且仅有一张牌,第$i$个牌堆里里里那个扑克 ...

  5. bootstrap editable初始化后表单

    function loadData() { var url = "${ctx }/sys/marketing/product/page"; $('#tablepager').boo ...

  6. android图片的缩放、圆角处理

    android中图片缩放方法有三种:1,bitmapFactory:2,bitmap+metrix:3,thumbUtil 方法一:bitmapFactory: public static Bitma ...

  7. Java中创建String的两种方式

    1.在Java中,创建一个字符串有两种方式 String x = "abc";String y = new String("abc"); 这两种方式有什么区别呢 ...

  8. Android中非activity类调用activity方法

    例如需要使用: alarmManager = (AlarmManager) getSystemService(ALARM_SERVICE); 第一种方法就是使其类变成Activity. 第二种方法便是 ...

  9. day67—angularJS学习笔记控制器

    转行学开发,代码100天——2018-05-22 angularJS通过控制器来控制数据流的应用. ng-controller. 控制器中包含属性和函数,其参数引用通过 $scope来执行. 如下文的 ...

  10. 2018.03.27 pandas duplicated 和 replace 使用

    #.duplicated / .replace import numpy as np import pandas as pd s = pd.Series([1,1,1,1,1,2,3,3,3,4,4, ...