html5-canvas
Images

Recadrage d'image avec toile

Cet exemple montre une fonction de recadrage d'image simple qui prend une image et des coordonnées de recadrage et renvoie l'image recadrée.

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

Utiliser

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 toile Tained

Lorsque vous ajoutez du contenu provenant de sources extérieures à votre domaine ou du système de fichiers local, le canevas est marqué comme corrompu. Tenter d'accéder aux données de pixel ou de convertir en dataURL génère une erreur de sécurité.

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
}

Cet exemple est juste un bout pour attirer quelqu'un avec une compréhension détaillée élaborée.

"Context.drawImage" n'affiche-t-il pas l'image sur le canevas?

Assurez-vous que votre objet image est entièrement chargé avant d'essayer de le dessiner sur le canevas avec context.drawImage . Sinon, l'image ne sera pas affichée.

En JavaScript, les images ne sont pas chargées immédiatement. Au lieu de cela, les images sont chargées de manière asynchrone et pendant le temps qu'elles prennent pour charger JavaScript continue à exécuter tout code qui suit image.src . Cela signifie que context.drawImage peut être exécuté avec une image vide et n'affiche donc rien.

Exemple: assurez-vous que l'image est complètement chargée avant d'essayer de la dessiner avec .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
}

Exemple de chargement de plusieurs images avant d'essayer de dessiner avec l'une d'elles

Il y a plus de chargeurs d'images fonctionnels, mais cet exemple illustre comment le faire

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

Mise à l'échelle de l'image pour l'ajuster ou la remplir.

Mise à l'échelle pour s'adapter

Signifie que l'image entière sera visible mais qu'il peut y avoir un espace vide sur les côtés ou en haut et en bas si l'image n'est pas le même aspect que le canevas. L'exemple montre l'image mise à l'échelle pour s'adapter. Le bleu sur les côtés est dû au fait que l’image n’a pas le même aspect que la toile.

Mise à l'échelle pour remplir

Signifie que l'image est mise à l'échelle de sorte que tous les pixels du canevas soient couverts par l'image. Si l'aspect de l'image n'est pas le même que celui du canevas, certaines parties de l'image seront tronquées. L'exemple montre l'image mise à l'échelle pour remplir. Notez que le haut et le bas de l'image ne sont plus visibles.

Exemple d'échelle pour s'adapter

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

Exemple d'échelle à remplir

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

La seule différence entre les deux fonctions est d'obtenir la balance. L'ajustement utilise l'échelle d'ajustement minimum pour que le remplissage utilise l'échelle d'ajustement maximale.