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. Hbase记录-HBase扫描/计数/权限

    HBase扫描   scan 命令用于查看HTable数据.使用 scan 命令可以得到表中的数据.它的语法如下: scan ‘<table name>’ 下面的示例演示了如何使用scan ...

  2. python学习笔记8--面向对象--属性和方法详解

    属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法: ...

  3. Vue.js入门系列教程（二）

    过滤器:filter 全局过滤器 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. MyBatis下MySqL用户口令不能为空

    jdbc.driver=com.mysql.jdbc.Driverjdbc.url=jdbc:mysql://localhost:3308/testjdbc.username=testjdbc.pas ...

  5. AsciiMorph - 新奇的 ASCII 字符画生成工具&插件

    AsciiMorph 是一个新奇的 ASCII 字符画生成工具和开源插件.字符画(ASCII Art)的历史可以追溯到几十年前,起初是用在图形显示功能受限的设备上,用ASCII字符集里的可打印字符来拼 ...

  6. Linux 4.10.8 根文件系统制作（二）---制作jiffs文件系统

    一.制作jiffs文件系统 制作jffs2 文件系统需要用到 mkfs.jffs2工具. 执行命令: mkfs.jffs2 -n -s 0x800 -e 0x20000  --pad=0x800000 ...

  7. VxWorks Fuzzing 之道：VxWorks 工控实时操作系统漏洞挖掘调试与利用揭秘

    转载:freebuf 0×00 前言 关于VxWorks,这里引用44CON议题<攻击 VxWorks:从石器时代到星际>探究 一文章中的介绍: VxWorks 是世界上使用最广泛的一种在 ...

  8. EF crud操作

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. pyqt5 鼠标操作

    #资料 http://blog.sina.com.cn/s/blog_6483fa330102xo6w.html import sysfrom PyQt5.QtWidgets import QAppl ...

  10. 【摘】SVN提交与版本冲突

    一般性解决办法 1.要提交的内容备份到项目之外[为还原版本做准备] 2.还原[回到之前版本] 3.更新[更新版本号和版本] 4.填充内容[即 将自己之前备份的内容填充项目对应处] 5.提交 6.OK ...