HTML5中canvas實(shí)現(xiàn)移動端上傳頭像拖拽裁剪效果的方法

發(fā)布時(shí)間：2021-05-12 14:08:30 來源：億速云閱讀：238 作者：小新欄目：web開發(fā)

這篇文章主要介紹HTML5中canvas實(shí)現(xiàn)移動端上傳頭像拖拽裁剪效果的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

本示例使用HTML5 canvas，簡單的編寫了上傳頭像的裁剪效果，移動端支持拖拽后裁剪，雖然樣式不好看，但是功能還算全：

下圖為裁剪后的效果：

html部分：

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

<!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部分：

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("<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中canvas實(shí)現(xiàn)移動端上傳頭像拖拽裁剪效果的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

HTML5中canvas實(shí)現(xiàn)移動端上傳頭像拖拽裁剪效果的方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