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

相关推荐: CSS新属性如何实现特殊的图片显示效果

这篇文章主要介绍了CSS新属性如何实现特殊的图片显示效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。使用一个或多个图像相关的CSS属性（background-blend-mode, mix-b…