本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全：

下图为裁剪后的效果：

html部分：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>上传头像</title>

    <meta name="renderer" content="webkit">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="imgCrop" style="width:200px;height:200px;border:1px solid #ccc;overflow:hidden;">

    <img src="img/test.jpg" alt="">

</div>

<input type="file" accept="image/*" />

<button id="save">保存</button>

<p>下面为剪切的图片:</p>

<div id="imgShow"></div>

</body>

</html>

JavaScript部分：

var $imgCrop = $("#imgCrop");

var $img = $imgCrop.find("img");

var img = $img[0];

var width = parseInt($imgCrop.css("width"));

var height = parseInt($imgCrop.css("height"));

var startX,startY,scale = 1;

var x = 0,y = 0;

$("input").on("change",function(){

    var fr = new FileReader();

    var file = this.files[0]

    //console.log(file);

    if(!/image\/\w+/.test(file.type)){

        alert(file.name + "不是图片文件！");

        return;

    }

    console.log(file);

    $img.removeAttr("height width");

    fr.readAsDataURL(file);

    fr.onload = function(){

        img.src = fr.result;

        var widthInit = img.width;

        if(img.width>img.height){

            img.height = height;

            x = (width - img.width)/2;

            y = 0;

        }else{

            img.width = width;

            x = 0;

            y = (height - img.height)/2;

        }

        scale = widthInit/img.width;

        move($img, x, y);

    };

});

img.addEventListener("touchstart",function(e){

    startX = e.targetTouches[0].pageX;

    startY = e.targetTouches[0].pageY;

    return;  

});

img.addEventListener("touchmove",function(e){

    e.preventDefault();

    e.stopPropagation();  

    var changeX = e.changedTouches[0].pageX - startX + x;

    var changeY = e.changedTouches[0].pageY - startY + y;

    move($(this), changeX, changeY);

    return;  

});

img.addEventListener("touchend",function(e){

   var changeX = e.changedTouches[0].pageX - startX + x;

    var changeY = e.changedTouches[0].pageY - startY + y;

    x = x + e.changedTouches[0].pageX - startX;

    y = y + e.changedTouches[0].pageY - startY;

    move($(this), changeX, changeY);

    return;  

});

//确定目标图片的样式

function move(ele, x, y){

    ele.css({

        '-webkit-transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)',

        'transform' : 'translate3d(' + x + 'px, ' + y + 'px, 0)'

    });

}

$("#save").on("click",function(){

    var url = imageData($img);

    console.log(url);

    $("#imgShow").html("<img src="+url+" />");;

});

//裁剪图片

function imageData($img) {

        var canvas = document.createElement('canvas');

        var ctx = canvas.getContext('2d');

        canvas.width = width ;

        canvas.height = height;

        ctx.drawImage(img, -x*scale, -y*scale, width*scale, height*scale, 0, 0, width, height);

        return canvas.toDataURL();

    }

html5 上传头像的裁剪的更多相关文章

  1. PC端-上传头像并裁剪

    界面一: <link href="../theme/js/layui.layim/src/css/layui.css" rel="stylesheet"/ ...

  2. html5 上传头像示例及其注意事项

    转自[B5教程网]:http://www.bcty365.com/content-142-5244-1.html 这次分享一个简易的上传头像示例,其大致流程为: 一.将选择的图片转为base64字符串 ...

  3. 移动端 上传头像 并裁剪功能(h5)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

  5. 解决HTML5实现一键拨号、一键发短信及上传头像兼容性问题

    HTML5实现一键拨号,一键发短信以及上传头像等问题都是比较常见的场景,近期在做移动端项目的时候遇到阻挠,通过查找资料解决了问题: 废话不多说,直接上案例代码: HTML5实现一键拨号: <a ...

  6. html5上传本地图片,在线预览及裁剪(filereader,canvas)

    1 我们常常需要上传头像,点击上传按钮时候需要预览一下,使用filereader方法无需和后台交互,代码如下: //本地图片在上传之前的预览效果 //图片上传预览 function previewIm ...

  7. asp.net实现图片在线上传并在线裁剪

    1.说明 接上一篇文章uploadify实现多附件上传完成后,又突然用到头像上传并在线裁剪.在网上找个众多例子都没有符合要求的,有一篇文章写的不错,就是文旺老兄写的这篇Asp.Net平台下的图片在线裁 ...

  8. 上传头像,界面无跳转,php+js

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: //route 为后端接口//upload/avatar 为上传的头像的保存地址//imgurl=/uplo ...

  9. Android基础之——startActivityForResult启动界面并返回数据，上传头像

    在android应用的开发过程中,常常会出现启动一个界面后填写部分内容后带着数据返回启动前的界面,最典型的应用就是登录过程.在非常多应用程序的模块中,都有"我的"这个模块,在未登录 ...

随机推荐

  1. ToolStrip控件在窗体没有焦点的情况下,需要单击二次才能够激发事件的解决办法

    protected override void WndProc(ref Message m) { if (m.Msg == 0x210) { Control control = Control.Fro ...

  2. WAP端 touch事件触发顺序记录

    IOS7.0 safari 滚动滚动条的时候, 最后手指放开 (scroll 总是在 touchend后面,所以要用 setTimeout) touchstart touchmove(多个) touc ...

  3. Maven项目导入后打红色X

    在所有的配置都正确的情况,程序能正常运行跑起来,看一下problem下的红色错误 如果这两个错误不影响你的程序,或者已经配置或处理,直接右击删除这两个错就行了. 删除之后,就没有了吧,OK搞定

  4. windows server 无人值守安装

    使用 answer file:AutoUnattend.xml 来无人值守安装,到了选系统这步 还是要手动选择一个系统,这是为什么?怎么设置可以默认进入GUI的系统进行安装啊?

  5. 手动部署servlet

    1.编写servlet,在tomcat\webapps目录下新建文件Test,Test目录如下 Test | classes   web.xml | test01 | Servletfirst.jav ...

  6. 如何捕获access violation异常

    文章目录 access violation的由来 access violation的实例 Win32 exception SEH异常与C++标准异常 捕获方法 1.access violation的由 ...

  7. b/s结构的物业管理系统（一）-------登录篇

    最近计划做一个非框架的物业管理系统前端使用bootstrap js jquery 等希望各位指点一下共同学习 ---前端登录页面------ 这个页面的输入框组用的bootstrap的,我设置了几张背 ...

  8. 【NoSql】Redis

    [NoSql]Redis 一. 文档 1. 官网 2. Windows 安装包 3. C# Driver a. ServiceStack.Redis 最新版本是收费的 b. StackExchange ...

  9. maxiang conf

    /**设置你自己的CSS.例如:h1 {border-bottom: 1px solid #ccc;line-height:1.6;}body {background:#FDFFD0} **/   p ...

  10. MessageDigest消息摘要

    <1>MessageDigest基础 MessageDigest 类为应用程序提供信息摘要算法的功能,如 MD5 或 SHA 算法. MessageDigest 对象开始被初始化.该对象通 ...