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. vue自学入门-2（vue创建项目）

    本人也是刚学习VUE,边找资料,边学习,边给大家分享.1.创建项目 2.启动项目 3.注意上面和下面全部用cnpm

  2. 20155237 2016-2017-2 《Java程序设计》第8周学习总结

    20155237 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 NIO与NIO2 认识NIO Channel: 衔接数据节点(与IO中的流对比) isOpe ...

  3. windows 查看链接数

    windows 端口链接数  查看有效 链接数: netstat -an|find " |find "ESTABLISHED" /c /c 统计: 查看链接信息: 查看当 ...

  4. node.js 找不到 xxx 模块解决办法

    node.js找不到xxx 这个模块的解决方法. 按顺序来. 1.检查一下是否拼写错误. 2.这个模块是自己写的,是的话.检查一下路径是否正确. 3.如果是导入的模块.用 npm list这个命令输出 ...

  5. AQS框架

    java并发包基石 AQS是JUC中很多同步组件的构建基础,简单来讲,它内部实现主要是状态变量state和一个FIFO队列来完成,同步队列的头结点是当前获取到同步状态的结点,获取同步状态state失败 ...

  6. python - class类 (三) 类的组合

    类的组合: #组合 class A1(): def pr(self): return 'a1' class A2(): def pr(self): return 'a2' class A3(): de ...

  7. [转]xargs命令详解，xargs与管道的区别

    为什么要用xargs,问题的来源 在工作中经常会接触到xargs命令,特别是在别人写的脚本里面也经常会遇到,但是却很容易与管道搞混淆,本篇会详细讲解到底什么是xargs命令,为什么要用xargs命令以 ...

  8. IMU 预积分推导

    给 StereoDSO 加 IMU,想直接用 OKVIS 的代码,但是有点看不懂.知乎上郑帆写的文章<四元数矩阵与 so(3) 左右雅可比>提到 OKVIS 的预积分是使用四元数,而预积分 ...

  9. spring-framework-x.x.x.RELEASE-dist下载教程

    1.打开Spring官网:https://spring.io,点击PROJECTS 2.点击SPRING FRAMEWORK 3.点击GitHub图标 4.找到Access to Binaries,点 ...

  10. Ngnix + Tomcat负载均衡架构

    一.nginx Nginx (发音同 engine x)是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.  其特点是占有内 ...