`

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>
分享到:
评论

相关推荐

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

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

    html5 canvas炫酷旋转银河系星空背景特效

    总结来说,这个特效结合了HTML5 Canvas的绘图能力、JavaScript的动画机制以及可能的jQuery辅助,构建了一个令人震撼的银河系旋转背景。通过学习这个案例,开发者可以提升自己在Web前端开发中的动态效果实现技巧,...

    canvas demo

    4. **图像加载与绘制**:使用`drawImage()`方法可以在canvas上绘制图片。例如,`context.drawImage(image, x, y, width, height)`,这里的`image`是Image对象,`x`和`y`是图像左上角的坐标,`width`和`height`是图像...

    Html中Canvas的各种图形的demo

    然后,通过JavaScript获取Canvas元素并创建绘图上下文,例如`var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d');`。 2. **Canvas绘图方法**:Canvas提供了丰富的绘图API,如`...

    alloyImage基于canvas的图片插件demo

    "AlloyImage"是一款基于Canvas的图片处理插件,它为JavaScript提供了强大的图像操作功能,使得开发者能够在浏览器环境中对图片进行各种复杂的操作,无需依赖服务器端的支持。这个"alloyImage基于canvas的图片插件...

    canvas动画demo

    总结,`canvas`动画的实现需要对JavaScript和`canvas` API有深入理解,通过不断的重绘和改变图形状态,可以创造出各种动态效果。通过学习和实践,你可以创建出更加复杂和精美的动画,提升网页的用户体验。

    H5_canvasDemo合集

    例如,你可以用Canvas绘制出动态图表、游戏场景、图片编辑器,甚至构建全屏的网页应用。 在这个合集中,可能包含了以下几种类型的Canvas Demo: 1. **基本绘图**:比如绘制直线、曲线、矩形、圆形等基本图形,这些...

    网页前端canvas简单处理图片的白点(白边),旋转和反转图片

    Process image on web page via canvas. Support followinng functions as: - remove white points in an image ([r,g,b].every in [255,247]) - flip the image horizontally or vertically - rotate the image ...

    js-canvas雪花特效插件及demo

    总结来说,"js-canvas雪花特效插件及demo"是一个基于HTML5 Canvas API实现的动态效果,涉及到JavaScript编程、Canvas绘图方法、随机数生成、动画原理、物理模拟和性能优化等多个方面。通过对这个插件的学习,开发者...

    html5 canvas碎片3D环绕地球天体运动动画特效

    7. **CSS和JS配合**:在这个项目中,我们看到还有名为"css"和"js"的文件夹,它们很可能包含了样式表和JavaScript代码。CSS可能用于调整画布的布局和外观,而JavaScript则负责所有的动态逻辑和动画控制。 这个特效的...

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

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

    canvas画图Demo

    本“canvas画图Demo”旨在教你如何利用HTML5的Canvas API和JavaScript的Paint对象来实现自定义绘图功能。下面我们将深入探讨Canvas的基本概念、常用方法,以及如何用Paint进行画线、画点、画多边形和矩阵操作。 ...

    微信小程序 Canvas 画板、签名板Demo

    为了提供良好的用户体验,签名板Demo可能还包含了平滑绘图(抗锯齿)、手势识别(例如双指缩放、旋转)等高级特性。此外,优化性能和减少延迟也是关键,确保流畅的绘图体验。 8. **部署与发布**: 最后,将这个...

    html canvas demo

    Canvas API也支持图像的加载和绘制,如`drawImage()`方法,可以将图片文件(如JPEG、PNG)绘制到画布上,甚至可以进行剪裁、缩放和旋转等操作。这在制作网页动态效果或进行图像合成时非常有用。 此外,Canvas还支持...

    js图片裁剪插件 内附demo.rar

    本资源"js图片裁剪插件 内附demo.rar"提供了一个JavaScript实现的图片裁剪解决方案,包括前端的交互逻辑和后端的处理流程。 一、JavaScript图片裁剪技术 1. 前端技术基础:JavaScript是一种运行在客户端的编程语言...

    CanvasDemo

    5. **图像处理**:了解如何使用`drawImage()`函数加载和绘制图像,包括拉伸、裁剪和旋转图片。 6. **事件处理**:结合JavaScript的事件监听器,实现用户与Canvas上的图形交互,例如鼠标点击、移动等。 7. **动画...

    基于H5+C3实现的3D旋转木马效果JS插件,支持电脑,移动设备

    本项目提供的JS插件,正是这样一个实现3D旋转木马效果的工具,通过编写简单的DEMO,你可以直观地了解如何应用并定制这个插件。 【主要知识点】: 1. HTML5 Canvas:HTML5中的Canvas元素提供了一个在网页上绘制2D...

    js裁剪demo.rar

    总结,"js裁剪demo.rar" 提供了一个关于JavaScript图片上传和裁剪的实例,涵盖了File API、FormData、Canvas、EXIF处理以及第三方库PhotoClip的使用。通过学习和实践这个示例,开发者能够更好地掌握前端图片处理技术...

    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;...

    html5 canvas模仿flash的简单动画banner Demo

    - 图像处理:`drawImage()`方法可以将图片绘制到canvas上。 - 变换:`translate()`, `rotate()`, `scale()`用于改变坐标系统,实现平移、旋转和缩放效果。 - 动画原理:通过定时器(如`setInterval()`或`...

Global site tag (gtag.js) - Google Analytics