如何获取图片的base64编码
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编码的更多相关文章
- JS 获取图片的base64编码
获取图片的base64编码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- angularJS <input type="file> 图片的base64编码
talk is cheap show me the code <input type="file" id="file" name="file&q ...
- 本地图片转base64编码
通常获取图片的base64编码都是通过input的上传file属性获取转化,但是有时候需要的是本地图片不经过上传操作,直接拿本地图片转成base64编码就不行了,input上传操作需要人为操作一下,没 ...
- 图片的base64编码通过javascript生成图片--当前URL地址的二维码应用
前面的话 在电脑端发现一篇好的博文,想在手机上访问.这时,就必须打开手机浏览器输入长长的URL地址才行,非常不方便.如果在博客标题的后面跟一张小的图片,点击该图片后,出现一张二维码的大图,然后再通过手 ...
- js将图片转为base64编码,以字符串传到后台存入数据库
(前台在中approve_edit.html中,后台不变) 链接参考:http://www.cnblogs.com/Strom-HYL/p/6782176.html 该链接文中并没有用到easyUI的 ...
- JavaScript—图片与base64编码互相转换
图片转换为base64编码 <input type = "file" id = "file" onchange="popFileName(thi ...
- 图片的 base64 编码
图片的 base64 编码就是将一幅图片编码成一串字符串,使用该字符串代替图像地址.我们所看到的网页上的图片,都是需要消耗一个 http 请求下载而来的:(所有才有了 csssprites 技术< ...
- Base64编码 图片与base64编码互转
package com.education.util; import sun.misc.BASE64Decoder; import sun.misc.BASE64Encoder; import jav ...
- PHP将图片转base64编码以及base64图片转换为图片并保存代码
图片转base64编码 /*图片转换为 base64格式编码*/ $img = 'uploads/01.png'; $base64_img = base64EncodeImage($img); ech ...
随机推荐
- BZOJ 4399: 魔法少女LJJ 线段树合并 + 对数
Description 在森林中见过会动的树,在沙漠中见过会动的仙人掌过后,魔法少女LJJ已经觉得自己见过世界上的所有稀奇古怪的事情了LJJ感叹道“这里真是个迷人的绿色世界,空气清新.淡雅,到处散发着 ...
- Win7,win10(部分机型) 安装appscan9.0.3.10(可升级)实操流程
Win10部分机型不能很好的兼容appscan,建议使用者用win7系统安装appscan 写于:2018.12.2 IBM Security AppScan Standard 可通过自动执行应用安全 ...
- @清晰掉 GDB调试器中的战斗机
GDB 的命令很多,本文不会全部介绍,仅会介绍一些最常用的.在介绍之前,先介绍GDB中的一个非常有用的功能:补齐功能.它就如同Linux下SHELL中的命令补齐一样.当你输入一个命令的前几个字符,然后 ...
- Linux轻量级自动运维工具-Ansible浅析 转
转自 Linux轻量级自动运维工具-Ansible浅析 - ~微风~ - 51CTO技术博客http://weiweidefeng.blog.51cto.com/1957995/1895261 Ans ...
- webpack插件之htmlWebpackPlugin
webpack插件之htmlWebpackPlugin webpack插件 自动化 htmlWebpackPlugin 由于webpack已经帮我们处理好js之间的依赖关系,现在我们可以忽略js的加 ...
- Python深度学习读书笔记-5.Keras 简介
Keras 重要特性 相同的代码可以在 CPU 或 GPU 上无缝切换运行. 具有用户友好的 API,便于快速开发深度学习模型的原型. 内置支持卷积网络(用于计算机视觉).循环网络(用于序列处理)以及 ...
- 【C++进阶:结构体作为叶节点初始化】
使用C++代码,表示叶节点的结构体初始化,以及使用new进行动态内存分配和赋值 #include <iostream> using namespace std; struct TreeNo ...
- 分布式消息队列 Celery 的最佳实践
目录 目录 不使用数据库作为 Broker 不要过分关注任务结果 实现优先级任务 应用 Worker 并发池的动态扩展 应用任务预取数 保持任务的幂等性 应用任务超时限制 善用任务工作流 合理应用 a ...
- windows环境下PostgreSQL的安装
1.首先在如下链接下载PostgreSQL的压缩包,我这里下载的是postgresql-12.1-1-windows-x64-binaries.zip. https://www.enterprised ...
- Java面试题集(71-85)
Java程序员面试题集(71-85) 摘要:这一部分主要包括了UML(统一建模语言).面向对象的设计原则(六原则一法则).GoF设计模式.企业级设计模式.JDBC(Java数据库连接).XML(可扩展 ...