热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

HTML5中canvas如何实现移动端上传头像拖拽裁剪效果

这篇文章将为大家详细讲解有关HTML5中canvas如何实现移动端上传头像拖拽裁剪效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这

这篇文章将为大家详细讲解有关HTML5中canvas如何实现移动端上传头像拖拽裁剪效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

html部分:

  

  

  

      

      

      

      

  

  

  

      

  

  

  

下面为剪切的图片:

  

  

  

  

Javascript部分:

Javascript Code复制内容到剪贴板

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("");;   

});   

//裁剪图片   

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中canvas如何实现移动端上传头像拖拽裁剪效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


推荐阅读
author-avatar
1031372720_eba8d5
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有