canvas反转绘制图片

shuaigg.babysky

浏览: 561729 次
性别:
来自: 济南

最近访客更多访客>>

amu123456

ringphone

u012363178

jimwzws

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
* {margin:0;padding:0;}
div.holder {width:500px;border:1px solid black;text-align:center;overflow:hidden;}
div.holder img {margin:0 auto;display:block;}
</style>
</head>
<body>
    <div id="delegate">
        <div class="holder">
            <p>
                <a class="turnleft" href="#">向左转</a>
                <a class="turnright" href="#">向右转</a>
            </p>
            <div style="font-size:0px;">
                <img src="http://ww1.sinaimg.cn/bmiddle/6087b519tw1din59omsdqj.jpg" />
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var maxWidth = 500;
        window.onload = function() {
            var delegate = document.getElementById('delegate');
            var links = delegate.getElementsByTagName('a');
            for(var i = 0 ; i < links.length ; i++) {
                if((links[i].className + "").match(/\b(turnleft|turnright)\b/)) {
                    links[i].onclick = function(e) {
                        e = e || window.event;
                        var target = e.target || e.srcElement;
                        rotate(target);
                    };
                }
            }
        };
        function findNext(target) {
            var result = target , count = 0;
            while(true) {
                result = result.nextSibling;
                count++;
                if(result && result.nodeType == 1) {
                    break;
                }
                if(!result || count > 10) {
                    break;
                }
            }
            return result;
        }
        function rotate(target) {
            var clsName = target.className;
            var img = findNext(target.parentNode).getElementsByTagName("IMG")[0];
            var num = getAngle(img , clsName == 'turnleft' ? 'left' : 'right');
            var ie = /msie/i.test(navigator.userAgent);
            if(ie) {
                img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + num + ')';
            } else {
                var canvas = img.parentNode.getElementsByTagName('canvas');
                if(!canvas.length) {
                    canvas = document.createElement('canvas');
                    img.parentNode.appendChild(canvas);
                } else {
                    canvas = canvas[0];
                }
                if(num % 2 == 0) {
                    canvas.width = img.width;
                    canvas.height = img.height;
                } else {
                    canvas.width = img.height;
                    canvas.height = img.width;
                }
                var context = canvas.getContext('2d');
                var arr = [[0,0] , [0,-img.height] , [-img.width ,-img.height] , [-img.width,0]];
                context.rotate(num * Math.PI / 2);
                context.drawImage(img , arr[num][0] , arr[num][1] , img.width , img.height);
                img.style.display = 'none';
            }
        }
        function resize(target , angle) {
            var size = target.realSize;
            if(!size) {
                target.realSize = size = {
                    width : target.width,
                    height : target.height
                };
            }
            if(angle % 2 == 0) {
                target.width = size.width;
                target.height = size.height;
            } else {
                if(size.height > maxWidth) {
                    target.height = maxWidth;
                    target.width = maxWidth * size.width / size.height;
                } else {
                    target.width = size.width;
                    target.height = size.height;
                }
            }
        }
        function getAngle(target , type) {
            var angle = target.angle || 0;
            type == 'left' ? angle -= 90 : null;
            type == 'right' ? angle += 90 : null;
            Math.abs(angle) > 270 ? angle = 0 : null;
            target.angle = angle;
            angle /= 90;
            if(angle < 0) {
                angle = 4 + angle;
            }
            var isIe = /msie/i.test(navigator.userAgent);
            resize(target , angle);
            if(isIe) {
                var marginLeft;
                if(angle % 2 == 1) {
                    target.parentNode.style.height = target.width + 'px';
                    marginLeft = Math.floor((maxWidth - target.height) / 2);
                } else {
                    target.parentNode.style.height = target.height + 'px';
                    marginLeft = Math.floor((maxWidth - target.width) / 2);
                }
                target.style.marginLeft = marginLeft + 'px';
            }
            return angle;
        }
    </script>
</body>
</html>

查看图片附件

分享到：

全半角转化 | canvas反转绘制图片

2011-06-30 15:12
浏览 1267
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论