利用excanvas对ie的客户端图片显示做出优化

很少时间来写网页编码了,现在现成的网页源码也有很多了,不过共享的源码如此之多,能够拿来合适而用的,倒真的不多,还是需要在模板、美工以及更重要的安全上面,精雕细琢。现在人们对网页的显示要求是越来越高了,今天就来展示一例针对ie的客户端图片显示做出优化.

在上传图片的时候,如果没有进行裁剪生成缩略图,或者生成的缩略图太粗糙,在页面缩放显示的时候就会带有锯齿,很影响美观。像safari、opera或者google chrome还好,因为他们浏览器自身专门对页面图片显示做了优化工作;firefox不那么明显;ie下就非常影响浏览者感觉。

所以必须借助ria来专门对ie做些优化。我要介绍的是用excanvas。canvas和svg这些标签是用于在浏览器上绘图用的,除了ie之外其他浏览器都支持。因此我们必须借助第三方实现excanvas.js如:

<!–[if IE]><script src="excanvas.js" src="excanvas.js"></script><![/if]–>
<canvas id="openit" style="width:200px;height:200px;"></canvas><script type="text/javascript">

var dom=document.getElementById("openit");
var img=new Image();
img.src="http://openit.cn/c.jpg";
dom.getContext("2d").drawImage(img,0,0,200,200);
</script>

前辈经验来源于:http://openit.cn/blog/?p=77

有搞代码编辑的,试下效果对比下。

2 thoughts on “利用excanvas对ie的客户端图片显示做出优化

Comments are closed.