本示例使用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. 9.openssl ca

    用于签名证书请求.生成CRL.维护一个记录已颁发证书和这些证书状态的数据库. 证书请求私用CA的私钥签名之后就是证书. [root@xuexi tmp]# man ca SYNOPSIS openss ...

  2. HTML5 的web储存: localStorage & sessionStorage

    早期的浏览器使用cookie储存,HTML5新增web储存,包括:localStorage 和 sessiongStorage; localStorage:可以永久储存: sessionStorage ...

  3. linux c学习笔记08--文件操作

    1 ． 创建int creat(const char *filename, mode_t mode);参数 mode 指定新建文件的存取权限,它同 umask 一起决定文件的最终权限( mode&am ...

  4. diary and html 文本颜色编辑,行距和其它编辑总汇

    p{line-height:1.2em;}/*段落行间距为2倍.*/ 几小块文字有白色的底色很突兀,显得难看.打开html,那儿有background color的设置,值是#FFFFFF. 对照ht ...

  5. ArcGIS Engine 刷新问题

    link: http://www.cnblogs.com/Jingkunliu/archive/2013/01/10/2854710.html PartialRefresh方法是部分刷新,效率方面比单 ...

  6. WinForm添加快捷键

    1.    WinForm下给窗体和按钮添加快捷键 设置Enter键要执行的动作:设置FORM的 AcceptButton属性为指定的button按钮. 设置ESC键要执行的动作:设置FORM的Cac ...

  7. Acadia Lab 6 轮盘游戏机

    WRTnode 肯定不是亲生的... 果断转投Acadia —.— 不是国军不给力,奈何共军有高达 为啥不转树莓派?因为选做实验肯定有很多人用树莓派做...我抢不过他们,只能挑点冷门的蹭分_(:з」 ...

  8. 使用Docker Image跑Gitlab

    下载gitlab docker镜像 docker pull gitlab/gitlab-ce:latest 启动gitlab服务 sudo docker run --detach \ --hostna ...

  9. Linux课程实践一：Linux基础实践（SSH）

    一.SSH服务 1. 安装SSH (1)查看是否已经安装过ssh服务 rpm -qa |grep ssh (2)进行安装 sudo apt-get install openssh-server Ubu ...

  10. Android Studio启动模拟器

    创建模拟器时出现vt x is disabled in bios 出现错误提示:"Intel HAXM is required to run this AVD,VT-x is disable ...