canvas旋转图片

javascript

浏览数:229

2019-1-7

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas旋转图片</title>
    <style>
        * {
            box-sizing: border-box;
        }
        
        .container {
            margin: 15px;
            border: 1px solid rgb(106, 250, 255);
            padding: 20px;
            background: #fff;
            text-align: center;
        }
        
        .img-block {
            max-width: 400px;
            background: #eee;
            padding: 15px;
            margin: 0 auto 15px auto;
        }
        
        .img {
            display: block;
            max-width: 100%;
        }
        
        .btn {
            padding: 5px 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="img-block">
            <img src="i.jpg" class="img" id="img">
        </div>
        <div class="operate-block">
            <button type="button" class="btn" id="rotate_clockwise" onclick="rotateImage('img');">顺时针旋转90度</button>
            <button type="button" class="btn" id="rotate_anticlockwise">逆时针旋转90度</button>
        </div>
    </div>

    <script>
        /*
            imageId: 需要旋转的图片的id;
            direction: 顺时针为1, 逆时针为 - 1;

            思路:
            1. 获取需要旋转图片image的src;
            2. 以此src构建新的图片对象img;
            3. 在img的onload事件中:
                1. 创建一个canvas元素, 它的宽和高分别对应img的高和宽( 因为旋转90度后, 图片的宽高正好是之前的高宽)
                    其中ctx我们可以想象它无限大,注意一点:ctx上绘制的图形只有位置出现在canvas窗口中时,才能显示出来
                2. 绘制图片之前, 一定要先将ctx顺时针旋转90度,( 否则图片没有旋转的效果,因为绘制图片时的ctx状态已被保存下来),但是,绘制出来的图形效果相当于先绘制,再旋转
                    (那到底绘制在哪里,ctx旋转90度则正好全部显示在canvas上?)
                    我们可以将canvas的(0,0)位置当作一个圆心,而ctx就是围绕这个圆心旋转的。
                        我们倒推一下,image顺时针旋转90度后的形状,iamge的左下角成了新图的左上角,且这个左上角位置就在canvas的(0,0)处,ctx旋转时,这个角应该是不动的
                            这样我们只要得出image左上角的坐标就是我们需要寻找的ctx绘图时的起点:
                                左上角坐标(相对canvas来说)应该是(0, -canvas.width);
                3.如果ctx不旋转,那么绘制出的新图正好在canvasde正上方,我们是看不见的;当ctx旋转90度之后,则新图正好处在canvas视窗中,完美呈现(这里我们需要想象一下:canvas大小位置固定,它是用来呈现绘制的图形的窗口;而ctx则是无限大,但是它的起点位置永远都是相对于canvas视窗的左上角,即ctx就是一个以canvas左上角为圆心,半径无限大的圆)
                4.其他几个角度,原理一样
                5.如果角度不是90度的倍数时,则绘图原点就需要使用sin,cos来表示了;
        */      

        function rotateImage(imageId, direction) {
            var image = document.getElementById(imageId);
            var src = image.src;

            var img = new Image();
            img.src = src;
            img.onload = function() {
                var w = this.naturalWidth;
                var h = this.naturalHeight;

                var canvas = document.createElement("canvas");
                canvas.height = w;
                canvas.width = h;
                var ctx = canvas.getContext("2d");
                ctx.rotate(Math.PI / 180 * 90);
                ctx.drawImage(this, 0, -canvas.width);
                var base = canvas.toDataURL("image/jpeg");
                image.src = base;
            }        }
    </script>
</body>

</html>