当前位置：首页 → 问答吧 → html5 canvas rotate 应用（新浪微博图片旋转效果应用）

html5 canvas rotate 应用（新浪微博图片旋转效果应用）

时间：2010-05-10

来源：互联网

html5-canvas

看到新浪微博把图片旋转搞的这么火辣，实在忍不住，写个小例子，纯为方便以后项目中应用，就随手可拿了。IE应用的是私有滤镜，而Firefox应用的是即将流行和未来流行的canvas。

预览：http://byzuo.com/demo/canvas-rotate/
下载： http://www.box.net/shared/ol1ynoprr6

补充:
JQuery 插件文件地址：http://byzuo.com/demo/jq/jq-plug ... ts/jquery.rotate.js
JQuery 插件版预览：http://byzuo.com/demo/jq/jq-plugins-rotate
JQuery 插件版下载: http://www.box.net/shared/zvbt1eng5b

如有更好方法，欢迎大家补充。

[ 本帖最后由 dianfish 于 2010-5-18 12:26 编辑 ]

作者: dianfish 发布时间: 2010-05-10

坐等加精，此贴必火！

作者: sky94yu 发布时间: 2010-05-10

旋转后IE8失去高度，万恶的IE+

作者: tangbin1987 发布时间: 2010-05-10

呵呵不过还是很不错的一个效果

作者: cielkong 发布时间: 2010-05-10

好东西,下载了

作者: iawsky 发布时间: 2010-05-10

不错...学习下..

作者: musictea 发布时间: 2010-05-10

学习中！

作者: hzwujj 发布时间: 2010-05-10

引用:

原帖由 tangbin1987 于 2010-5-10 20:04 发表
旋转后IE8失去高度，万恶的IE+

谢谢你的指出，IE8失去高度已修复。

作者: dianfish 发布时间: 2010-05-10

修复得太快了啊，让我猜猜是怎么解决ie8的：应该是改变了外包元素的高度吧？等下去瞧瞧
实际应用能限制最大宽度么？

作者: tangbin1987 发布时间: 2010-05-10

复制内容到剪贴板

代码:

作者: tangbin1987 发布时间: 2010-05-10

最好能像腾讯微博一样，能自动缩放，保持在一定的宽或高内

作者: jsw0528 发布时间: 2010-05-11

非常好，顶上去。

作者: chenjmdgjl 发布时间: 2010-05-11

楼主就是zuozuo吗？速度围观、学习下，哈哈

作者: KOEN301 发布时间: 2010-05-11

围观、学习......

作者: mxcool 发布时间: 2010-05-12

学习了

作者: EvenChen 发布时间: 2010-05-12

好东西拜读了

作者: kwunkuklan 发布时间: 2010-05-12

绝对是好东西

作者: slj20 发布时间: 2010-05-13

得抓紧学习HTML5了，要不该OUT了。。。

作者: xyq159589 发布时间: 2010-05-14

希望LZ封装成JQ插件，以便使用谢谢

作者: cwq2jxl 发布时间: 2010-05-14

高人，希望可以BOX下

作者: roye2008 发布时间: 2010-05-14

很是不错。。。留言收藏

作者: jgs1982 发布时间: 2010-05-14

东西不错，下载了，也用上了

作者: keringing 发布时间: 2010-05-15

和IE的私有滤镜何其相似啊。

作者: yoom 发布时间: 2010-05-15

Marking~

作者: cychai 发布时间: 2010-05-15

这个效果还真的不错哟。

作者: lzl777 发布时间: 2010-05-16

