js canvas 照片旋转 demo

zsh

2015-12-26

http://my.oschina.net/u/1259707/blog/542813

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><!--以手机屏幕为标准，禁止放大缩小-->
        <meta name="format-detection" content="telephone=no"/><!--屏蔽IOS下自动转换数字为手机链接-->
        <meta name="apple-mobile-web-app-capable" content="yes" /><!--IOS应用模式，自动隐藏默认的工具栏和菜单栏-->
        <meta name="browsermode" content="application"><!--UC应用模式-->
        <meta name="x5-page-mode" content="app"><!--腾讯X5浏览器应用模式-->
        <title>照片旋转</title>
    </head>
    <body style="margin: 0;">
        <input type="file" onchange="fileChangeEvent(this.files[0]);"/><br><br>
        <img style="width: 100%;" src="./1.jpg"/><br><br>
        <canvas style="display: none;"></canvas>
        <input type="button" value="90度"/><br><br>
        <input type="button" value="180度"/><br><br>
        <input type="button" value="270度"/><br><br>
        <input type="button" value="返回"/><br><br>
    </body>
    <script type="text/javascript">
        var img = document.querySelector("img");
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext('2d');
        var imgHeight = 200;
        var imgWidth = 200;
        img.onload = function(){
            imgHeight = img.height;
            imgWidth  = img.width;
        }
        function fileChangeEvent(file){
            var URL = window.URL || window.webkitURL;
            img.src = URL.createObjectURL(file);
            img.onload = function(){
                imgHeight = img.height;
                imgWidth  = img.width;
            }
        }
         
        function rotate90()
        {
            img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题
            canvas.width = imgHeight;
            canvas.height = imgWidth;
            context.translate(canvas.width * 0.5, canvas.height * 0.5);
            context.rotate(Math.PI * 0.5);
            context.translate(-canvas.height * 0.5, -canvas.width * 0.5);
            context.drawImage(img, 0, 0, imgWidth, imgHeight);
            img.src = canvas.toDataURL("image/png");
        }
         
        function rotate180()
        {
            canvas.width = imgWidth;
            canvas.height = imgHeight;
            context.rotate(Math.PI);
            context.translate(-canvas.width, -canvas.height);
            context.drawImage(img, 0, 0, imgWidth, imgHeight);
            img.src = canvas.toDataURL("image/png");
        }
         
        function rotate270()
        {
            img.style.width = "initial"; // 防止 css 导致旋转时的图片宽高比拉伸而导致的模糊问题
            canvas.width = imgHeight;
            canvas.height = imgWidth;
            // 以中心点为基准旋转，所有的旋转只改变了 canvas 画笔的坐标轴，对画布没有任何影响
            context.translate(canvas.width * 0.5, canvas.height * 0.5);
            context.rotate(-Math.PI * 0.5);
            context.translate(-canvas.height * 0.5, -canvas.width * 0.5);
            context.drawImage(img, 0, 0, imgWidth, imgHeight);
            img.src = canvas.toDataURL("image/png");
        }
        document.querySelectorAll("input[type='button']")[0].onclick = function(){
            rotate90();
        };
         
        document.querySelectorAll("input[type='button']")[1].onclick = function(){
            rotate180();
        };
         
        document.querySelectorAll("input[type='button']")[2].onclick = function(){
            rotate270();
        };
         
        document.querySelectorAll("input[type='button']")[3].onclick = function(){
            history.back();
        };
    </script>
</html>

canvas meta js