web-dev-qa-db-fra.com

html5: copier une toile sur une image et inverser

J'ai mis en œuvre une fonction de zoom avant et arrière sur un élément de la toile. Cela fonctionne en redimensionnant la toile, en la traduisant, puis en redessinant la scène entière à nouveau. Le problème est que cela prend beaucoup de temps. le temps de tout redessiner parce que j'ai beaucoup de choses sur ma toile.

J'ai besoin d'un moyen de copier le canevas sur un objet image et de copier ensuite l'image sur le canevas sans perte de qualité. Quelles sont les méthodes spécifiques pour copier le canevas dans une variable javascript et pour recopier cette variable ultérieurement dans le canevas?

Je serai heureux si vous écrivez le code parce que je ne pouvais pas trouver une bonne explication sur Internet.

merci,

imagehtml5canvas
16
Amit Hagin

La méthode drawImage () peut dessiner sur une toile en utilisant une autre toile au lieu d'une image.

Vous pouvez créer un canevas de 'sauvegarde', de la même taille que votre original, dessinez le premier et dessinez-le ensuite vers l'original lorsque vous en avez besoin.

par exemple.

// Assume we have a main canvas
// canvas = <main canvas>
ctx = canvas.getContext('2d');
..

// create backing canvas
var backCanvas = document.createElement('canvas');
backCanvas.width = canvas.width;
backCanvas.height = canvas.height;
var backCtx = backCanvas.getContext('2d');

// save main canvas contents
backCtx.drawImage(canvas, 0,0);

..

// restore main canvas
ctx.drawImage(backCanvas, 0,0);
27
andrewmu

Il y a plusieurs façons de le faire: Les méthodes getImageData et putImageDataRéférence , Cependant putImageData et getImageData sont assez lents. Une autre méthode consiste à enregistrer les données dans une image en mémoire et à les rappeler de celle qui est beaucoup plus rapide. La troisième méthode est celle mentionnée ci-dessus par andrewmu, qui consiste à copier dans un autre élément de la toile. J'ai inclus des exemples pour le premier et le deuxième type.

Méthode image en mémoire

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    savedData = new Image();

function save(){
    // get the data
    savedData.src = canvas.toDataURL("image/png");
}

function restore(){
    // restore the old canvas
    ctx.drawImage(savedData,0,0)
}

Méthode getImageData putImageData

// Setup our vars, make a new image to store the canvas data
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    canvasData = '';

function save(){
    // get the data
    canvasData = ctx.getImageData(0, 0, 100, 100);
}

function restore(){
    // restore the old canvas
    ctx.putImageData(canvasData, 0, 0);
}
19
Loktar

image ajoutée dans la toile 

var image = new Image();
image.src = "1.jpg";
image.onload = function() {
context.drawImage(image, 0, 0);
};
1
zloctb