html5-canvas
Bilder

Beskärning av bilder med duk

Detta exempel visar en enkel bildbeskärningsfunktion som tar en bild och beskärningskoordinater och returnerar den beskurna bilden.

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

Att använda

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

Tained-duken

När du lägger till innehåll från källor utanför din domän, eller från det lokala filsystemet, är duken markerad som förspänd. Försök att komma åt pixeldata eller konvertera till en dataURL kommer att kasta ett säkerhetsfel.

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
}

Detta exempel är bara en stubb för att locka någon med en detaljerad förståelse utarbetad.

Visar "context.drawImage" inte bilden på Canvas?

Se till att ditt bildobjekt är fulladdat innan du försöker rita det på duken med context.drawImage . Annars misslyckas bilden tyst.

I JavaScript laddas inte bilder direkt. Istället laddas bilder asynkront och under tiden de tar att ladda JavaScript fortsätter de att köra alla image.src som följer image.src . Detta betyder context.drawImage kan context.drawImage med en tom bild och kommer därför att visa ingenting.

Exempel på att se till att bilden är fulladdad innan du försöker rita den med .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
}

Exempel på att ladda flera bilder innan du försöker rita med någon av dem

Det finns mer fullfunktionella bildlastare, men det här exemplet illustrerar hur man gör det

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

Skalera bilden för att passa eller fylla.

Skalning för att passa

Innebär att hela bilden är synlig men det kan finnas lite tomt utrymme på sidorna eller uppifrån och botten om bilden inte är samma aspekt som duken. Exemplet visar bilden skalad för att passa. Det blå på sidorna beror på att bilden inte är samma aspekt som duken.

Skalning för att fylla

Innebär att bilden skalas så att alla dukpixlar täcks av bilden. Om bildaspekten inte är densamma som duken klipps vissa delar av bilden. Exemplet visar bilden skalad att fylla. Lägg märke till hur bildens övre och undre del inte längre syns.

Exempel Skala för att passa

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

Exempel Skala som ska fyllas

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

Den enda skillnaden mellan de två funktionerna är att få skalan. Passformen använder min montering skala och fyllningen använder max montering skala.