canvas是一個可以讓我們使用腳本繪圖的標籤,它提供了一系列完整的屬性和方法。我們可以藉此來實現圖形繪製,圖像處理甚至實現簡單的動畫和遊戲製作。
canvas標籤只有兩個屬性:width和height,用來設定畫布的寬和高,如果沒有透過標籤屬性或腳本來設置,預設為300*150;
好了,canvas的介紹就先到這裡,下面我們來看看javascript結合canvas實作圖片的裁切程式碼:
var selectObj = null;
function ImageCrop(canvasId, imageSource, x, y, width, height) {
var canvas = $("#" canvasId);
if (canvas.length == 0 && imageSource) {
返回;
}
函數canvasMouseDown(e) {
停止選擇(e);
canvas.css("遊標", "預設");
}
函數canvasMouseMove(e) {
var canvasOffset = canvas.offset();
var pageX = e.pageX || event.targetTouches[0].pageX;
var pageY = e.pageY || event.targetTouches[0].pageY;
iMouseX = Math.floor(pageX - canvasOffset.left);
iMouseY = Math.floor(pageY - canvasOffset.top);
canvas.css("遊標", "預設");
if (selectObj.bDragAll) {
canvas.css("遊標", "移動");
canvas.data("拖曳", true);
var cx = iMouseX - selectObj.px;
CX = CX
mx = ctx.canvas.width - selectObj.w;
cx=cx> MX? mx : cx;
selectObj.x = cx;
var cy = iMouseY - selectObj.py;
cy=cy< 0 ? 0 : cy;
my = ctx.canvas.height - selectObj.h;
cy=cy>我的 ?我的:cy;
selectObj.y = cy;
}
for (var i = 0; i
selectObj.bHow[i] = false;
selectObj.iCSize[i] = selectObj.csize;
}
// 將滑鼠停留在調整大小的立方體上
if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX
iMouseY> selectObj.y - selectObj.csizeh && iMouseY
canvas.css("遊標", "指標");
selectObj.bHow[0] = true;
selectObj.iCSize[0] = selectObj.csizeh;
}
if (iMouseX > selectObj.x selectObj.w - selectObj.csizeh && iMouseX
iMouseY> selectObj.y - selectObj.csizeh && iMouseY
canvas.css("遊標", "指標");
selectObj.bHow[1] = true;
selectObj.iCSize[1] = selectObj.csizeh;
}
if (iMouseX > selectObj.x selectObj.w - selectObj.csizeh && iMouseX
iMouseY> selectObj.y selectObj.h - selectObj.csizeh && iMouseY selectObj.bHow[2] = true;
selectObj.iCSize[2] = selectObj.csizeh;
}
if (iMouseX > selectObj.x - selectObj.csizeh && iMouseX
iMouseY> selectObj.y selectObj.h - selectObj.csizeh && iMouseY
canvas.css("螢幕", "指標");
selectObj.bHow[3] = true;
selectObj.iCSize[3] = selectObj.csizeh;
}
if (iMouseX > selectObj.x && iMouseX selectObj.y && iMouseY
canvas.css("左上角", "移動");
}
//如果拖曳調整立方體大小
var iFW、iFH、iFX、iFY、mx、我的;
if (selectObj.bDrag[0]) {
iFX = iMouseX - selectObj.px;
iFY = iMouseY - selectObj.py;
iFW = selectObj.w selectObj.x - iFX;
iFH = selectObj.h selectObj.y - iFY;
canvas.data("拖曳", true);
}
if (selectObj.bDrag[1]) {
iFX = selectObj.x;
iFY = iMouseY - selectObj.py;
iFW = iMouseX - selectObj.px - iFX;
iFH = selectObj.h selectObj.y - iFY;
canvas.data("拖曳", true);
}
if (selectObj.bDrag[2]) {
iFX = selectObj.x;
iFY = selectObj.y;
iFW = iMouseX - selectObj.px - iFX;
iFH = iMouseY - selectObj.py - iFY;
canvas.data("拖曳", true);
}
if (selectObj.bDrag[3]) {
iFX = iMouseX - selectObj.px;
iFY = selectObj.y;
iFW = selectObj.w selectObj.x - iFX;
iFH = iMouseY - selectObj.py - iFY;
canvas.data("拖曳", true);
}
if (iFW > selectObj.csizeh * 2 && iFH > selectObj.csizeh * 2) {
selectObj.w = iFW;
selectObj.h = iFH;
selectObj.x = iFX;
selectObj.y = iFY;
}
相關場景();
}
函數canvasMouseOut() {
$(canvas).trigger("mouseup");
}
函數canvasMouseUp() {
selectObj.bDragAll = false;
for (var i = 0; i
selectObj.bDrag[i] = false;
}
canvas.css("遊標", "預設");
canvas.data("選擇", {
x: selectObj.x,
y: selectObj.y,
w: selectObj.w,
h: selectObj.h
});
selectObj.px = 0;
selectObj.py = 0;
}
函數選擇(x, y, w, h) {
這個.x = x; // 初始位置
this.y = y;
這個.w = w; // 和大小
this.h = h;
這個.px = x; // 用來拖曳計算的額外變數
this.py = y;
這個.csize = 4; // 調整立方體大小
this.csizeh = 6; // 調整立方體大小(懸停時)
this.bHow = [假,假,假,假]; // 懸停狀態
this.iCSize = [this.csize, this.csize, this.csize, this.csize]; // 調整立方體大小
this.bDrag = [假,假,假,假]; // 拖曳狀態
this.bDragAll = false; // 拖曳整個選擇
}
Selection.prototype.draw = function () {
ctx.StrongStyle = '#666';
ctx.lineWidth = 2;
ctx.lines(this.x, this.y, this.w, this.h);
// 繪製原始影像的一部份
if (this.w > 0 && this.h > 0) {
ctx.drawImage(映像, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// 繪製調整大小的立方體
ctx.fillStyle = '#999';
ctx.fillRect(this.x - this.iCSize[0], this.y - this.iCSize[0], this.iCSize[0] * 2, this.iCSize[0] * 2);
ctx.fillRect(this.x this.w - this.iCSize[1], this.y - this.iCSize[1], this.iCSize[1] * 2, this.iCSize[1] * 2);
ctx.fillRect(this.x this.w - this.iCSize[2], this.y this.h - this.iCSize[2], this.iCSize[2] * 2, this.iCSize[2] * 2) ;
ctx.fillRect(this.x - this.iCSize[3], this.y this.h - this.iCSize[3], this.iCSize[3] * 2, this.iCSize[3] * 2);
};
var drawScene = function () {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 清除畫布
// 繪製來源影像
ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
// 並使其變暗
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
// 繪製選區
selectObj.draw();
canvas.mousedown(canvasMouseDown);
canvas.on("touchstart", canvasMouseDown);
};
var createSelection = function (x, y, width, height) {
var content = $("#imagePreview");
x = x || Math.ceil((content.width() - 寬度) / 2);
y = y || Math.ceil((content.height() - 高度) / 2);
回新的選擇(x,y,寬度,高度);
};
var ctx = canvas[0].getContext("2d");
var iMouseX = 1;
var iMouseY = 1;
var image = new Image();
image.onload = function () {
selectObj = createSelection(x, y, 寬度, 高度);
canvas.data("選擇", {
x: selectObj.x,
y: selectObj.y,
w: selectObj.w,
h: selectObj.h
});
繪製場景();
};
image.src = imageSource;
canvas.mousemove(canvasMouseMove);
canvas.on("touchmove", canvasMouseMove);
var StopSelect = function (e) {
var canvasOffset = $(canvas).offset();
var pageX = e.pageX || event.targetTouches[0].pageX;
var pageY = e.pageY || event.targetTouches[0].pageY;
iMouseX = Math.floor(pageX - canvasOffset.left);
iMouseY = Math.floor(pageY - canvasOffset.top);
selectObj.px = iMouseX - selectObj.x;
selectObj.py = iMouseY - selectObj.y;
if (selectObj.bHow[0]) {
selectObj.px = iMouseX - selectObj.x;
selectObj.py = iMouseY - selectObj.y;
}
if (selectObj.bHow[1]) {
selectObj.px = iMouseX - selectObj.x - selectObj.w;
selectObj.py = iMouseY - selectObj.y;
}
if (selectObj.bHow[2]) {
selectObj.px = iMouseX - selectObj.x - selectObj.w;
selectObj.py = iMouseY - selectObj.y - selectObj.h;
}
if (selectObj.bHow[3]) {
selectObj.px = iMouseX - selectObj.x;
selectObj.py = iMouseY - selectObj.y - selectObj.h;
}
if (iMouseX > selectObj.x selectObj.csizeh &&
iMouseX
iMouseY> selectObj.y selectObj.csizeh &&
iMouseY
selectObj.bDragAll = true;
}
for (var i = 0; i
if (selectObj.bHow[i]) {
selectObj.bDrag[i] = true;
}
}
};
canvas.mouseout(canvasMouseOut);
canvas.mouseup(canvasMouseUp);
canvas.on("touchend", canvasMouseUp);
this.getImageData = function (previewID) {
var tmpCanvas = $("")[0];
var tmpCtx = tmpCanvas.getContext("2d");
if (tmpCanvas && selectObj) {
tmpCanvas.width = selectObj.w;
tmpCanvas.height = selectObj.h;
tmpCtx.drawImage(image, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
if (document.getElementById(previewID)) {
document.getElementById(previewID).src = tmpCanvas.toDataURL();
document.getElementById(previewID).style.border = "1px 實心#ccc";
}
return tmpCanvas.toDataURL();
}
};
}
函數 autoResizeImage(maxWidth, maxHeight, objImg) {
var img = new Image();
img.src = objImg.src;
var hRatio;
var wRatio;
無功分數 = 1;
var w = objImg.width;
var h = objImg.height;
wRatio = maxWidth / w;
hRatio = maxHeight / h;
if (w
返回;
}
if (maxWidth == 0 && maxHeight == 0) {
份數 = 1;
} else if (maxWidth == 0) {
if (hRatio
分別 = hRatio;
}
} else if (maxHeight == 0) {
if (wRatio
比例 = wRatio;
}
} else if (wRatio
其中 = (wRatio
}其他{
其中 = (wRatio
}
if (共有
if (比率
各個 = 1 - 各個;
}
w = w * 各;
h = h * 各;
}
objImg.height = h;
objImg.width = w;
}
朋友們拿去試試吧,希望大家能夠喜歡,有疑問就給我留言吧。