本示例使用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. Buffer Cache

    Buffer Cache Buffer Cache是SGA区中专门用于存放从数据文件中读取的的数据块拷贝的区域.Oracle进程如果发现需要访问的数据块已经在buffer cache中,就直接读写内存 ...

  2. RabbitMQ的work queue(2)

    课堂上work queue没能很好的理解,看了大神的博客,顿觉醍醐灌顶,豁然开朗. work queue有两种模式: 平均分配:(默认)//channel.basicQos(1);即把 同一时刻服务器 ...

  3. Google V8编程详解（四）Context

    http://blog.csdn.net/feiyinzilgd/article/details/8266780 上一章,比较略提了下V8的Context.本章将详细的讲解下Context的概念以及用 ...

  4. VC++ 迭代器 iterator, const_iterator, const iterator

    迭代器 iterator, const_iterator, const iterator 迭代器iterator的作用类似于指针. (1)iterator只有针对制定<类型>的容器才有效. ...

  5. mssql2000 身份证号码验证

    CREATE VIEW thisDate --返回当前日期,因为自定义函数中不能使用GETDATE() AS ),) AS aDate )) /*mssql2000 返回值=0,身份证校验正确 1:位 ...

  6. Types of Learning

    从四个角度大致总结一下不同类型的机器学习问题. 1. 按照输出空间的变化: 分类问题(二分类.多分类).回归问题 2. 按照输出的标记变化: 监督学习 与 非监督学习 与 半监督学习(树的识别) 与 ...

  7. [转]保护眼睛的Windows和IE、Firefox、谷歌等浏览器颜色设置

    保护眼睛的Windows和IE.Firefox.谷歌等浏览器颜色设置  长时间在电脑前工作,窗口和网页上的白色十分刺眼,眼睛很容易疲劳,也容易引起头痛,其实我们可以通过设置Windows窗口和软件的颜 ...

  8. Basic Calculator

    本博客介绍leetcode上的一道不难,但是比较经典的算法题. 题目如下: Implement a basic calculator to evaluate a simple expression s ...

  9. 如何解救在异步Java代码中已检测的异常

    Java语言通过已检测异常语法所提供的静态异常检测功能非常实用,通过它程序开发人员可以用很便捷的方式表达复杂的程序流程. 实际上,如果某个函数预期将返回某种类型的数据,通过已检测异常,很容易就可以扩展 ...

  10. highlight.js 页面 代码高亮

    官网:https://highlightjs.org/ 功能: 支持 155 种编程语言的语法解析:拥有 73 种样式 自动检测编程语言 可以在 node.js 平台上运行 支持各种标签 与任何 js ...