js canvas 照片旋转 demo

pyzheng

浏览: 3422041 次
性别:
来自: 珠海

最近访客更多访客>>

kopomimi

oszerone

lindow

leisure0422

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-06 ( 26)
2016-05 ( 32)
2016-04 ( 33)
更多存档...

博客分类：

Android&HTML5

<!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>

分享到：

animate.css简介 | 使用spring的@Async异步执行方法

2015-12-26 17:52
浏览 1521
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js canvas 照片旋转 demo

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js canvas 照片旋转 demo

评论

发表评论

相关推荐

html5调用手机拍照并压缩上传

HTML调用PC摄像头

微信JS-SDK获取signature签名以及config配置

Html5添加移动触摸的网页版PDF格式文件阅读器插件

静态网站生成器 Lektor

history.js 一个无刷新就可改变浏览器栏地址的插件（不依赖jquery）

如何使用js、html5在浏览器直接打开pdf文档

HTML5 Geolocation API的使用方法及实现原理

jquery三种支持手机触屏的插件库

Android 应用热修复工具 AndFix

【gloomyfish】关于手机网站你想知道的一切

java 判断请求来自手机或电脑

Cordova例子

Android AVD创建及设置中各参数详解

PhoneGap的例子

Zepto.js与jquery的比较

在android的webview中实现websocket

原生：在Android开发中调用Restful web服务

Android+REST WebService服务方式手机开发

资源: 移动开发框架插件收集

最近访客更多访客>>