源码:利用Canvas将图片转换为DataURL

DataURL是什么?其实就是一个Url,这个Url存储了Data,比如将一张图片变成url.

本站旧logo(DataURL):

data:image/png;base64,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

把DataURL显示出来:

“logo”/

预览(下面这张图片就是DataURL):

logo

存储成url的图片非常长,所以一般只能用来存储小图片.

DataURL相比传统的图片有一个优势,即减少http请求数量

大家应该都知道,一个网页加载时,每个img中的src属性都需要重新进行一次请求,这样会拖慢页面的下载速度.

而DataURL很明显是不需要进行请求的,因为数据就存在Url本身.

但是DataURL的弊端也很明显,首先它不适合存储大图,其次便是如果数量比较多,载入的速度会明显下降(因为url太长导致页面下载到的数据量增大).

上面的内容是介绍DataURL,下面开始讲我无聊时做出来的转换应用了.

共需要3个文件,jquery.js(我使用的是1.6.2版本,jquery可以在官网下载到)

Image2DataUrl.html:

<title>Image2DataUrl</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <script src="/js/jquery-1.6.2.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ try{ $("p").html("转换中..."); var img=new Image(); img.onload=function(){ var c=$("<canvas></canvas>")[0]; if(c.getContext){ var ctx=c.getContext("2d"); }else{ alert("浏览器版本太低,无法使用此应用."); } c.width=img.width; c.height=img.height; ctx.drawImage(img,0,0); var data_url=c.toDataURL(); $("p").html("转换完毕,Data:URL地址为<br/><a href=""+data_url+"">"+data_url+"</a>"); } img.src="http://weblab.sinaapp.com/getImage.php?url="+encodeURI($("input").attr("value")); }catch(e){ $("p").html("转换失败了..."+e); } }); }); </script>   需要转换的图片链接:<input type="text"/> <button>转换</button> <p>转换后的Data:URL会在这里出现.</p>  

getImage.php(也许你会问为什么需要php文件,在下文中我会解释):

这里的文件直接复制一下是使用不了的,php文件要上传到你的空间,js的script src需要修改让jquery能够找到.

想要正常运行的话必须保证你的网络正常,浏览器支持HTML5代码.

现在解释一下代码,首先我们需要用到Canvas元素,这个元素是HTML5里增加的,提供了2D绘图使用的API,目前大多数的HTML5游戏都是通过这个元素制作的,有兴趣的可以去查查看,推荐看https://developer.mozilla.org/cn/Canvas_tutorial

然后主要的问题就出在Canvas上,Canvas不能绘制其他域的图片(这是一个安全措施),也就是说它只能绘制由和页面相同域名的地址上的图片.

于是这个时候我们就需要编写一个php将其他域的图片变成自己的.

php代码的主要功能就是下载其他域的图片,然后输出这个图片,目前只支持jpg,png,bmp,gif图片.

接下来通过javascript代码将本域名下的图片绘制在canvas上,调用canvas的toDataURL方法便可获取DataUrl地址了.