html 图片显示的几种方式
1,直接访问:<img src="xxx/123.png">
2,间接访问:<img src="./request.rsp?opt=capture">
需要CGI配合,返回的数据为图片数据
重点在这:Content-type: image/jpeg
3,直接给数据:<img src="data:image/png;base64,ABKAMNDKSJFHVCJSNVOIEJHVUEHVUV==">
说明:
data:, 文本数据
data:text/plain, 文本数据
data:text/html, HTML代码
data:text/html;base64, base64编码的HTML代码
data:text/css, CSS代码
data:text/css;base64, base64编码的CSS代码
data:text/javascript, Javascript代码
data:text/javascript;base64, base64编码的Javascript代码
data:image/gif;base64, base64编码的gif图片数据
data:image/png;base64, base64编码的png图片数据
data:image/jpeg;base64, base64编码的jpeg图片数据
data:image/x-icon;base64, base64编码的icon图片数据
js 原生支持 base64 编解码
window.btoa("test");//"dGVzdA=="
window.atob("dGVzdA==");//"test"
-----------以下为猜想,未验证----------
有的时候,不一定能成功获取到图片数据,有可能会返错,为了区分错误信息和图片数据,可以把 2,3 结合一下
<img id="img0" src=""></img>
$.ajax({type:"GET", dataType:"text", url:"./request.rsp?opt=capture", success:function(data){$("#img0").attr("src", "data:image/jpeg;base64," + window.btoa(data));}});
在CGI输出函数中,指定 Content-type: text/xml,即把图片数据当成普通数据来传输
html 图片显示的几种方式相关推荐
- iOS之实现图片裁剪的几种方式
iOS之实现图片裁剪的几种方式 1.使用CGImageCreateWithImageInRect函数 CGImageCreateWithImageInRect函数是属于Core Graphics Fr ...
- 实现精灵图片绝对定位的三种方式(伪)
精灵图片绝对定位的三种方式(伪) 有强迫症的我为此困扰了一上午,说白了还是自己实力不够,想法总被局限. 实现结果如上图中间的为最终满意样品 整体用列表写的` 左1: 把整体看成一个背景图加上面文字: ...
- Python:实现图片裁剪的两种方式——Pillow和OpenCV
原文:https://blog.csdn.net/hfutdog/article/details/82351549 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还 ...
- Android点击图片随机,android 设置图片随机出现-两种方式
android 设置图片随机出现-两种方式, 第一种方式:得到图片对应的Drawable实例,通过setImageDrawable(drawable)实现 //ImageView对应的id ivBg ...
- 在线直播源码,VUE 获奖名单滚动显示的两种方式
在线直播源码,VUE 获奖名单滚动显示的两种方式 第一种: 使用vue-seamless-scroll组件: 1.安装vue-seamless-scroll npm install vue-seaml ...
- Python图片裁剪的两种方式——Pillow和OpenCV
本文参考Python图片裁剪的两种方式--Pillow和OpenCV并进行了一些更新 感谢作者:hfutdog 在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还有一 ...
- python opencv 裁剪图片_Python图片裁剪的两种方式——Pillow和OpenCV
在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还有一种利用了OpenCV.两种方式都需要简单的几行代码,这可能也就是现在Python那么流行的原因吧. OpenCV ...
- Python实现图片裁剪的两种方式——Pillow和OpenCV
在这篇文章里我们聊一下Python实现图片裁剪的两种方式,一种利用了Pillow,还有一种利用了OpenCV.两种方式都需要简单的几行代码,这可能也就是现在Python那么流行的原因吧. 首先,我们有 ...
- android 设置图片随机出现-两种方式
android 设置图片随机出现-两种方式, 第一种方式:得到图片对应的Drawable实例,通过setImageDrawable(drawable)实现 //ImageView对应的idivBg = ...
最新文章
- 智源重大研究方向“智能体系架构与芯片”发布会(活动报名)
- php 自留地,重蔚自留地php基本语法-函数(附代码)
- 每日英语-7/21/2009
- webuploader+PHP实现超大文件分片上传的功能
- Ajax的使用四大步骤详解,五、使用Ajax的步骤
- exports、module.exports和export、export default到底是咋回事
- C语言试题三十七之求除一个2×m整型二维数组中最大元素的值,并将此值返回调用函数。
- 对MariaDB10.0的Sphinx进行扩展
- 方法的返回值类型是object_JavaScript中如何判断类型
- php final什么意思,php final关键字的应用
- linux 进程间通信-信号量(semagpore)
- Spark-submit诡异问题之:ERROR XJ040: Failed to start database 'metastore_db'
- android的AIDL的调用
- numpy ndarray 多维数组的内存管理
- 理解vue中的父组件,子组件
- Windows安装nginx服务
- java.io.IOException: Unable to establish loopback connection
- Android文件管理源码
- java system.nanotime_java中的System.nanoTime与System.currentTime
- 笔记本电脑搜索不到wifi,只有飞行模式