<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FoxLing - 前端开发 &#187; 图片旋转</title>
	<atom:link href="http://foxling.org/tag/%e5%9b%be%e7%89%87%e6%97%8b%e8%bd%ac/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>我还在寻找方向</description>
	<lastBuildDate>Tue, 10 Apr 2012 16:48:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>JS利用Canvas，跨浏览器实现图片旋转效果</title>
		<link>http://foxling.org/js-ajax-dom/js-rotate-picture/</link>
		<comments>http://foxling.org/js-ajax-dom/js-rotate-picture/#comments</comments>
		<pubDate>Tue, 17 Mar 2009 16:08:49 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[JS/AJAX/DOM]]></category>
		<category><![CDATA[Canvas]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[图片旋转]]></category>

		<guid isPermaLink="false">http://foxling.cn/?p=241</guid>
		<description><![CDATA[目的： 对图片进行90、180、270度的旋转，便于浏览照片。 实现方法： 1.IE浏览器，使用BasicImage滤镜 filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled , grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay ) Rotation:可读写。整数值(Integer)。设置或检索对象内容的旋转。0 &#124; 1 &#124; 2 &#124; 3 0:默认值。内容不旋转。 1:内容旋转90度。 2:内容旋转180度。 3:内容旋转270度。 _this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation=' + _this.r + ')'; 2.其它标准浏览器(FireFox,Chrome,Safari,Opera)都支持Canvas，利用Canvas的rotate以及drawImage对图片进行旋转。 mozilla的Canvas文档：https://developer.mozilla.org/En/Canvas_tutorial 首先，将图片替换成Canvas var canvas = document.createElement('CANVAS'); var ctx = canvas.getContext('2d'); canvas.setAttribute('width',this._img.width); canvas.setAttribute('height',this._img.height); ctx.drawImage(this._img,0,0); this._ghost = this._img; this._img.parentNode.replaceChild(canvas,this._img); this._img [...]]]></description>
			<content:encoded><![CDATA[<p><strong>目的：</strong><br />
对图片进行90、180、270度的旋转，便于浏览照片。</p>
<p><strong>实现方法：</strong><br />
1.IE浏览器，使用BasicImage滤镜</p>
<pre>
filter : progid:DXImageTransform.Microsoft.BasicImage ( enabled=bEnabled ,
grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay )
</pre>
<p><strong>Rotation</strong>:可读写。整数值(Integer)。设置或检索对象内容的旋转。0 | 1 | 2 | 3 </p>
<ul>
<li>0:默认值。内容不旋转。 </li>
<li>1:内容旋转90度。</li>
<li>2:内容旋转180度。 </li>
<li>3:内容旋转270度。 </li>
</ul>
<pre>
_this._img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(Rotation='
                                                           + _this.r + ')';
</pre>
<p>2.其它标准浏览器(FireFox,Chrome,Safari,Opera)都支持Canvas，利用Canvas的rotate以及drawImage对图片进行旋转。</p>
<p>mozilla的Canvas文档：<a href="https://developer.mozilla.org/En/Canvas_tutorial" target="_blank">https://developer.mozilla.org/En/Canvas_tutorial</a></p>
<p><span id="more-241"></span><br />
首先，将图片替换成Canvas</p>
<pre>
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
canvas.setAttribute('width',this._img.width);
canvas.setAttribute('height',this._img.height);
ctx.drawImage(this._img,0,0);
this._ghost = this._img;
this._img.parentNode.replaceChild(canvas,this._img);
this._img = canvas;
</pre>
<p>旋转的功能代码：</p>
<pre>
switch (_this.r){
	case 0:
		_this._img.setAttribute('width',_this._ghost.width);
		_this._img.setAttribute('height',_this._ghost.height);
		ctx.drawImage(_this._ghost,0,0);
		break;
	case 1:
		_this._img.setAttribute('width',_this._ghost.height);
		_this._img.setAttribute('height',_this._ghost.width);
		ctx.rotate(90*Math.PI/180);
		ctx.drawImage(_this._ghost,0,-_this._ghost.height);
		break;
	case 2:
		_this._img.setAttribute('width',_this._ghost.width);
		_this._img.setAttribute('height',_this._ghost.height);
		ctx.rotate(180*Math.PI/180);
		ctx.drawImage(_this._ghost,-_this._ghost.width,
                                                      -_this._ghost.height);
		break;
	case 3:
		_this._img.setAttribute('width',_this._ghost.height);
		_this._img.setAttribute('height',_this._ghost.width);
		ctx.rotate(270*Math.PI/180);
		ctx.drawImage(_this._ghost,-_this._ghost.width,0);
		break;
}
</pre>
<p>预览效果，完整代码提供打包下载：</p>
<style type="text/css">
.rotation {background:transparent url(/examples/rotatepicture/btn.png) no-repeat 0 0;width:36px;height:22px;border-width:0;cursor:pointer;display:block;}
</style>
<p><img src="/examples/rotatepicture/demo.jpg" id="demo" alt="Demo" /><br />
<script type="text/javascript" src="/examples/rotatepicture/rotationPicture.js"></script><br />
<script type="text/javascript">
window.onload = function(){
	var ir = new rotationPicture('demo');
};
</script></p>
<p>Demo地址：<a href="/examples/rotatepicture/" target="_blank">JS旋转图片Demo</a><br />
Demo下载地址：<a href="/examples/rotatepicture/rotatepicture.rar">JS旋转图片</a></p>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/js-ajax-dom/js-rotate-picture/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

