今天在用一个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和内存负担,因为浏览器不会缓存这种图像。

 目前,Data URI scheme支持的类型有:
  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图片数据

 附加: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;的更多相关文章

  1. 关于 Data URI Scheme -- data:image/jpg;base64

    转载一篇大神的文章 大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqA ...

  2. 前端-Data URI Scheme

    了解Data URI scheme,首要要掌握一些URI.URL的基本知识,很多做移动端上开发的同学对这两个基本概念掌握的不够,本文首先会对这两个基本概念做一些简单的介绍. 基本概念 <HTTP ...

  3. JS魔法堂:Data URI Scheme介绍

    一.前言 上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错.本篇先 ...

  4. 006-网页嵌入数据Data URI scheme

    在项目css中或者图片展示中: url(data:image/png;base64,iVBORw0KGgoAAA 在RFC2397中定义的Data URI scheme,目的是将一些小的数据,直接嵌入 ...

  5. Data URI scheme - 数据的uri模式

    ----------------------------------------------------------------------------------------------- Data ...

  6. Data URI Scheme,base64

    一.从HTTP URI Scheme入手 对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应 ...

  7. 什么是data:image/png;base64,?一道关于Data URI Scheme的入门级CTF_Web题

    一道关于Data URI Scheme的入门级CTF_Web题 0x00 题目描述 这是偶尔遇到的某网安交流群的入群题,题目没有任何的提示,直接给了一个txt文件. 0x01 解题过程 通过给的这个文 ...

  8. 网页优化URI(http URI scheme与data URI scheme)

    网页优化的一大首要任务是减少HTTP 请求 (http request) 的次数,例如通过合并多个JS文件,合并CSS样式文件.除此之外,还有一个data URL 的密技,让我们直接把图像的内容崁入网 ...

  9. data URI scheme

    优化网页效能,首要的任务是尽量减少HTTP请求(http request)的次数,例如把多个JavaScript文档合并,多个CSS文件合并等等.此外,还有有一种 data URL 的方法,可以直接把 ...

随机推荐

  1. #if 0的意义和好处

    在调试中经常遇到,写好的程序,需要调试相反的两方面,如:有两款单片机的程序,分别对应着不同的硬件引脚,我们把代码都写上了,但是不能同时让他们起效,通常的办法是/**/屏蔽一些段落,但是调试起来很麻烦. ...

  2. Leetcode 133.克隆图

    克隆图 克隆一张无向图,图中的每个节点包含一个 label (标签)和一个 neighbors (邻接点)列表 . OJ的无向图序列化: 节点被唯一标记. 我们用 # 作为每个节点的分隔符,用 , 作 ...

  3. SGU 485 Arrays

    485. Arrays Time limit per test: 1.75 second(s)Memory limit: 262144 kilobytes input: standardoutput: ...

  4. poj3352

    Road Construction Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7980 Accepted: 4014 Des ...

  5. java多线程编程核心技术(一)--多线程技能

    1.进程和线程的概念 1.进程:进程是操作系统的基础,是一次程序的执行,是一个程序及其数据在处理机上顺序执行时所发生的活动,是程序在一个数据集合上运行的过程,他是系统进行资源分配和调度的一个独立单位. ...

  6. P - FatMouse and Cheese 记忆化搜索

    FatMouse has stored some cheese in a city. The city can be considered as a square grid of dimension ...

  7. MongoDB:最简单的增删改查(Oops,可能太简单了)

    热身运动: 1. 启动MongoDB shell => mongo.exe or ./mongo(先确保有一个mongod的实例): 2. 切换到一个用于练手的namespace => u ...

  8. php 类型转换

    PHP数据类型转换 PHP的数据类型转换属于强制转换,允许转换的PHP数据类型有: •(int).(integer):转换成整形 •(float).(double).(real):转换成浮点型 •(s ...

  9. ZOJ 3827 Information Entropy(数学题 牡丹江现场赛)

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=5381 Information Theory is one of t ...

  10. C++学习之模板特例化

    模板是C++中一个很重要的特性,写一份代码能用于多种数据类型(包括用户自定义类型).例如,STL的sort()函数可以用于多种数据类型的排序,类stack可以用作多种数据类型的栈.但是,如果我们想对特 ...