这个效果MS真的很火,还好,我算是赶上潮流了,一个月前就将此效果用于我的博客了,可以直接使用分享一下,基于jQuery的,原作者唐斌同学.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="keywords" content="Mr.Think,青鸟,前端开发,前端技术,网站策划,网站优化,javascript,css,Mr.Think的博客,青鸟的博客,PHP爱好者,Bluebirdsky" /> <meta name="description" content="Mr.Think的个人博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> <title>基于jQuery的图片翻转效果@唐斌</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <style> body{font:1em "微软雅黑"} img{border:0;} h1{font-size:1em; font-weight:normal} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} .zoombox{margin:50px; border:5px solid #eee; padding:5px} /*zoomimg*/ a.artZoom { cursor:url('http://mrthink.net/wp-content/themes/zsofa/images/zoom/zoomin.cur'), auto; position:relative; } a.artZoom .loading { width:25px; height:25px; position:absolute;z-index:9;left:5px; top:5px; background:url(http://mrthink.net/wp-content/themes/zsofa/images/zoom/load.gif) no-repeat center center; } .artZoomBox { position:relative; } .artZoomBox .tool { text-indent:6px; } .artZoomBox .tool a { height:1.8em; line-height:1.8em; display:inline-block; *display:inline; padding:0 5px; margin:0; color:#FFF; background:#3A6EA5;text-decoration:none; filter:alpha(opacity=70); opacity:0.7; } .artZoomBox .tool a:hover { background:#BEDBDE; filter:alpha(opacity=100); opacity:1; } .artZoomBox a.maxImgLink { cursor:url('http://mrthink.net/wp-content/themes/zsofa/images/zoom/zoomout.cur'), auto; display:inline-block; *zoom:1;*display:inline;} .artZoomBox a.maxImgLink .maxImg { padding:5px; background:#FFF; border:solid 1px #CCC; } .artZoomBox a.maxImgLink .maxImg, .artZoomBox .tool span { -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .artZoomBox a.maxImgLink .maxImg { -moz-box-shadow: 0 0 3px #3a6ea5; -webkit-box-shadow: 0 0 3px #3a6ea5; box-shadow: 0 0 3px #3a6ea5 } </style> </head> <body> <h1><a href="http://mrthink.net/">Mr.Think的个人博客</a><br />@专注前端技术,热爱PHP,崇尚简单生活.</h1> <div class="zoombox"> <a class="miniImg artZoom" href="http://www.amostoys.com/images/460/graphics/hey.jpg"><img title="Mr.Think" src="http://www.amostoys.com/images/460/graphics/hey.jpg" alt="Zoom" width="300" height="300" /></a> </div> <script> //原作者:唐斌www.planeart.cn/,由Mr.Think整理分享.感谢唐斌同学:) $(function(){ var imgID = 0; $('a.artZoom').click(function(){ var id = $(this).attr('rel'); if(id == ''){ id = imgID += 1; $(this).attr('id','artZoomLink-' +id); $(this).attr('rel',id) }; var url = $(this).attr('href'); $(this).append('<div class="loading" title="loading.."></div>');//loading function getImageSize(url,fn){ var img = new Image(); img.src = url; if (img.complete){ fn.call(img); }else{ img.onload = function(){ fn.call(img); }; }; }; getImageSize(url,function(){ $('#artZoomLink-' +id+ ' .loading').remove(); $('#artZoomLink-' +id).hide(); if (id != '' && $('#artZoomBox-' +id).length == 0){ var html = ''; html += '<div class="artZoomBox" id="artZoomBox-' +id+ '" style="display:none">'; html += ' <div class="tool"><a class="hideImg" href="#" rel="' +id+ '">收起</a><a class="imgLeft" href="#" rel="' +id+ '">向左转</a><a class="imgRight" href="#" rel="' +id+ '">向右转</a><a class="viewImg" href="#" rel="' +id+ '">新窗口打开</a></div>'; html += ' <a href="' +url+ '" class="maxImgLink" id="maxImgLink-' +id+ '" rel="' +id+ '"> <img class="maxImg" width="' +this.width+ '" height="' +this.height+ '" id="maxImg-' +id+ '" src="' +url+ '" /> </a>'; html += '</div>'; $('#artZoomLink-' +id).after(html); }; $('#artZoomBox-' +id).show('fast'); }); return false; }); //让IE8在图片旋转后高度能被包含 function IE8height(id){ var w = $('#maxImg-' +id).outerWidth(); var h = $('#maxImg-' +id).outerHeight(); $('#artZoomBox-' +id+ ' a.maxImgLink').css('height',''); if ($.browser.version == '8.0' && w > h) { var maxHeight = Math.max(w, h); $('#artZoomBox-' +id+ ' a.maxImgLink').css('height',maxHeight+ 'px'); }; }; $('.artZoomBox a').live('click', function(){ var id = $(this).attr('rel'); //收起 if($(this).attr('class') == 'hideImg' || $(this).attr('class') == 'maxImgLink') { $('#artZoomBox-' +id).hide('fast',function(){ $('#artZoomLink-' +id).show(); }); }; //左旋转 if($(this).attr('class') == 'imgLeft') { IE8height(id); $('#maxImg-' +id).rotateLeft(90); }; //右旋转 if($(this).attr('class') == 'imgRight') { IE8height(id); $('#maxImg-' +id).rotateRight(90); }; //新窗口打开 if($(this).attr('class') == 'viewImg') window.open($('#maxImgLink-' +id).attr('href')); return false; }); }); jQuery.fn.rotate = function(angle,whence) { var p = this.get(0); // we store the angle inside the image tag for persistence if (!whence) { p.angle = ((p.angle==undefined?0:p.angle) + angle) % 360; } else { p.angle = angle; } if (p.angle >= 0) { var rotation = Math.PI * p.angle / 180; } else { var rotation = Math.PI * (360+p.angle) / 180; } var costheta = Math.cos(rotation); var sintheta = Math.sin(rotation); if (document.all && !window.opera) { var canvas = document.createElement('img'); canvas.src = p.src; canvas.height = p.height; canvas.width = p.width; canvas.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+costheta+",M12="+(-sintheta)+",M21="+sintheta+",M22="+costheta+",SizingMethod='auto expand')"; } else { var canvas = document.createElement('canvas'); if (!p.oImage) { canvas.oImage = new Image(); canvas.oImage.src = p.src; } else { canvas.oImage = p.oImage; } canvas.style.width = canvas.width = Math.abs(costheta*canvas.oImage.width) + Math.abs(sintheta*canvas.oImage.height); canvas.style.height = canvas.height = Math.abs(costheta*canvas.oImage.height) + Math.abs(sintheta*canvas.oImage.width); var context = canvas.getContext('2d'); context.save(); if (rotation <= Math.PI/2) { context.translate(sintheta*canvas.oImage.height,0); } else if (rotation <= Math.PI) { context.translate(canvas.width,-costheta*canvas.oImage.height); } else if (rotation <= 1.5*Math.PI) { context.translate(-costheta*canvas.oImage.width,canvas.height); } else { context.translate(0,-sintheta*canvas.oImage.width); } context.rotate(rotation); context.drawImage(canvas.oImage, 0, 0, canvas.oImage.width, canvas.oImage.height); context.restore(); } canvas.id = p.id; canvas.className = 'maxImg';//定义图片旋转后的className canvas.angle = p.angle; p.parentNode.replaceChild(canvas, p); } jQuery.fn.rotateRight = function(angle) { this.rotate(angle==undefined?90:angle); } jQuery.fn.rotateLeft = function(angle) { this.rotate(angle==undefined?-90:-angle); } </script> <p>原作者唐斌,原文地址: <a href="http://www.planeart.cn/?p=696">http://www.planeart.cn/?p=696</a> 由Mr.Think整理分享,转载请注明</p> </body> </html>
提示：您可以先修改部分代码再运行

