本示例使用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. 使用SerialPort 读取外置GPS信息和使用GeoCoordinateWatcher获取内置gps的信息

    简介最近工作中需要读取gps设备的信息,平板本身有内置的gps设备,但是精度不够,就又添加了一个外置的gps.对于外置的gps,我们主要通过SerialPort类来获得串口的信息,然后对接收到的内容进 ...

  2. HBase预分区

    seq 0 7 | awk '{printf("\\x%02x\\x%02x\n", $1/256, $1%256);}' | sort -R |head -3 create 'm ...

  3. ActiveMQ学习笔记(5)——使用Spring JMS收发消息

      摘要 ActiveMQ学习笔记(四)http://my.oschina.net/xiaoxishan/blog/380446 中记录了如何使用原生的方式从ActiveMQ中收发消息.可以看出,每次 ...

  4. UVa 488 - Triangle Wave

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=94&page=s ...

  5. mysql - 缺失范围和连续范围

    初始化数据 # 创建表 DROP TABLE IF EXISTS g; CREATE TABLE g( a INT )ENGINE=INNODB; # 初始化数据 ; ; ; ; ; ; ; ; ; ...

  6. avi文件打开出现花屏、打开不了问题

    以avi为后缀名文件,其编码格式并不是单一的,而是多种格式都可以以avi作为后缀. AVI(Audio Video Interleaved的缩写)是一种RIFF(Resource Interchang ...

  7. $.grep(array, callback, [invert])过滤,常用

    $.grep(array, callback, [invert])过滤,常用 解释: 使用过滤函数过滤数组元素.此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得 ...

  8. error C4996: 'fopen': This function or variable may be unsafe.

    vs2013中错误提示信息: error C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s ...

  9. CMFCPropertyGridProperty SetValue 出错处理

    对CMFCPropertyGridProperty SetValue时容易报错,这种情况一般是Property和value的类型不匹配造成的. 在创建property的时候,指定了数据类型,如果set ...

  10. AndroidStudio安装教程(Windows环境下)

    AndroidStudio官网下载:http://android-studio.org/    可以更具自己喜欢的版本下载,个人推荐2.2版本以上,因为开发和运行效率快,高很多. Android St ...