canvas实现图片裁剪功能
canvas实现图片裁剪功能
看看效果图吧
代码已经用构造函数和原生方式封闭好了。
附上主要方法：
过几天再给大家一份改进版的图片裁剪，（亮点：可以裁剪透明圆头像哦~~~）
//画出背景
Selection.prototype.drawScene = function () { // main drawScene function
this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
this.context.fillStyle = 'rgba(0, 0, 0, 0.5)';
this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
// 画出选区
this.draw();
}
//画出选区
Selection.prototype.draw = function () {
this.context.strokeStyle = '#fff';
this.context.lineWidth = 0.5;
this.context.strokeRect(this.x, this.y, this.w, this.h);
// 绘制选区图像
if (this.w > 0 && this.h > 0) {
this.context.drawImage(this.image, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// 画出四个角的调整方块
this.context.fillStyle = 'rgba(255, 255, 255, 1)';
this.context.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
this.context.fillRect(this.x + this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
this.context.fillRect(this.x + this.w - this.iCSize[2], this.y + this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2);
this.context.fillRect(this.x - this.iCSize[3], this.y + this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
this.drawLine();
}
//画出九宫格
Selection.prototype.drawLine = function () {
this.context.strokeStyle = "#fff";
this.context.strokeRect(this.x, this.y + parseFloat(this.h / 3), this.w, 0.05);
this.context.strokeRect(this.x, this.y + parseFloat(this.h / 3) * 2, this.w, 0.05);
this.context.strokeRect(this.x + parseFloat(this.w / 3), this.y, 0.05, this.h);
this.context.strokeRect(this.x + parseFloat(this.w / 3) * 2, this.y, 0.05, this.h);
}//鼠标移动事件
Selection.prototype.mousemove = function (e) {
var addd=this.GetAbsoluteLocationEx(this.canvas).absoluteTop;
var iMouseX = Math.floor(e.pageX - this.GetAbsoluteLocationEx(this.canvas).absoluteLeft);
var iMouseY = Math.floor(e.pageY - this.GetAbsoluteLocationEx(this.canvas).absoluteTop);
if (iMouseX == 0) {
this.x = 0;
}
// 拖整体的选择器
if (iMouseX - this.px >= 0 || iMouseY - this.y >= 0) {
this.canvas.style.cursor = "move";
if (this.bDragAll) {
this.context.clearRect(this.x, this.y, this.w, this.h);
this.x = iMouseX - this.px;
this.y = iMouseY - this.py;
// if (iMouseX == this.canvas.width) {
// this.x=
// }
if (this.x < 0) {
this.x = 0;
}
if (this.y < 0) {
this.y = 0;
}
if ((this.w + this.x) > this.canvas.width) {
this.x = this.x - (this.w + this.x - this.canvas.width);
}
if ((this.h + this.y) > this.canvas.height) {
this.y = this.y - (this.h + this.y - this.canvas.height);
}
}
}
for (i = 0; i < 4; i++) {
this.bHow[i] = false;
this.iCSize[i] = this.csize;
}
// 悬停在调整方块
if (iMouseX > this.x - this.csizeh && iMouseX < this.x + this.csizeh &&
iMouseY > this.y - this.csizeh && iMouseY < this.y + this.csizeh) {
this.bHow[0] = true;
this.iCSize[0] = this.csizeh;
this.canvas.style.cursor = "nw-resize";
}
//this.canvas.style.cursor = "default";
if (iMouseX > this.x + this.w - this.csizeh && iMouseX < this.x + this.w + this.csizeh &&
iMouseY > this.y - this.csizeh && iMouseY < this.y + this.csizeh) {
this.bHow[1] = true;
this.iCSize[1] = this.csizeh;
this.canvas.style.cursor = "ne-resize";
}
if (iMouseX > this.x + this.w - this.csizeh && iMouseX < this.x + this.w + this.csizeh &&
iMouseY > this.y + this.h - this.csizeh && iMouseY < this.y + this.h + this.csizeh) {
this.bHow[2] = true;
this.iCSize[2] = this.csizeh;
this.canvas.style.cursor = "se-resize";
}
if (iMouseX > this.x - this.csizeh && iMouseX < this.x + this.csizeh &&
iMouseY > this.y + this.h - this.csizeh && iMouseY < this.y + this.h + this.csizeh) {
this.bHow[3] = true;
this.iCSize[3] = this.csizeh;
this.canvas.style.cursor = "sw-resize";
}
// 如果拖动方块
var iFW, iFH;
var iFX, iFY;
if (this.bDrag[0]) {
iFX = iMouseX - this.px;
iFY = iMouseY - this.py;
iFW = this.w + this.x - iFX;
//iFH = this.h + this.y - iFY;
iFH=this.selectContral(iFW);
}
if (this.bDrag[1]) {
iFX = this.x;
iFY = iMouseY - this.py;
iFW = iMouseX - this.px - iFX;
//iFH = this.h + this.y - iFY;
iFH=this.selectContral(iFW);
}
if (this.bDrag[2]) {
iFX = this.x;
iFY = this.y;
iFW = iMouseX - this.px - iFX;
//iFH = iMouseY - this.py - iFY;
iFH=this.selectContral(iFW);
}
if (this.bDrag[3]) {
iFX = iMouseX - this.px;
iFY = this.y;
iFW = this.w + this.x - iFX;
//iFH = iMouseY - this.py - iFY;
iFH=this.selectContral(iFW);
}
if ((iFW + this.x) > this.canvas.width) {
var a = (iFW + this.x) > this.canvas.width;
}
//判断选区不能太小，大于四个角宽度
if (iFW > this.csizeh * 2 && iFH > this.csizeh * 2) {
this.w = iFW;
this.h = iFH;
this.x = iFX;
this.y = iFY;
}
this.drawScene();
}
//鼠标按下事件
Selection.prototype.mousedown = function (e) {
var iMouseX = Math.floor(e.pageX - this.GetAbsoluteLocationEx(this.canvas).absoluteLeft);
var iMouseY = Math.floor(e.pageY - this.GetAbsoluteLocationEx(this.canvas).absoluteTop);
this.px = iMouseX - this.x;
this.py = iMouseY - this.y;
if (this.bHow[0]) {
this.px = iMouseX - this.x;
this.py = iMouseY - this.y;
}
if (this.bHow[1]) {
this.px = iMouseX - this.x - this.w;
this.py = iMouseY - this.y;
}
if (this.bHow[2]) {
this.px = iMouseX - this.x - this.w;
this.py = iMouseY - this.y - this.h;
}
if (this.bHow[3]) {
this.px = iMouseX - this.x;
this.py = iMouseY - this.y - this.h;
}
if (iMouseX > this.x + this.csizeh && iMouseX < this.x + this.w - this.csizeh &&
iMouseY > this.y + this.csizeh && iMouseY < this.y + this.h - this.csizeh) {
this.bDragAll = true;
}
for (i = 0; i < 4; i++) {
if (this.bHow[i]) {
this.bDrag[i] = true;
}
}
}
//鼠标弹起事件
Selection.prototype.mouseup = function () {
this.bDragAll = false;
for (i = 0; i < 4; i++) {
this.bDrag[i] = false;
}
this.px = 0;
this.py = 0;
}
//得到裁剪选区
Selection.prototype.getresult = function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.canvas.style.Width = this.w;
this.canvas.style.Height = this.h;
this.canvas.width = this.w;
this.canvas.height = this.h;
this.context.drawImage(this.image, this.x, this.y, this.w, this.h, 0, 0, this.w, this.h);
var temp_ctx, temp_canvas;
temp_canvas = document.createElement('canvas');
temp_ctx = temp_canvas.getContext('2d');
temp_canvas.width = this.w;
temp_canvas.height = this.h;
temp_ctx.drawImage(this.image, this.x, this.y, this.w, this.h, 0, 0, this.w, this.h);
var vData = temp_canvas.toDataURL();
this.image.src = vData;
return vData;
}
//添加鼠标监听事件
Selection.prototype.addListerner = function () {
var temp = this;
this.canvas.onmousemove = function (e) {
temp.mousemove(e);
}
this.canvas.onmousedown = function (e) {
temp.mousedown(e);
}
this.canvas.onmouseup = function () {
temp.mouseup();
}
}
//注销鼠标事件
Selection.prototype.disposeEvent = function () {
this.canvas.onmousemove = null;
this.canvas.onmousedown = null;
this.canvas.onmouseup = null;
this.canvas.style.cursor = "default";
}过几天再给大家一份改进版的图片裁剪，（亮点：可以裁剪透明圆头像哦~~~）
源码下载地址：
http://download.csdn.net/detail/cruzysoft/6477461