Canvas es una etiqueta que nos permite dibujar usando scripts, que proporciona un conjunto completo de propiedades y métodos. Podemos usar esto para realizar el dibujo gráfico, el procesamiento de imágenes e incluso la animación simple y la producción de juegos.
La etiqueta de lienzo tiene solo dos atributos: ancho y altura, que se utilizan para establecer el ancho y la altura del lienzo. Si no se establece a través del atributo o script de etiqueta, el valor predeterminado es 300*150;
Bien, detengamos aquí para la introducción del lienzo. Echemos un vistazo al código de cultivo de JavaScript combinando lienzo para implementar imágenes:
La copia del código es la siguiente:
var selectobj = null;
function imageCrop (Canvasid, Imageurce, x, y, ancho, altura) {
var lienvas = $ ("#" + CanvasID);
if (canvas.length == 0 && imagesource) {
devolver;
}
función CanVasmoDown (e) {
StopSelect (e);
canvas.css ("cursor", "predeterminado");
}
función 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 ("cursor", "predeterminado");
if (selectObj.bdragall) {
canvas.css ("cursor", "mover");
canvas.data ("arrastre", verdadero);
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> my? mi: cy;
selectObj.y = cy;
}
para (var i = 0; i <4; i ++) {
selectobj.bhow [i] = false;
selectObj.icsize [i] = selectObj.csize;
}
// flotar sobre el tamaño de los cubos
if (iMousEx> selectObj.x - selectObj.csizeh && iMouseX <selectObj.x + selectObj.csizeh &&
iMousey> selectObj.y - selectObj.csizeh && imousey <selectObj.y + selectObj.csizeh) {
canvas.css ("cursor", "puntero");
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", "puntero");
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", "puntero");
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", "puntero");
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", "mover");
}
// en caso de arrastrar cubos de cambio de tamaño
var ifw, ifh, ifx, ify, mx, my;
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 ("arrastre", verdadero);
}
if (selectObj.bdrag [1]) {
ifx = selectObj.x;
ify = imousey - selectObj.py;
ifw = imousex - selectObj.px - ifx;
ifh = selectObj.h + selectObj.y - ify;
canvas.data ("arrastre", verdadero);
}
if (selectobj.bdrag [2]) {
ifx = selectObj.x;
ify = selectObj.y;
ifw = imousex - selectObj.px - ifx;
ifh = imousey - selectObj.py - ify;
canvas.data ("arrastre", verdadero);
}
if (selectobj.bdrag [3]) {
ifx = imousex - selectObj.px;
ify = selectObj.y;
ifw = selectobj.w + selectObj.x - ifx;
ifh = imousey - selectObj.py - ify;
canvas.data ("arrastre", verdadero);
}
if (ifw> selectobj.csizeh * 2 && ifh> selectObj.csizeh * 2) {
selectobj.w = ifw;
selectobj.h = ifh;
selectObj.x = ifx;
selectObj.y = ify;
}
drawScene ();
}
function CanVasMouseOut () {
$ (lienzo) .grager ("mouseup");
}
función CanVasMouseUp () {
selectObj.bdragall = false;
para (var i = 0; i <4; i ++) {
selectobj.bdrag [i] = false;
}
canvas.css ("cursor", "predeterminado");
Canvas.data ("Seleccionar", {
x: selectobj.x,
Y: selectObj.y,
W: selectobj.w,
H: selectobj.h
});
selectobj.px = 0;
selectobj.py = 0;
}
selección de funciones (x, y, w, h) {
this.x = x; // Posiciones iniciales
this.y = y;
this.w = w; // y tamaño
this.h = h;
this.px = x; // variables adicionales para arrastrar los cálculos
this.py = y;
this.csize = 4; // Tamaño de los cubos de tamaño
this.csizeh = 6; // Tamaño de los cubos de tamaño (en el flotador)
this.bhow = [falso, falso, falso, falso]; // estados de ciervo
this.icsize = [this.csize, this.csize, this.csize, this.csize]; // tamaños de casco de tamaño
this.bdrag = [falso, falso, falso, falso]; // arrastrar los estados
this.bdragall = false; // arrastre toda la selección
}
Selection.prototype.draw = function () {
ctx.strokestyle = '#666';
ctx.linewidth = 2;
ctx.Strokerect (this.x, this.y, this.w, this.h);
// dibujar parte de la imagen original
if (this.w> 0 && this.h> 0) {
ctx.drawimage (imagen, this.x, this.y, this.w, this.h, this.x, this.y, this.w, this.h);
}
// Dibuje los cubos de cambio de tamaño
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); // lienzo claro
// dibujar imagen de origen
ctx.DrawImage (imagen, 0, 0, ctx.canvas.width, ctx.canvas.height);
// y hacerlo más oscuro
ctx.fillstyle = 'rgba (0, 0, 0, 0.5)';
ctx.fillrect (0, 0, ctx.canvas.width, ctx.canvas.height);
// Selección de dibujo
selectobj.draw ();
lienzo. MOUSEDOWN (CONVASMOUDOWN);
Canvas.on ("TouchStart", Canvasmousedown);
};
var createSelection = function (x, y, ancho, altura) {
var content = $ ("#imagePreview");
x = x || Math.ceil ((content.width () - ancho) / 2);
y = y || Math.ceil ((content.height () - altura) / 2);
devolver nueva selección (x, y, ancho, altura);
};
var ctx = Canvas [0] .getContext ("2d");
var imousex = 1;
var imousey = 1;
var imagen = nueva imagen ();
image.onload = function () {
selectObj = CreateSelection (x, y, ancho, altura);
Canvas.data ("Seleccionar", {
x: selectobj.x,
Y: selectObj.y,
W: selectobj.w,
H: selectobj.h
});
drawScene ();
};
Image.src = Imageurce;
Canvas.mousemove (CanvasmouseMove);
Canvas.on ("Touchmove", CanvasmouseMove);
var stopSelect = function (e) {
var canvasoffset = $ (lienzo) .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 <selectObj.x + selectObj.w - selectObj.csizeh &&
imousey> selectObj.y + selectObj.csizeh &&
imousey <selectObj.y + selectObj.h - selectObj.csizeh) {
selectObj.bdragall = true;
}
para (var i = 0; i <4; 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 = $ ("<Vasvas> </ Canvas>") [0];
var tmpctx = tmpcanvas.getContext ("2d");
if (tmpcanvas && selectobj) {
tmpcanvas.width = selectObj.w;
tmpcanvas.height = selectObj.h;
tmpctx.drawimage (imagen, 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 Solid #ccc";
}
return tmpcanvas.todataurl ();
}
};
}
función AutoresizeImage (MaxWidth, MaxHeight, Objimg) {
var img = nueva imagen ();
img.src = objimg.src;
var hratio;
var wratio;
relación var = 1;
var w = objimg.width;
var h = objimg.Height;
wratio = maxwidth / w;
hratio = maxheight / h;
if (w <maxwidth && h <maxHeight) {
devolver;
}
if (maxwidth == 0 && maxheight == 0) {
relación = 1;
} else if (maxwidth == 0) {
if (hratio <1) {
relación = hratio;
}
} else if (maxHeight == 0) {
if (wratio <1) {
relación = wratio;
}
} else if (wratio <1 || hratio <1) {
ratio = (wratio <= hratio? wratio: hratio);
} demás {
ratio = (wratio <= hratio? wratio: hratio) - math.floor (wratio <= hratio? wratio: hratio);
}
if (relación <1) {
if (ratio <0.5 && w <maxwidth && h <maxHeight) {
relación = 1 - relación;
}
W = W * Ratio;
h = h * relación;
}
objimg.Height = h;
objimg.width = w;
}
Amigos, por favor pruébelo. Espero que te guste. Si tiene alguna pregunta, déjame un mensaje.