Base64字符串 + Flash 实现缩略图预览

在做图片上传等类似的应用中，经常需要提供缩略图预览功能；由于当今各种浏览器的安全性加强，也大大增加了这个功能的开发难度。

最普通的方法是先把图片上传到server，利用返回该图片的URL的方式显示缩略图，这样如果用户选错了图片，会造成很大的资源浪费。

在这里我要夸一下Flash：Flash Player 10+ 可以支持本地的图片预览！

但是某些情况下，我只是想在html标签里面来预览缩略图，而不是在Flash里面，这该如何呢？

于是我们又想到了Base64！我们先简单了解一下Base64：

Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一。Base64 主要不是加密，它主要的用途是把一些二进制数转成普通字符用于网络传输。由于一些二进制字符在传输协议中属于控制字符，不能直接传送需要转换一下。最常见的用途是作为电子邮件或WebService附件的传输编码 ...

 

在Firefox、chrome、Safari、IE8+ 等浏览器中都支持下面这种方法嵌入图片：

1. (X)HTML Image Embedding Example

<img alt="Embedded Image" 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..."/>

2. CSS Image Embedding Example

.image {
  width:100px;
  height:100px;
  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...);
}

 

所以我们有了另外一种思路：用Flash读取本机图片并转成Base64 字符串传给js来动态显示缩略图。

这里是Demo，一定要在 非IE 或者IE8+ 的浏览器里面查看

 

本文的源码到这里下载

 

 参考资料：

http://www.greywyvern.com/code/php/binary2base64

http://bbs.9ria.com/viewthread.php?tid=47520&from=favorites