本示例使用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. prolog 阶段总结

    http://blog.csdn.net/mwsong/article/details/1766382   到现在为止,我们已经对Prolog有了一个基本的了解,现在有必要对我们所学过的知识做一个系统 ...

  2. Handlebars模板库浅析

    Handlebars模板库简单介绍 Handlebars是JavaScript一个语义模板库,通过对view(模板)和data(ajax请求的数据,一般是json)的分离来快速构建Web模板.它采用& ...

  3. Office 365系列六 ------ 创建sharepoint online网站

    这节跟大家介绍简单的创建sharep online私有网站集,sharepoint online 可以给我们提供开箱即用的功能,比如文档库:可以给我们取代File Server,提供了版本管理,版本变 ...

  4. Begin ：SWIFT 基本语法

    国内介绍IOS书籍大多是很陈旧的代码, 2014年Apple发布了Swift语言, 毫无疑问Swift是一个强大的语言, 但是纵观国内的IOS现状,大家大多已经习惯了了OC, OC能解决的问题谁会想到 ...

  5. show status和show variables区别解析

    1.show status    查看系统运行的实时状态,便于dba查看mysql当前运行的状态,做出相应优化,动态的,不可认为修改,只能系统自动update. MariaDB [(none)]> ...

  6. 关于oracle数据库的导出导出

    Oracle数据导入导出常用两种方式: 1.是通过plsql-->tool-->export/import进行bmp文件的导入与导出: 2.使用命令imp/exp执行oracle数据导入与 ...

  7. 循序渐进Python3（十）-- 2 -- SqlAlchemy

    ORM             对象关系映射(英语:Object Relation Mapping,简称ORM,或O/RM,或O/R mapping),是一种程序技术,用于实现面向对象编程语言里不同类 ...

  8. 转载：Solr的自动完成实现方式（第三部分：Suggester方式续）

    转自:http://www.cnblogs.com/ibook360/archive/2011/11/30/2269126.html 在之前的两个部分(part1.part2)中,我们学会了如何配置和 ...

  9. Java abstract class 和 interface 的区别

    Java abstract class 和 interface 的区别 1. abstract class和interface是Java语言中对于抽象类定义进行支持的两种机制 2. 以Door的抽象概 ...

  10. css：去掉手机浏览器上点击时的边框和阴影

    outline:none;(去掉蓝框) -webkit-tap-highlight-color:rgba(0,0,0,0) ;(去掉阴影)适用于ios,Android