1.有时候用户上传图片的时候很大 我们只需要一部分 全部上传让服务器处理的话很麻烦
1.1上效果图吧
2.上代码
2.1 htm部分
2.2 js部分（代码太多截屏实在麻烦 复制下面的代码就行了 然后让ide整理格式就行了）
'use strict';
var postFile = {
df: false,
init: function(options) {
var t = this;
t.regional = document.getElementById('label');
t.getImage = document.getElementById('get_image');
t.clipPic = document.getElementById('edit_pic');
t.coverBox = document.getElementById('cover_box');
t.achieve = document.getElementById('show_edit');
t.clipPos = options.clipPos;
t.bgPagePos = {
x: 0,
y: 0,
height: 0,
width: 0
};
document.getElementById('post_file').addEventListener("change", t.handleFiles, false);
document.getElementById('save_button').onclick = function() {
t.clipPic.height = t.clipPos.height;
t.clipPic.width = t.clipPos.width;
var ctx = t.clipPic.getContext('2d');
var images = new Image();
images.src = t.imgUrl;
images.onload = function() {
ctx.drawImage(images, t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width, 0, 0, t.clipPos.height, t.clipPos.width);
document.getElementById('show_pic').getElementsByTagName('img')[0].src = t.clipPic.toDataURL()
}
};
t.drag()
},
handleFiles: function() {
var fileList = this.files[0];
var oFReader = new FileReader();
oFReader.readAsDataURL(fileList);
oFReader.onload = function(oFREvent) {
postFile.paintImage(oFREvent.target.result)
}
},
paintImage: function(url) {
var t = this;
var createCanvas = t.getImage.getContext("2d");
var img = new Image();
img.src = url;
img.onload = function() {
t.regional.style.position = 'absolute';
if(img.width < t.regional.offsetWidth && img.height < t.regional.offsetHeight) {
t.bgPagePos.width = img.width;
t.bgPagePos.height = img.height
} else {
var pWidth = img.width / (img.height / t.regional.offsetHeight);
var pHeight = img.height / (img.width / t.regional.offsetWidth);
t.bgPagePos.width = img.width > img.height ? t.regional.offsetWidth : pWidth;
t.bgPagePos.height = img.height > img.width ? t.regional.offsetHeight : pHeight
}
t.bgPagePos.x = (t.regional.offsetWidth - t.bgPagePos.width) / 2 + 'px';
t.bgPagePos.y = (t.regional.offsetHeight - t.bgPagePos.height) / 2 + 'px';
t.getImage.height = t.bgPagePos.height;
t.getImage.width = t.bgPagePos.width;
t.getImage.style.left = t.bgPagePos.x;
t.getImage.style.top = t.bgPagePos.y;
createCanvas.drawImage(img, 0, 0, t.bgPagePos.width, t.bgPagePos.height);
t.imgUrl = t.getImage.toDataURL();
t.clipImg()
}
},
clipImg: function() {
var t = this;
t.coverBox.height = t.bgPagePos.height;
t.coverBox.width = t.bgPagePos.width;
t.coverBox.style.display = 'block';
t.coverBox.style.left = 0 + 'px';
t.coverBox.style.top = 0 + 'px';
t.coverBox.style.position = 'absolute';
var cover = t.coverBox.getContext("2d");
cover.fillStyle = "rgba(0, 0, 0, 0.5)";
cover.fillRect(0, 0, t.bgPagePos.width, t.bgPagePos.height);
cover.clearRect(t.clipPos.x, t.clipPos.y, t.clipPos.height, t.clipPos.width);
t.achieve.style.background = 'url(' + t.imgUrl + ')' + -t.clipPos.x + 'px ' + -t.clipPos.y + 'px no-repeat';
t.achieve.style.height = t.clipPos.height + 'px';
t.achieve.style.width = t.clipPos.width + 'px'
},
drag: function() {
var t = this;
var draging = false;
var _startPos = null;
var start = null,
dis = null;
t.coverBox.addEventListener('touchstart', function(e) {
if(e.touches[1]) {
t.df = true;
start = e.touches;
dis = t.getDistance(start[0], start[1])
} else {
t.df = false;
var tou = e.touches[0];
if(e.pageX == null && tou.clientX != null) {
var doc = document.documentElement,
body = document.body;
e.pageX = tou.clientX + (doc.scrollLeft || body.scrollLeft || 0) - (doc.clientLeft || body.clientLeft || 0);
e.pageY = tou.clientY + (doc.scrollTop || body.scrollTop)
}
draging = true;
t.ex = t.clipPos.x;
t.ey = t.clipPos.y;
_startPos = {
left: e.pageX - (t.regional.offsetLeft + this.offsetLeft),
top: e.pageY - (t.regional.offsetTop + this.offsetTop)
}
}
});
t.coverBox.addEventListener('touchmove', function(e) {
e.preventDefault();
if(t.df) {
var now = e.touches;
var scale = t.getDistance(now[0], now[1]) / dis;
var tie = parseFloat(scale.toPrecision(2));
if(t.clipPos.height * tie <= 250 && t.clipPos.height * tie >= 50) {
t.clipPos.height = t.clipPos.height * scale;
t.clipPos.width = t.clipPos.width * scale;
t.clipImg();
document.getElementById("msg1").innerHTML = JSON.stringify(tie);
}
t.coverBox.ontouchend = function() {
draging = false;
this.ontouchmove = null;
this.ontouchend = null
}
} else {
var tou = e.touches[0];
if(e.pageX == null && tou.clientX != null) {
var doc = document.documentElement,
body = document.body;
e.pageX = tou.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
e.pageY = tou.clientY + (doc && doc.scrollTop || body && body.scrollTop)
}
var _mousePos = {
left: e.pageX - (t.regional.offsetLeft + this.offsetLeft),
top: e.pageY - (t.regional.offsetTop + this.offsetTop)
};
if(_mousePos.left > t.clipPos.x && _mousePos.left < t.clipPos.x + t.clipPos.width && _mousePos.top > t.clipPos.y && _mousePos.top < t.clipPos.y + t.clipPos.height) {
if(draging) {
if(t.ex + (_mousePos.left - _startPos.left) < 0) {
t.clipPos.x = 0
} else if(t.ex + (_mousePos.left - _startPos.left) + t.clipPos.width > t.bgPagePos.width) {
t.clipPos.x = t.bgPagePos.width - t.clipPos.width
} else {
t.clipPos.x = t.ex + (_mousePos.left - _startPos.left)
};
if(t.ey + (_mousePos.top - _startPos.top) < 0) {
t.clipPos.y = 0
} else if(t.ey + (_mousePos.top - _startPos.top) + t.clipPos.height > t.bgPagePos.height) {
t.clipPos.y = t.bgPagePos.height - t.clipPos.height
} else {
t.clipPos.y = t.ey + (_mousePos.top - _startPos.top)
}
t.clipImg()
}
}
}
}, false);
t.coverBox.addEventListener('touchend', function() {
draging = false;
this.removeEventListener('touchmove', null);
this.removeEventListener('touchend', null)
})
},
getDistance: function(p1, p2) {
var x = p2.pageX - p1.pageX,
y = p2.pageY - p1.pageY;
return Math.sqrt((x * x) + (y * y))
}
};