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. JVM总结（六）：早期（编译期）优化

    这节我们来总结一下JVM编译器优化问题. JVM编译器优化 Javac编译器 Javac的源码和调试 解析与填充符号表 注解处理器 语法分析与字节码生成 Java语法糖 泛型和类型擦除 自动装箱.拆箱 ...

  2. Vue.js 基础知识

    0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...

  3. SpringMVC学习笔记_02

    1.springmvc对多视图的支持 (1)导入xml格式视图支持的jar包   注意:springmvc本身就支持xml格式,所以不用导入其他支持的jar包了. (2)在springmvc.xml中 ...

  4. JAVA求解全排列

    一,问题描述 给定一个字符串,求出该字符串的全排列. 比如:"abc"的全排列是:abc.acb.bac.bca.cab.cba 二,实现思路 采用递归的方式求解.每次先选定一个字 ...

  5. Tomcat中配置URIEncoding="UTF-8"来处理中文的方法

    http://www.cnblogs.com/seabird1979/p/4837237.htmlTomcat中配置URIEncoding="UTF-8"来处理中文的处理打开 se ...

  6. Python3之网络爬虫<0>初级

    由于Python3合并URLib与URLlib2统一为URLlib,Python3将urlopen方法放在了urllib.request对象下. 官方文档:https://docs.python.or ...

  7. Python(十三)python的函数重载

    首先,重载函数的功能是实现参数不同情况下功能相同的函数. 函数重载的目的是解决功能相同的函数的以下问题: 1.参数的类型: 2.参数的个数: 对于情况1,函数功能呢相同,参数不同的情况. python ...

  8. struct 与 class 的区别

    C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据类型的数据结构了,它已经获取了太多的功能. struct能包含成员函数吗? 能! struct能继承吗? 能!! s ...

  9. js代码解析原则

    js引擎在读取js代码时会进行两个步骤,第一个步骤是解释,第二个步骤是执行. 解释就是先通篇扫描所有的Js代码,然后把所有声明提升到顶端,第二步是执行,执行就是执行代码的操作. 例: 例子1: < ...

  10. 【逆向工具】IDA使用3-全局变量、数组、结构体

    全局变量 测试代码 全局变量既可以是某对象函数创建,也可以是在本程序任何地方创建.全局变量是可以被本程序所有对象或函数引用.下面这段代码中将int.float.char变量定义在main函数之外. / ...