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({   

        &＃39;-webkit-transform&＃39; : &＃39;translate3d(&＃39; + x + &＃39;px, &＃39; + y + &＃39;px, 0)&＃39;,   

        &＃39;transform&＃39; : &＃39;translate3d(&＃39; + x + &＃39;px, &＃39; + y + &＃39;px, 0)&＃39;  

    });   

}   

$("#save").on("click",function(){   

    var url = imageData($img);   

    console.log(url);   

    $("#imgShow").html("");;   

});   

//裁剪图片   

function imageData($img) {   

        var canvas = document.createElement(&＃39;canvas&＃39;);   

        var ctx = canvas.getContext(&＃39;2d&＃39;);   

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