`

js canvas 照片旋转 demo

 
阅读更多
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>
分享到：
| 使用spring的@Async异步执行方法
评论
发表评论

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

相关推荐

    实现canvas 图片拖拽旋转移动 点击转成base64

    使用hammer.js监听触控时产生的位移，并用Jcanvas.js画出来，从而实现在canvas画布内进行手势的拖拽 旋转 移动 缩放功能.点击按钮获取画布内的base64，并显示. 测试时请放在tomcat内，并手机访问. 不足：canvas加载...

    js完美实现同时拖拽、旋转、放大缩小图片的手势操作

    使用hammer.js 可以手势控制同时进行旋转 拖拽 放大缩小功能， 解决官网移动旋转复位效果， 重点解决官网旋转rotate demo旋转乱跳bug 官网:http://hammerjs.github.io/ (官网的demo真是坑 又是复位又是旋转抖动的....

    JavaScript canvas实现围绕旋转动画

    使用canvas的convas来实现围绕旋转动画，外圈顺时针，里层逆时针 代码demo链接地址：代码demo链接地址 html文件 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;...

    通过手势控制图片的缩放、移动、旋转

    demo实现了手势对图片的控制.包括旋转、缩放、移动三个功能.相当nice，欢迎下载。

    微信小程序-canvas-剪切保存图片

    一个微信小程序demo，用户可以上传一张图片，在canvas画布上展示，然后可以平移、单指旋转、双指缩放图片，最后将canvas区域内的图片内容保存到本地相册。采用了微信开发者文档的最新api，能够兼容大多数的场景，并...

    demo-mapview.html

    Canvas 小游戏 旋转补正 demo

    js仿微博图片缩放插件.7z

    经常看到新浪微博里有图片放大缩小旋转效果，感觉效果还不错，所以就想试着做一个类似的demo出来，至于旋转对于IE可以用滤镜来解决，标准的浏览器可以用html5中的canvas画布来解决。 思路：1.点击小图后，小图...

    【前端素材】模板-多种实用一些demo.zip

    Canvas 动画：通过 HTML5 Canvas 元素绘制图形，利用 JavaScript 控制绘制过程，实现高度可定制化的动画效果，适用于需要实时渲染的复杂动画场景。 WebGL 动画：基于 WebGL（Web图形库）的 3D 图形渲染技术，可以...

    vue 使用 canvas 实现手写电子签名

    画布自适应屏幕大小变化（窗口缩放、屏幕旋转时画布无需重置，自动校正坐标偏移）； 自定义画布尺寸（导出图尺寸），画笔粗细、颜色，画布背景色； 支持裁剪 （针对需求：有的签字需要裁剪掉四周空白）。 导出...

    HTML5实现DNA螺旋动画

    记得之前我们分享过一款很酷的HTML5 DNA动画，螺旋效果不是很理想，今天分享的这款HTML5 DNA螺旋动画效果就非常不错了，不仅具有更为立体的视觉效果，而且螺旋的效果也带有3D的动画特效，大家可以在DEMO演示中看到...

    maelstrom:OO JavaScript GameEngine 和示例游戏

    基于示例游戏的简单 OO JavaScript Canvas 游戏引擎 这是一个演示：http: （方向键移动，空格键射击） 去做 在第一级负载上添加 invuln 从引擎中删除 .init，找出更好的方法来做到这一点，因为它很混乱 重构demo...

    TagCanvas:HTML5基于画布的标签云

    TagCanvas HTML5画布标签云TagCanvas将文本或图像链接转换为3D旋转标签云。 有关示例，文档等，请访问： :

    微信小程序运行TensorFlow的演示

    小程序调用摄像头成像，将图片显示在 canvas 上，通过小程序的 API 可以获取到 canvas 的「类 ImageData」数据，再调用 tfjs 的 API 实现预测。 对实现的坎坷经历感兴趣的，可以看看博文 和 。 目前实现方式 由于 ...

Magicbox
Global site tag (gtag.js) - Google Analytics