HTML5——Data Url生成

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>如何用HTML5的FileReader生成Data Url</title>

         <script type="text/javascript">

             function imageDataUrl(source) {

                 var file = source.files[0];

                 if (window.FileReader) {

                     var fr = new FileReader();

                     fr.onloadend = function(e) {

                         document.getElementById("txtBase64").value = e.target.result;

                         document.getElementById("imgView").src = e.target.result;

                     };

                     fr.readAsDataURL(file);

                 }

             }

         </script>

     </head>

     <body>

         <p>用HTML5的FileReader生成Data Url</p>

         <input type="file" onchange="imageDataUrl(this)" style="border:1px solid #808080; width:432px;" />

         <br />

         <textarea id="txtBase64" cols="50" rows="20"></textarea>

         <img id="imgView" src="" style="width:400px;height: 400px;" />

     </body>

 </html>

HTML5——Data Url生成的更多相关文章

  1. Data Url生成工具之HTML5 FileReader实现

    百度经验版本号:怎样用HTML5的FileReader生成Data Url 上一篇讲了:用Visual Studio 2010编写Data Url生成工具C#版 今天用HTML5 FileReader ...

  2. 使用Visual Studio 2010写Data Url生成工具C#版本

    声明:本文系本人按照真实经历原创.未经许可,谢绝转载. 此文百度经验版本号:怎样用Visual Studio 2010打造Data Url生成工具 源代码下载:用Visual Studio 2010编 ...

  3. Data URL简介及Data URL的利弊

    之前写过一篇“漫谈前端优化”的文章,里面提到过DataUrl,粗鲁的描述了下,感觉不甚详焉,所以这几天也总结了这方面的知识,参考一些资料,补充一篇文章在这里,对这方面的资料来说,也是一种强化记忆应用: ...

  4. ASP.NET根据URL生成网页缩略图示例程序(C#语言)

    工作中可能马上要用到根据URL生成网页缩略图功能,提前做好准备. 在网上找了份源码,但是有错误:当前线程不在单线程单元中,因此无法实例化 ActiveX 控件“8856f961-340a-11d0-a ...

  5. HTML之Data URL（转）

    Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...

  6. iOS 根据url生成二维码贴到底图上

    根据url 生成指定尺寸的二维码图片 UIImage * createBinaryCodeImg(const char * url ,CGFloat size) { //create binary c ...

  7. 【转】Data URL和图片，及Data URI的利弊

    Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...

  8. 几个常用的url生成二维码的接口

    找到了几个URL生成的接口,速度上可能会有差别,可试验后选用,我用过第一个,分享: <!doctype html> <html lang="en"> < ...

  9. Data URL

    Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放 ...

随机推荐

  1. System.Runtime.InteropServices.COMException:“服务器出现意外情况。 (异常来自

    .Net MVC导出Excel的时候,一直报错,如题.原因是因为福昕阅读器,这样设置 execl->点击文件>选项>加载项,选择com加载项,把祈福阅读器勾掉.

  2. 数据结构（六）查找---多路查找树（B+树）

    前提 下图B树,我们要遍历它,假设每个节点都属于硬盘的不同页面,我们为了中序遍历所有的元素,页面2-页面1-页面3-页面1-页面4-页面1-页面5.而且我们每经过节点遍历时,都会对节点中的元素进行一次 ...

  3. Rime中州韵导入极点五笔词库（附：自制词库）

    前言 之前写了一篇文章,[输入法]Rime-中州韵 基本设置 附:官方定制指南,其中导入词库这一块引用其它博主的文章,最近发现那个工具链接已经过期了,参考了百度贴吧的说明,不要直接使用工具去导入会更好 ...

  4. Telnet Protocol Specification

    Network Working Group J. Postel Request for Comments: 854 J. Reynolds ISI Obsoletes: NIC 18639 May 1 ...

  5. angularjs指令中scope参数 true、false、{} 的区别详解

    scope 有三个参数 true.false.{} scope 默认是 false,当 scope设置为true时,会从父作用域继承并创建一个新的作用域对象, 按照true .false的反向思维,我 ...

  6. Python装饰器实现异步回调

    def callback(func): def inner(obj, *args, **kwargs): res = func(obj, *args, **kwargs) if kwargs.get( ...

  7. rem,em

    任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择 ...

  8. 【转】利用URLConnection来发送POST和GET请求

    URL的openConnection()方法将返回一个URLConnection对象,该对象表示应用程序和 URL 之间的通信链接.程序可以通过URLConnection实例向该URL发送请求.读取U ...

  9. Keil MDK忽略警告：文件末尾空白行警告

    使用Keil MDK调试程序的时候,没有习惯在每个文件的末尾增加一个空白行,结果文件一多,编译时产生的警告就一大堆,排错都得用滚轮滚好久,就一个空白行还得出警告,烦死了,烦死了,烦死了!实在受不了了, ...

  10. JDK7与8内存参数解析与修改

    JDK内存 jdk内存实际是jvm内存,jvm有一个运行时数据区,其实就是对这一部分的大小分配. 运行时数据区通常包括这几个部分:程序计数器(Program Counter Register).Jav ...