html5-canvas
Afbeeldingen

Afbeelding bijsnijden met canvas

Dit voorbeeld toont een eenvoudige bijsnijdfunctie voor afbeeldingen die een afbeelding en bijsnijdcoördinaten neemt en de bijgesneden afbeelding retourneert.

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

Gebruiken

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

Het Tained-canvas

Bij het toevoegen van inhoud van bronnen buiten uw domein of van het lokale bestandssysteem wordt het canvas gemarkeerd als besmet. Poging om toegang te krijgen tot de pixeldata, of om te zetten naar een dataURL zal een beveiligingsfout veroorzaken.

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
}

Dit voorbeeld is slechts een stomp om iemand met een gedetailleerd inzicht te verleiden.

Wordt met "context.drawImage" de afbeelding niet op het canvas weergegeven?

Zorg ervoor dat uw afbeeldingsobject volledig is geladen voordat u het op het canvas probeert te tekenen met context.drawImage . Anders wordt de afbeelding niet stil weergegeven.

In JavaScript worden afbeeldingen niet onmiddellijk geladen. In plaats daarvan worden afbeeldingen asynchroon geladen en gedurende de tijd die nodig is om JavaScript te laden, wordt elke code die volgt op image.src . Dit betekent dat context.drawImage kan worden uitgevoerd met een lege afbeelding en daarom niets zal weergeven.

Voorbeeld om ervoor te zorgen dat de afbeelding volledig is geladen voordat u deze probeert te tekenen met .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
}

Voorbeeld laadt meerdere afbeeldingen voordat u met een ervan probeert te tekenen

Er zijn meer volledig functionele beeldladers, maar dit voorbeeld illustreert hoe dit te doen

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

Afbeelding schalen om te passen of te vullen.

Passend schalen

Betekent dat de hele afbeelding zichtbaar is, maar dat er mogelijk wat lege ruimte aan de zijkanten of boven- en onderkant is als de afbeelding niet hetzelfde aspect heeft als het canvas. In het voorbeeld wordt de afbeelding geschaald om te passen. Het blauw aan de zijkanten is te wijten aan het feit dat de afbeelding niet hetzelfde is als het canvas.

Schalen om te vullen

Betekent dat de afbeelding wordt geschaald zodat alle canvaspixels door de afbeelding worden bedekt. Als het afbeeldingsaspect niet hetzelfde is als het canvas, worden sommige delen van de afbeelding afgekapt. In het voorbeeld wordt de afbeelding geschaald om te vullen. Merk op hoe de boven- en onderkant van de afbeelding niet langer zichtbaar zijn.

Voorbeeld Passend

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

Voorbeeld Schaal om te vullen

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

Het enige verschil tussen de twee functies is het verkrijgen van de schaal. De aanpassing gebruikt de minimale aanpassingsschaal, de vulling gebruikt de maximale aanpassingsschaal.