zoukankan      html  css  js  c++  java
  • 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和内存负担,因为浏览器不会缓存这种图像

     目前,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

     

     

      

  • 相关阅读:
    Markdown语法帮助文档
    react-native-vector-icons使用方法
    如何创建Pull Request,以开源项目ant design pro为例
    4.环境变量总结篇
    3.Flutter之hello_world
    构建之法 阅读笔记03
    学习进度14
    团队项目-个人博客6.5
    团队项目-个人博客6.4
    构建之法 阅读笔记02
  • 原文地址:https://www.cnblogs.com/chenxizhaolu/p/6084662.html
Copyright © 2011-2022 走看看