O Canvas é uma tag que nos permite desenhar usando scripts, que fornece um conjunto completo de propriedades e métodos. Podemos usar isso para realizar desenhos gráficos, processamento de imagens e até mesmo animação e produção de jogos.
A tag de tela possui apenas dois atributos: largura e altura, que são usados para definir a largura e a altura da tela. Se não estiver definido através do atributo ou script da tag, o padrão será 300*150;
Ok, vamos parar por aqui para a introdução de tela. Vamos dar uma olhada no código de corte de javascript combinando tela para implementar imagens:
A cópia do código é a seguinte:
var selectObj = null;
function imageCrop (Canvasid, Imagesource, x, y, largura, altura) {
var canvas = $ ("#" + Canvasid);
if (Canvas.Length == 0 && Imagesource) {
retornar;
}
função canvasmoudown (e) {
StopSelect (e);
canvas.css ("cursor", "padrão");
}
função canvasmouseMove (e) {
var Canvasoffset = canvas.offset ();
var páginax = 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 ("cursor", "padrão");
if (selectObj.bdragall) {
canvas.css ("cursor", "move");
canvas.data ("arrastar", verdadeiro);
var cx = imousex - selectObj.px;
cx = cx <0? 0: 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> meu? meu: cy;
selectObj.y = cy;
}
for (var i = 0; i <4; i ++) {
selectObj.bHow [i] = false;
selectObj.icsize [i] = selectObj.csize;
}
// pairando sobre os cubos redimensionados
if (imousex> selectObj.x - selectObj.csizeh && imousex <selectObj.x + selectObj.csizeh &&
imousey> selectObj.y - selectObj.csizeh && imousey <selectObj.y + selectObj.csizeh) {
canvas.css ("cursor", "ponteiro");
selectObj.bHow [0] = true;
selectObj.icsize [0] = selectObj.csizeh;
}
if (imousex> selectObj.x + selectObj.w - selectObj.csizeh && imousex <selectObj.x + selectObj.w + selectObj.csizeh &&
imousey> selectObj.y - selectObj.csizeh && imousey <selectObj.y + selectObj.csizeh) {
canvas.css ("cursor", "ponteiro");
selectObj.bHow [1] = true;
selectObj.icsize [1] = selectObj.csizeh;
}
if (imousex> selectObj.x + selectObj.w - selectObj.csizeh && imousex <selectObj.x + selectObj.w + selectObj.csizeh &&
imousey> selectObj.y + selectObj.h - selectObj.csizeh && imousey <selectObj.y + selectObj.h + selectObj.csizeh) {
canvas.css ("cursor", "ponteiro");
selectObj.bHow [2] = true;
selectObj.icsize [2] = selectObj.csizeh;
}
if (imousex> selectObj.x - selectObj.csizeh && imousex <selectObj.x + selectObj.csizeh &&
imousey> selectObj.y + selectObj.h - selectObj.csizeh && imousey <selectObj.y + selectObj.h + selectObj.csizeh) {
canvas.css ("cursor", "ponteiro");
selectObj.bHow [3] = true;
selectObj.icsize [3] = selectObj.csizeh;
}
if (imousex> selectObj.x && iMousex <selectObj.x + selectObj.w && iMousey> selectObj.y && iMousey <selectObj.y + selectObj.h) {
canvas.css ("cursor", "move");
}
// em caso de arrastar os cubos redimensionados
var ifw, ifh, ifx, ify, mx, meu;
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 ("arrastar", verdadeiro);
}
if (selectObj.bdrag [1]) {
ifx = selectObj.x;
ify = imousey - selectObj.py;
ifw = imousex - selectObj.px - ifx;
ifh = selectObj.h + selectObj.y - ify;
canvas.data ("arrastar", verdadeiro);
}
if (selectObj.bdrag [2]) {
ifx = selectObj.x;
ify = selectObj.y;
ifw = imousex - selectObj.px - ifx;
ifh = imousey - selectObj.py - ify;
canvas.data ("arrastar", verdadeiro);
}
if (selectObj.bdrag [3]) {
ifx = imousex - selectObj.px;
ify = selectObj.y;
ifw = selectObj.w + selectObj.x - ifx;
ifh = imousey - selectObj.py - ify;
canvas.data ("arrastar", verdadeiro);
}
if (ifw> selectObj.csizeh * 2 && ifh> selectObj.csizeh * 2) {
selectObj.w = ifw;
selectObj.h = ifh;
selectObj.x = ifx;
selectObj.y = ify;
}
drawscene ();
}
função canvasmouseout () {
$ (tela) .trigger ("mouseup");
}
function canvasmouseup () {
selectObj.bdragall = false;
for (var i = 0; i <4; i ++) {
selectObj.bdrag [i] = false;
}
canvas.css ("cursor", "padrão");
Canvas.data ("selecione", {
x: selectObj.x,
y: selectObj.y,
W: SelectObj.W,
H: SelectObj.h
});
selectObj.px = 0;
selectObj.py = 0;
}
Seleção de funções (x, y, w, h) {
this.x = x; // Posições iniciais
this.y = y;
this.w = w; // e tamanho
this.h = h;
this.px = x; // variáveis extras para arrastar cálculos
this.py = y;
this.cSize = 4; // redimensione o tamanho dos cubos
this.cSizeh = 6; // Redimensione o tamanho dos cubos (no passe)
this.bHow = [falso, falso, falso, falso]; // Statuses do mouse
this.icsize = [this.csize, this.csize, this.csize, this.csize]; // redimensione tamanhos de cubos
this.bdrag = [falso, falso, falso, falso]; // arrastar status
this.bdragall = false; // arrastar seleção inteira
}
Seleção.prototype.draw = function () {
ctx.strokestyle = '#666';
ctx.LineWidth = 2;
ctx.stragerect (this.x, this.y, this.w, this.h);
// desenha parte da imagem original
if (this.w> 0 && this.h> 0) {
ctx.drawimage (imagem, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// desenhar cubos redimensionados
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); // Clear Canvas
// desenhar a imagem de origem
ctx.drawimage (imagem, 0, 0, ctx.canvas.width, ctx.canvas.height);
// e torne -o mais escuro
ctx.fillstyle = 'rgba (0, 0, 0, 0,5)';
ctx.FillRect (0, 0, ctx.Canvas.Width, ctx.Canvas.Height);
// seleção de desenho
selectObj.Draw ();
Canvas.MouseDown (CanvasasouDown);
Canvas.on ("Touchstart", CanvasasouDown);
};
var createSelection = function (x, y, largura, altura) {
var content = $ ("#imagePreview");
x = x || Math.CEIL ((content.width () - largura) / 2);
y = y || Math.CEIL ((content.Height () - altura) / 2);
retornar nova seleção (x, y, largura, altura);
};
var ctx = tela [0] .getContext ("2d");
var iMousex = 1;
var iMousey = 1;
Var Image = new Image ();
image.onload = function () {
selectObj = CreateSelection (x, y, largura, altura);
Canvas.data ("selecione", {
x: selectObj.x,
y: selectObj.y,
W: SelectObj.W,
H: SelectObj.h
});
drawscene ();
};
image.src = imagsource;
Canvas.MousEmove (CanvaMousEmove);
Canvas.on ("Touchmove", CanvasasouseMove);
var stopSelect = function (e) {
var Canvasoffset = $ (Canvas) .offset ();
var páginax = 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 <selectObj.x + selectObj.w - selectObj.csizeh &&
imousey> selectObj.y + selectObj.csizeh &&
imousey <selectObj.y + selectObj.h - selectObj.csizeh) {
selectObj.bdragall = true;
}
for (var i = 0; i <4; i ++) {
if (selectObj.bhow [i]) {
selectObj.bdrag [i] = true;
}
}
};
canvas.mouseout (CanvaMasouseOut);
canvas.mouseup (Canvasasouseup);
Canvas.on ("Toukend", Canvasasouseup);
this.getImagedata = function (visualize) {
var tmpCcanvas = $ ("<VAS> </canvas>") [0];
var tmpctx = tmpcanvas.getContext ("2D");
if (tmpcanvas && selectObj) {
tmpcanvas.width = selectObj.w;
tmpcanvas.Height = SelectObj.h;
tmpctx.drawimage (imagem, selectObj.x, selectObj.y, selectObj.w, selectObj.h, 0, 0, selectObj.w, selectObj.h);
if (document.getElementById (visualize)) {
document.getElementById (visualize) .src = tmpcanvas.todataurl ();
document.getElementById (visualize) .style.border = "1px sólido #ccc";
}
retornar tmpcanvas.todataurl ();
}
};
}
Função AutoresizeImage (MaxWidth, MaxHeight, Objimg) {
var iMg = new Image ();
img.src = objimg.src;
var hratio;
var wratio;
Proporção var = 1;
var w = objimg.width;
var H = objimg.Height;
wratio = maxwidth / w;
hratio = maxHeight / h;
if (w <maxwidth && h <maxHeight) {
retornar;
}
if (maxwidth == 0 && maxHeight == 0) {
razão = 1;
} else if (maxwidth == 0) {
if (hratio <1) {
razão = hratio;
}
} else if (maxHeight == 0) {
if (wratio <1) {
razão = wratio;
}
} else if (wratio <1 || hratio <1) {
razão = (wratio <= hratio? wratio: hratio);
} outro {
razão = (wratio <= hratio? wratio: hratio) - math.floor (wratio <= hratio? wratio: hratio);
}
if (proporção <1) {
if (razão <0,5 && w <maxwidth && h <maxHeight) {
razão = 1 - razão;
}
W = W * proporção;
H = H *.
}
objimg.Height = h;
objimg.width = w;
}
Amigos, por favor, tente. Espero que gostem. Se você tiver alguma dúvida, deixe -me uma mensagem.