html5实现本地图片预览功能

标签: html5 图片 功能 | 发表时间:2016-06-09 13:13 | 作者:火焰莲
出处:http://www.iteye.com

1.利用FileReader进行图片本地预览

    FileReader类型实现的是一种异步文件读取机制,用来把文件读入内存,并且读取文件中的数据。各大浏览器的支持情况:

 

 

构造方法

var reader = new FileReader()

为了读取文件中的数据,FileReader提供了如下几个方法:

readAsText(file,encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中,第二个参数指定编码类型,可选。

readAsDataURL(file):读取文件并将文件以数据URL的形式保存在result属性中。

readAsBinaryString(file): 读取文件并将一个字符串保存在result属性中,字符串中的每一个字符表示一个字节。

readAsArrayBuffer(file): 将一个包含文件内容的ArrayBuffer保存在result。

了解了FileReader的基本使用后,来实现下图片的本地预览功能:

 

<input type="file" name="inputfile" accept="image/*" onchange="readFile(this.files[0])">
<div id="preview"></div>

 

function readFile(f){
    var reader = new FileReader();
    reader.readAsDataURL(f); //base64编码
   reader.onload = function(){
         var preview = document.querySelector('#preview');
         var img = document.createElement("img");
         img.src = reader.result;
         preview.appendChild(img);
    }
   reader.onerror = function(e){
         console.log("Error"+e);
   }
}

 

 页面效果看起来是这个样子的:



 当选择图片后就可以本地预览啦,结合ajax实现图片上传预览功能。

效果图:

 2.URL.createObjectURL()进行图片本地预览

      URL.createObjectURL() 静态方法会创建一个  DOMString,它的 URL 表示参数中的对象。这个 URL 的生命周期和创建它的窗口中的  document 绑定。这个新的URL 对象表示着指定的  File 对象或者  Blob 对象。

构造方法

objectURL = URL.createObjectURL(blob);  //参数blob:是用来创建 URL 的  file 对象或者  Blob 对象​

在每次调用  createObjectURL() 方法时,都会创建一个新的 URL 对象,即使你已经用相同的对象作为参数创建过。当不再需要这些 URL 对象时,每个对象必须通过调用window.URL.revokeObjectURL()方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

HTML结构与之前一样。

if (window.URL) {
     var preview = document.querySelector('#preview');
     var img = document.createElement("img");
     img.src = window.URL.createObjectURL(f);
     img.onload = function(){
	   window.URL.revokeObjectURL(this.src); //释放内存
     }
     preview.appendChild(img);
}

 效果如上。



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [html5 图片 功能] 推荐:

html5实现本地图片预览功能

- - JavaScript - Web前端 - ITeye博客
1.利用FileReader进行图片本地预览.     FileReader类型实现的是一种异步文件读取机制,用来把文件读入内存,并且读取文件中的数据. 为了读取文件中的数据,FileReader提供了如下几个方法:. readAsText(file,encoding):以纯文本的形式读取文件,将读取到的文本保存在result属性中,第二个参数指定编码类型,可选.

html5 图片上传预览

- - 博客园_首页
  前段时间做html5项目的时候,做了一个图片上传功能,并且可以直接预览,单纯的js就可以实现,很方便的.   这样做比调用后台方便多了,但是只支持html5的,html5以前是不支持的. 未来html5是主流,所以这种方法非常方便的.   几段js代码就可以来实现,而且解析速度也很快. 这种方法值得推广,以后前端也不要为这个烦恼了,还要后台用程序加载出来,那样太浪费时间了.

HTML5本地裁剪图片

- - SegmentFault 最新的文章
我们首先需要创建一个 index.html文件,里面写上一些简单的 html和 css代码:. 以上的三个 标签都是用来处理跟图片相关的内容的,详细的处理会在后续的js代码中给出. 而 id为 show_edit 和 id为 show_pic这两个是为了图片的预览和查看最后的图片生成结果.

HTML5中的prefetch预加载功能

- iVane - duanxin.me
在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,提高效率. 目前只支持Firefox 3.5+,chrome 13+,在不支持的浏览器,用了这个特性也不会出错的,只不过浏览器解析不到而已.

CSS 与 HTML5 响应式图片

- - TaoBaoUED
 随着  Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高. 如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变这种现状. 响应式图片是指: 用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.

基于HT的CSG功能构建HTML5的3D书架

- - ITeye博客
构造实体几何 CSG全称 Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算,将立方体、圆柱体和棱柱等简单的基础模型,嵌套组合成更复杂三维模型. 回到我们今天要搞的3D书架例子,我们将基于 HT for Web的3D引擎来实现, HT已经内置了CSG功能的模型封装,我们通过构建CSGNode图元对象,该类型图元可对Host吸附的图元进行CSG技术的合集、并集和补集的三种操作,一般运用中裁剪的方式较为常用,因此CSGNode默认对Host图元的操作就是裁剪.

基于HTML5的可预览多图片Ajax上传

- Lynn - 张鑫旭-鑫空间-鑫生活
本文地址:http://www.zhangxinxu.com/wordpress/?p=1923. 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图,做法是借助于flash. 可惜,使用复杂的点,比如flash文件需与页面同父文件夹,JavaScript文件大小也很可观.

Wadda:基于 HTML5 Canvas 的图片放大镜

- - 博客园_首页
Wadda 是下一代图片放大技术,使用HTML5 Canvas实现图片放大镜功能. 借助 HTML5 Canvas 标签,能够自定义放大级别而不需要为每个级别定义图片,还能够设置羽化(Fading)效果. 使用非常简单,只需在img标签的title属性中设置放大图片的路径,例如:. 引入Wadda.js文件,并添加如下代码:.

将HTML5 Canvas的内容保存为图片

- - CSDN博客Web前端推荐文章
主要思想是借助Canvas自己的API - toDataURL()来实现,整个实现. HTML + JavaScript的代码很简单. 作者:jia20003 发表于2013-5-19 21:44:01 原文链接. 阅读:166 评论:0 查看评论.

html5拖拽和缩小图片的解决方案

- - Marshal's Blog
要拖拽文件到绿色区域中,然后产生这样的效果:. 这里,绿色框是图片尺寸的一半,即:绿色框长宽为512×384,图片大小为1024×768. html5对文件读取的支持. 读取到的图片是对二进制数据的base64编码,可在img标签中直接显示. 使用canvas,在其中显示img. canvas的内容通过html5支持的函数导出为base64编码的图片信息.