html5-canvas
immagini

Ritaglio di immagini con canvas

Questo esempio mostra una semplice funzione di ritaglio di immagini che prende un'immagine e ritaglia le coordinate e restituisce l'immagine ritagliata.

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;
}

Usare

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
};

La tela Tained

Quando aggiungi contenuti da fonti esterne al tuo dominio o dal file system locale, il canvas viene contrassegnato come contaminato. Tentare di accedere ai dati dei pixel o convertirli in un dataURL genererà un errore di sicurezza.

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
}

Questo esempio è solo uno stub per attirare qualcuno con una comprensione dettagliata elaborata.

"Context.drawImage" non visualizza l'immagine sulla tela?

Assicurati che il tuo oggetto immagine sia completamente caricato prima di provare a disegnarlo sulla tela con context.drawImage . In caso contrario, l'immagine non verrà visualizzata automaticamente.

In JavaScript, le immagini non vengono caricate immediatamente. Invece, le immagini vengono caricate in modo asincrono e durante il tempo necessario per caricare JavaScript continua ad eseguire qualsiasi codice che segue image.src . Ciò significa che context.drawImage può essere eseguito con un'immagine vuota e pertanto non visualizzerà nulla.

Esempio assicurandosi che l'immagine sia completamente caricata prima di provare a disegnarla 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
}

Esempio di caricamento di più immagini prima di tentare di disegnare con una di esse

Esistono più caricatori di immagini con funzioni complete, ma questo esempio illustra come farlo

// 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);
}

Ridimensionamento dell'immagine per adattarsi o riempire.

Ridimensionamento per adattarsi

Significa che l'intera immagine sarà visibile ma potrebbe esserci dello spazio vuoto sui lati o superiore e inferiore se l'immagine non ha lo stesso aspetto della tela. L'esempio mostra l'immagine ridimensionata per adattarsi. Il blu sui lati è dovuto al fatto che l'immagine non ha lo stesso aspetto della tela.

Ridimensionamento per riempire

Significa che l'immagine viene ridimensionata in modo che tutti i pixel del canvas vengano coperti dall'immagine. Se l'aspetto dell'immagine non è lo stesso dell'area di disegno, alcune parti dell'immagine verranno ritagliate. L'esempio mostra l'immagine ridimensionata per riempire. Nota come la parte superiore e inferiore dell'immagine non sono più visibili.

Esempio Scala per adattarsi

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);
}

Esempio di scala da riempire

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);
}

L'unica differenza tra le due funzioni è la scala. L'adattamento utilizza la scala di adattamento minima per il riempimento che utilizza la scala di adattamento massima.