溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹HTML5中canvas實現移動端上傳頭像拖拽裁剪效果的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
本示例使用HTML5 canvas，簡單的編寫了上傳頭像的裁剪效果，移動端支持拖拽后裁剪， 雖然樣式不好看，但是功能還算全：
下圖為裁剪后的效果：
html部分：
XML/HTML Code復制內容到剪貼板
<!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復制內容到剪貼板
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中canvas實現移動端上傳頭像拖拽裁剪效果的方法”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
