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

552 views

分类 : 编码知识 | 发布时间 : 25-09-2008

很少时间来写网页编码了,现在现成的网页源码也有很多了,不过共享的源码如此之多,能够拿来合适而用的,倒真的不多,还是需要在模板、美工以及更重要的安全上面,精雕细琢。现在人们对网页的显示要求是越来越高了,今天就来展示一例针对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

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

你也许还想了解这些

Comments (2)

自己试了一下,我眼拙,没看出有什么区别。:)

有效果图对比一下吗?

Post a comment

无觅相关文章插件,快速提升流量