html5-canvas
Imágenes

Recorte de imágenes utilizando lienzo.

Este ejemplo muestra una función de recorte de imagen simple que toma una imagen y recorta las coordenadas y devuelve la imagen recortada.

function cropImage(image, croppingCoords) {
    var cc = croppingCoords;
    var workCan = document.createElement("canvas"); // create a canvas
    workCan.width = Math.floor(cc.width);  // set the canvas resolution to the cropped image size
    workCan.height = Math.floor(cc.height);
    var ctx = workCan.getContext("2d");    // get a 2D rendering interface
    ctx.drawImage(image, -Math.floor(cc.x), -Math.floor(cc.y)); // draw the image offset to place it correctly on the cropped region
    image.src = workCan.toDataURL();       // set the image source to the canvas as a data URL
    return image;
}

Usar

var image = new Image();
image.src = "image URL"; // load the image
image.onload = function () {  // when loaded
    cropImage(
        this, {
        x : this.width / 4,     // crop keeping the center
        y : this.height / 4,
        width : this.width / 2,
        height : this.height / 2,
    });
    document.body.appendChild(this);  // Add the image to the DOM
};

El lienzo retenido

Al agregar contenido de fuentes fuera de su dominio o del sistema de archivos local, el lienzo está marcado como contaminado. Intentar acceder a los datos de píxeles o convertirlos a un dataURL producirá un error de seguridad.

vr image = new Image();
image.src = "file://myLocalImage.png";
image.onload = function(){
    ctx.drawImage(this,0,0);
    ctx.getImageData(0,0,canvas.width,canvas.height);  // throws a security error
}

Este ejemplo es solo un esbozo para atraer a alguien con una comprensión detallada detallada.

¿"Context.drawImage" no muestra la imagen en el lienzo?

Asegúrese de que su objeto de imagen esté completamente cargado antes de intentar dibujarlo en el lienzo con context.drawImage . De lo contrario, la imagen no se mostrará en silencio.

En JavaScript, las imágenes no se cargan de inmediato. En su lugar, las imágenes se cargan de forma asíncrona y durante el tiempo que demoran en cargar JavaScript continúa ejecutando cualquier código que siga a image.src . Esto significa que context.drawImage puede ejecutarse con una imagen vacía y, por lo tanto, no mostrará nada.

Ejemplo de asegurarse de que la imagen esté completamente cargada antes de intentar dibujarla con .drawImage

var img=new Image();
img.onload=start;
img.onerror=function(){alert(img.src+' failed');} 
img.src="someImage.png";
function start(){
    // start() is called AFTER the image is fully loaded regardless 
    //     of start's position in the code
}

Ejemplo cargando múltiples imágenes antes de intentar dibujar con alguna de ellas.

Hay más cargadores de imágenes con todas las funciones, pero este ejemplo ilustra cómo hacerlo.

// first image
var img1=new Image();
img1.onload=start;
img1.onerror=function(){alert(img1.src+' failed to load.');};
img1.src="imageOne.png";
// second image
var img2=new Image();
img2.onload=start;
img1.onerror=function(){alert(img2.src+' failed to load.');};
img2.src="imageTwo.png";
//
var imgCount=2;
// start is called every time an image loads
function start(){
    // countdown until all images are loaded
    if(--imgCount>0){return;}
    // All the images are now successfully loaded
    // context.drawImage will successfully draw each one
    context.drawImage(img1,0,0);
    context.drawImage(img2,50,0);
}

Escala de imagen para ajustar o rellenar.

Escalado para adaptarse

Significa que toda la imagen será visible, pero puede haber algún espacio vacío en los lados o en la parte superior e inferior si la imagen no tiene el mismo aspecto que el lienzo. El ejemplo muestra la imagen a escala para ajustarse. El azul en los lados se debe al hecho de que la imagen no es el mismo aspecto que el lienzo.

Escalado para llenar

Significa que la imagen se escala para que la imagen cubra todos los píxeles del lienzo. Si el aspecto de la imagen no es el mismo que el lienzo, entonces se recortarán algunas partes de la imagen. El ejemplo muestra la imagen a escala para rellenar. Observe cómo la parte superior e inferior de la imagen ya no son visibles.

Escala de ejemplo para ajustar

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFit(this);
}

function scaleToFit(img){
    // get the scale
    var scale = Math.min(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

Escala de ejemplo para llenar

var image = new Image();
image.src = "imgURL";
image.onload = function(){
    scaleToFill(this);
}

function scaleToFill(img){
    // get the scale
    var scale = Math.max(canvas.width / img.width, canvas.height / img.height);
    // get the top left position of the image
    var x = (canvas.width / 2) - (img.width / 2) * scale;
    var y = (canvas.height / 2) - (img.height / 2) * scale;
    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
}

La única diferencia entre las dos funciones es obtener la escala. El ajuste usa la escala de ajuste mínima, mientras que el relleno utiliza la escala de ajuste máximo.