Data URI scheme:data:image/jpeg;
今天在用一个croppic的jQuery裁剪图片的插件的时候,发现在后台获取图片时,无法通过Request.File获取了,但是通过Request.Form[]可以。用firebug跟了一下发现,图片传输的数据不是一个文件流的形式进行提交的,而是一个表单元素,如下图所示:
经过一番度娘后,学习了新知识,原来是浏览器通过Data URI scheme 把图片利用base64编码把图片数据翻译成标准的ASCII字符。
在上面的Data URI中,data表示取得数据的协定名称,image/png 是数据类型名称,base64 是数据的编码方法,逗号后面就是这个image/png文件base64编码后的数据。
不只是数据的提交,在数据的渲染时候,也可以这么用:<img src="data:image/jpg;base64,iVBORw0KGgo"/>等效于:<img src="http://www.oschina.net/img/logo_s2.png"/>
优点:Data URL是在本地直接绘制图片,不是从服务器加载,所以节省了一个HTTP 请求,起到加速网页的作用。
缺点:适合于小图片,因为用这种方式会增加网页的大小,所以文件太大了不合适,另外IE8以下浏览器不支持这种方法。用这种方法会加重客户端的CPU和内存负担,因为浏览器不会缓存这种图像。
附加:asp.net后台程序如何获取这种编码并且保存成文件呢?
然后SaveAs一下就OK了。
学习地址:http://www.jb51.net/css/41981.html http://www.cnblogs.com/xcsn/p/4677373.html https://www.lvtao.net/dev/php-image-data-url.html
Data URI scheme:data:image/jpeg;的更多相关文章
- 关于 Data URI Scheme -- data:image/jpg;base64
转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...
- 前端-Data URI Scheme
了解Data URI scheme,首要要掌握一些URI.URL的基本知识,很多做移动端上开发的同学对这两个基本概念掌握的不够,本文首先会对这两个基本概念做一些简单的介绍. 基本概念 <HTTP ...
- JS魔法堂:Data URI Scheme介绍
一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...
- 006-网页嵌入数据Data URI scheme
在项目css中或者图片展示中: url(data:image/png;base64,iVBORw0KGgoAAA 在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入 ...
- Data URI scheme - 数据的uri模式
----------------------------------------------------------------------------------------------- Data ...
- Data URI Scheme,base64
一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...
- 什么是data:image/png;base64,?一道关于Data URI Scheme的入门级CTF_Web题
一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...
- 网页优化URI(http URI scheme与data URI scheme)
网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...
- data URI scheme
优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...
随机推荐
- Python基础(六) 基础文件操作
今天学习python下对文件的基础操作,主要从open函数.File对象的属性.文件定位.简单操作.举例说明几个步骤开始学习,下面开始进入今天的主题: 一.open函数介绍 open函数主要是打开一个 ...
- @Value取值为NULL的解决方案------https://blog.csdn.net/zzmlake/article/details/54946346
@Value取值为NULL的解决方案 https://blog.csdn.net/zzmlake/article/details/54946346
- sdibt 1244类似于拓扑排序
博客:http://blog.csdn.net/mypsq/article/details/39005991 #include<stdio.h> #include<string.h& ...
- 生成随机数验证码的工具类(from韩顺平)
生成随机数验证码的工具类 package com.cx; //生成随机数的图片 import java.awt.Color; import java.awt.Font; import java.awt ...
- codevs4419 FFF 团卧底的菊花
题目描述 Description FFF 团卧底在这次出题后就知道他的菊花可能有巨大的危险,于是他提前摆布好了菊花阵,现在菊花阵里有若干朵菊花,出现次数最多的那一朵就是出题人的,你的任务是需要找出出题 ...
- 使用C#执行PowerShell命令
按照网上的教程配置会发生SSL链接错误 该文章的最后使用了SSL来保证账户在连接服务器的时候不发生账户认证错误,但是我经过测试发现这个是不可行的,有一种更为简单的方法 首先要对服务器进行winrm设置 ...
- - > 动规讲解基础讲解一——01背包(模板)
作为动态规划的基础,01背包的思想在许多动规问题中会经常出现,so,熟练的掌握01背包的思路是极其重要的: 有n件物品,第i件物品(I = 1,2,3…n)的价值是vi, 重量是wi,我们有一个能承重 ...
- spring项目启动需要的几个注解
1.@ComponentScan注解,spring context包下,可以理解嘛,扫描srping bean放在ioc容器中的. ApplicationContext是接口,就是IOC容器嘛,也在这 ...
- Canopy算法计算聚类的簇数
Kmeans算是是聚类中的经典算法.步骤例如以下: 选择K个点作为初始质心 repeat 将每一个点指派到近期的质心,形成K个簇 又一次计算每一个簇的质心 until 簇不发生变化或达到最大迭代次数 ...
- 1. MissingInteger 最小遗失整数 Find the minimal positive integer not occurring in a given sequence.
package com.code; import java.util.Arrays; public class Test04_1 { public static int solution(int[] ...