javascript - Toile échelle dans toutes les directions

Question

J'ai deux couches. Une couche est grande et une autre est petite. Donc, pour aligner la petite couche avec la grande couche, je redimensionne la petite couche à la taille de la grande couche.

La mise à l'échelle fonctionne en haut/à gauche, mais en bas/à droite, cela ne fonctionne pas comme je l'avais espéré: il semble que la taille ne soit pas uniforme dans toutes les directions.

Je le fais comme:

var canvas=document.getElementById("canvas"); 
var context=canvas.getContext("2d"); 
    var imageObject1=new Image(); 
    imageObject1.onload=function(){ 
     context1.clearRect(0,0,imageObject1.width,imageObject1.width);  
     context1.scale(1.0927,1.0956); 
     context1.drawImage(imageObject1,0,0); 
    } 
    imageObject1.src=canvas.toDataURL(); 

jsFiddle problème: https://jsfiddle.net/7cufxf6d/

Toute idée comment résoudre ce problème?

Answer 1

Vos décalages et proportions semblent erronés. Dans votre code, ils sont codés en dur, puis de nouveau décalés en utilisant des valeurs codées en dur. Vous pourriez vouloir réexaminer les valeurs et comment vous les obtenez.

La mise à l'échelle (à l'aide de la matrice de transformation de canvas) lors de l'utilisation de valeurs à virgule flottante peut entraîner davantage d'erreurs d'arrondi que les limites fixes fournies par drawImage. Comme vous hardcoding déjà ces valeurs que vous pourriez économiser travail (et la mémoire) et les deux déplacement échelle de l'image lors du dessin (voir: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage):
ctx.drawImage(image, dx, dy, dWidth, dHeight)

Je légèrement modifié votre violon:

// Silver Layer 
 
var canvas0 = document.getElementById("layer1"); 
 
var context0 = canvas0.getContext("2d"); 
 

 
var imageObject0 = new Image(); 
 
imageObject0.crossOrigin = "anonymous"; 
 
imageObject0.onload = function() { 
 
    document.getElementById('layer1').width = imageObject0.width; 
 
    document.getElementById('layer1').height = imageObject0.height; 
 
    context0.clearRect(0, 0, imageObject0.width, imageObject0.width); 
 
    // context.scale(1.5,1.5); 
 
    context0.drawImage(imageObject0, 0, 0); 
 

 
}; 
 
imageObject0.src = 'https://i.imgur.com/tIaNJku.png'; 
 
// Black Layer  
 
var canvas1 = document.getElementById("layer2"); 
 
var context1 = canvas1.getContext("2d"); 
 

 
var imageObject1 = new Image(); 
 
imageObject1.crossOrigin = "anonymous"; 
 
imageObject1.onload = function() { 
 
    document.getElementById('layer2').width = imageObject1.width; 
 
    document.getElementById('layer2').height = imageObject1.height; 
 
    context1.clearRect(0, 0, imageObject1.width, imageObject1.width); 
 
    //context1.scale(1.0927,1.0956); 
 
    context1.drawImage(imageObject1, -65, -10, 3020, 2680); // MODIFIED LINE 
 

 
    //REMOVED SHIFT 
 
}; 
 
imageObject1.src = 'https://i.imgur.com/29aRnzv.png'; //black

<div style="position: relative;"> 
 
    <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
 
    <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
 
</div>