html5-canvas
Bilder

Bildzuschnitt mit Leinwand

Dieses Beispiel zeigt eine einfache Bildbeschneidungsfunktion, die ein Bild und die Zuschneidekoordinaten entnimmt und das zugeschnittene Bild zurückgibt.

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

Benutzen

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

Die erhaltene Leinwand

Beim Hinzufügen von Inhalten aus Quellen außerhalb Ihrer Domäne oder aus dem lokalen Dateisystem wird die Leinwand als verfälscht markiert. Wenn Sie versuchen, auf die Pixeldaten zuzugreifen oder in eine dataURL zu konvertieren, wird ein Sicherheitsfehler ausgegeben.

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
}

Dieses Beispiel ist nur ein Stummel, um jemanden mit einem detaillierten Verständnis zu verführen.

Wird "context.drawImage" das Bild nicht im Canvas-Bereich anzeigen?

context.drawImage Sie sicher, dass Ihr Bildobjekt vollständig geladen ist, bevor Sie versuchen, es mit context.drawImage auf der Leinwand zu context.drawImage . Andernfalls wird das Bild nicht automatisch angezeigt.

In JavaScript werden Bilder nicht sofort geladen. Stattdessen werden Images asynchron geladen, und während der Zeit, die zum Laden von JavaScript benötigt wird, wird weiterhin Code ausgeführt, der auf image.src folgt. Dies bedeutet, dass context.drawImage mit einem leeren Bild ausgeführt werden kann und daher nichts anzeigt.

Beispiel: Stellen Sie sicher, dass das Bild vollständig geladen ist, bevor Sie versuchen, es mit .drawImage zu zeichnen

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
}

Laden Sie beispielsweise mehrere Bilder, bevor Sie versuchen, mit einem von ihnen zu zeichnen

Es gibt mehr voll funktionsfähige Image-Loader, aber dieses Beispiel zeigt, wie das geht

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

Bild skalieren, um es anzupassen oder zu füllen.

Anpassung an die Größe

Bedeutet, dass das gesamte Bild sichtbar ist, aber an den Seiten oder oben und unten möglicherweise etwas Leerzeichen vorhanden ist, wenn das Bild nicht mit der Leinwand identisch ist. Das Beispiel zeigt das Bild passend skaliert. Das Blau an den Seiten ist darauf zurückzuführen, dass das Bild nicht mit der Leinwand identisch ist.

Zum Füllen skalieren

Bedeutet, dass das Bild so skaliert wird, dass alle Leinwandpixel vom Bild überdeckt werden. Wenn der Bildaspekt nicht mit der Leinwand übereinstimmt, werden einige Teile des Bildes abgeschnitten. Das Beispiel zeigt das Bild, das bis zum Füllen skaliert ist. Beachten Sie, dass der obere und untere Rand des Bildes nicht mehr sichtbar ist.

Beispiel Anpassen

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

Beispiel zu füllende Skala

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

Der einzige Unterschied zwischen den beiden Funktionen besteht darin, die Skala zu erhalten. Bei der Passung wird die Minimalskala verwendet, bei der Füllung die Maxikalskala.