這篇文章將為大家詳細(xì)講解有關(guān)HTML5中canvas如何實現(xiàn)移動端上傳頭像拖拽裁剪效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

永安網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

html部分：

      

保存  

下面為剪切的圖片:

JavaScript部分：

JavaScript Code復(fù)制內(nèi)容到剪貼板

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;     

});     

//確定目標(biāo)圖片的樣式   

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

    }   

關(guān)于“HTML5中canvas如何實現(xiàn)移動端上傳頭像拖拽裁剪效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。