更详细介绍,请访问:http://mrthink.net/javascript-jquery-zoom-turnimg/

[ 本帖最后由 gollum 于 2010-5-17 23:15 编辑 ]

作者: gollum 发布时间: 2010-05-17

太雷人了，我那个时候接触JQ不久写了缩放旋转的例子，由于不熟悉jQ，很多简便的dom方法没有用上。
还是佐佐的好些，我最后用在项目上的就参考了佐佐的旋转方法。

作者: tangbin1987 发布时间: 2010-05-17

我也在jQuery学习中... 以后多向你学习了..

作者: gollum 发布时间: 2010-05-18

不错不错。支持下了。有时间研究下。应该会有用到的时候。呵呵

作者: xueshuibing 发布时间: 2010-05-18

引用:

原帖由 cwq2jxl 于 2010-5-14 08:40 发表
希望LZ封装成JQ插件，以便使用谢谢

补充:
JQuery 插件文件地址：http://byzuo.com/demo/jq/jq-plug ... ts/jquery.rotate.js
JQuery 插件版预览：http://byzuo.com/demo/jq/jq-plugins-rotate
JQuery 插件版下载: http://www.box.net/shared/zvbt1eng5b

作者: dianfish 发布时间: 2010-05-18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Jay_Web_code </title> <style> #pos{ left:450px;top:200px; position:absolute; } #likeImg,img{ width:327px;height:341px; display:block; } </style> </head> <body> <div id="pos"> <div id="google" ><img src="http://home.blueidea.com/attachment/201005/18/498332_1274156841iCWF.jpg" id='gg' /></div> </div> </body> <script type="text/javascript"> XRevoler=function(shell){ this.shell=document.getElementById(shell); this.shell.style.cssText='position:absolute;'; this.shell.parentNode.style.position='absolute'; this.draw=window.ActiveXObject?this.IEDraw:this.FFDraw; } XRevoler.prototype={ turn:function(angle,isReplace,min,max){ var C=Math.cos,S=Math.sin,Pi=Math.PI,A=Math.abs,$=this.shell; $.angle=isReplace?angle:((($.angle==undefined?0:$.angle)+angle)%360); if($.angle<0)$.angle+=360; if($.angle>180&&min){if($.angle<360-min)$.angle=360-min}; if($.angle<180&&max){if($.angle>max)$.angle=max}; var R=$.angle/(360/(2*Pi)),c=C(R),s=S(R); this.draw(C(R),S(R),R); $.style.top = (327-$.offsetHeight)/2+'px'; $.style.left = (341-$.offsetWidth)/2+'px'; this.angle=$.angle; } ,fix:function(x){this.turn(x,true)} ,IEDraw:function (c,s){ this.shell.style.filter = "progid:DXImageTransform.Microsoft.Matrix()"; with(this.shell.filters.item("DXImageTransform.Microsoft.Matrix")) {SizingMethod = "auto expand";FilterType = "bilinear";M11=M22=c;M12 =-(M21=s);}; } ,FFDraw:function (c,s,R){ if(!this.ffx){ this.ffx=document.createElement('CANVAS');}; if(!this.ffx.img){ this.ffx.img=new Image(); var srcImg=this.shell.getElementsByTagName("IMG")[0]; this.ffx.img.src=srcImg.src; this.shell.replaceChild(this.ffx,srcImg); }; this.ffx.id='likeImg'; var $=this.ffx,A=Math.abs; $.style.width=$.width=A(c*$.img.width)+A(s*$.img.height); $.style.height=$.height=A(c*$.img.height)+A(s*$.img.width); var $$=$.getContext('2d');$$.save(); if (R<=Math.PI/2) {$$.translate(s*$.img.height,0); }else if(R<=Math.PI) {$$.translate($.width,-c*$.img.height); }else if(R<=1.5*Math.PI) {$$.translate(-c*$.img.width,$.height); }else{$$.translate(0,-s*$.img.width);} $$.rotate(R); document.title=[$.img.width, $.img.height]; $$.drawImage($.img, 0, 0, $.img.width, $.img.height); $$.restore(); } } window.onload=function (){ var Jay=new XRevoler('google'); Jay.fix(720); var ggg=setInterval(function(){ var J=Math.abs(Math.ceil(Jay.angle*0.3)); Jay.turn(-J); if(Jay.angle==-720)clearInterval(ggg) },100); } </script> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 kfguoguo 于 2010-5-18 12:31 编辑 ]

作者: kfguoguo 发布时间: 2010-05-18

旋转倒很好实现，但是有个问题
我现在图片是相对居中的，怎么让他围绕中心点旋转，即旋转后始终保持居中！

作者: zwb185 发布时间: 2010-05-25

我忍不住要顶下

作者: javysun 发布时间: 2010-05-27

我也在jQuery学习中... 以后多向你学习了..初学这羡慕大师的水平

作者: zixia0601 发布时间: 2010-06-05

bu cuo !

作者: ai68738651 发布时间: 2010-06-11