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. minio上传大于30M文件失败

    minio上传30M文件失败.提示失败或者进度不动.翻查手册发现并未限速.原因是使用了nginx做代理.上传超过30M大的客户端文件无法正常上传,修改了下nginx的配置,就可以了. 加上client ...

  2. HDU - 3006 The Number of set（状态压缩位运算）

    http://acm.hdu.edu.cn/showproblem.php?pid=3006 题意 给定n个集合,每个集合都是由大于等于1小于等于m的数字组成,m最大为14.问由给出的集合可以组成多少 ...

  3. 任意两点间的最短路问题（Floyd-Warshall算法）

    #define _CRT_SECURE_NO_WARNINGS /* 7 10 0 1 5 0 2 2 1 2 4 1 3 2 2 3 6 2 4 10 3 5 1 4 5 3 4 6 5 5 6 9 ...

  4. error: control may reach end of non-void function [-Werror,-Wreturn-type]

    编译出现如下错误 error: control may reach end of non-void function [-Werror,-Wreturn-type] 这个错误可能和编译器有关(在相同代 ...

  5. 23. Spring Boot JPA BaseDao 配置 文章

    参考文献:(早期JPA版本的描述) https://blog.csdn.net/yingxiake/article/details/51017797 https://www.jianshu.com/p ...

  6. sql 行变列

    select * from market//查看原来所有数据 //第一种方式 select max(case area when '南京' then num else 0 end) 南京, max(c ...

  7. Linux - 日志处理一

    Linux 日志处理 history # 历时命令默认1000条 HISTTIMEFORMAT="%Y-%m-%d %H:%M:%S " # 让history命令显示具体时间 hi ...

  8. Ansi与Unicode编码

    视频教程:Ansi与Unicode编码 大家在编程时经常遇到的数据类型: ● Ansi: char   代表一个字符  (CHAR) char *  代表一个字符串指针   (PCHAR    PST ...

  9. mysql timestamp时区有影响

    timestamp格式 如果数据库修改时区,可能会对数据影响,datetime不依赖数据库时区

  10. jquery 跨域请求

    参考博客:  http://www.cnblogs.com/freeweb/p/4908832.html 由于安全性问题, js 一般不支持跨域操作,但只要在客户端与服务器端引入相同的参数,通过jso ...