html5-canvas
Zdjęcia

Kadrowanie obrazu przy użyciu płótna

Ten przykład pokazuje prostą funkcję przycinania obrazu, która wykonuje zdjęcie i współrzędne przycinania i zwraca przycięty obraz.

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

Używać

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

Płótno Tained

Podczas dodawania treści ze źródeł spoza domeny lub z lokalnego systemu plików płótno jest oznaczane jako skażone. Próba uzyskania dostępu do danych w pikselach lub konwersji na dataURL spowoduje błąd bezpieczeństwa.

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
}

Ten przykład to tylko skrót, aby zachęcić kogoś ze szczegółowym zrozumieniem.

Czy „context.drawImage” nie wyświetla obrazu na kanwie?

Upewnij się, że obiekt obrazu jest w pełni załadowany, zanim spróbujesz narysować go na kanwie za pomocą context.drawImage . W przeciwnym razie obraz po cichu nie będzie wyświetlany.

W JavaScript obrazy nie są ładowane natychmiast. Zamiast tego obrazy są ładowane asynchronicznie, a przez czas ładowania JavaScript kontynuuje wykonywanie dowolnego kodu następującego po image.src . Oznacza to, że context.drawImage może być wykonany z pustym obrazem i dlatego nie będzie wyświetlał nic.

Przykład upewnienia się, że obraz jest w pełni załadowany przed próbą narysowania go za pomocą .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
}

Przykład ładowania wielu zdjęć przed próbą narysowania dowolnym z nich

Istnieje więcej w pełni funkcjonalnych programów ładujących obraz, ale ten przykład ilustruje, jak to zrobić

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

Skalowanie obrazu w celu dopasowania lub wypełnienia.

Skalowanie w celu dopasowania

Oznacza, że cały obraz będzie widoczny, ale może być trochę pustej przestrzeni po bokach lub na górze i na dole, jeśli obraz nie jest taki sam, jak płótno. Przykład pokazuje obraz skalowany w celu dopasowania. Kolor niebieski po bokach wynika z faktu, że obraz nie jest taki sam, jak płótno.

Skalowanie do wypełnienia

Oznacza, że obraz jest skalowany, aby wszystkie piksele płótna zostały pokryte przez obraz. Jeśli obraz nie jest taki sam jak płótno, wówczas niektóre części obrazu zostaną obcięte. Przykład pokazuje obraz skalowany do wypełnienia. Zwróć uwagę, że góra i dół obrazu nie są już widoczne.

Przykład Skaluj, aby dopasować

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

Przykładowa skala do wypełnienia

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

Jedyną różnicą między tymi dwiema funkcjami jest uzyskanie skali. Dopasowanie wykorzystuje minimalną skalę dopasowania, a wypełnienie używa maksymalnej skali dopasowania.