web-dev-qa-db-fra.com

Image d'échelle FabricJS pour s'adapter à la largeur / taille

Comment mettre l'image à l'échelle pour qu'elle s'adapte correctement à la taille du conteneur? Je veux une grille de deux images et chaque image pour s'adapter à la taille fournie.

https://codepen.io/peteringram0/pen/gebYWo?editors=001

img.set({
    left: 0,
    top: 0,
    width: 300,
    height: 300
    // Scale image to fit width / height ?
 });

EDIT: Désolé, je n'ai pas expliqué ma question très clairement. Je cherche à le positionner dans la grille mais comme un type de "couverture". https://codepen.io/peteringram0/pen/xWwZmy?editors=0011 . Par exemple. dans le lien il y a 4 images dans une grille mais les images sont au centre et débordent. Je veux que chacune des images soit centrée verticalement sans débordement en dehors de la taille définie. Merci (x doit être au centre, tout en gardant le rapport hauteur/largeur)

canvashtml5-canvasfabricjs
10
Peter I

Si vous souhaitez mettre à l'échelle l'objet image à une largeur ou une hauteur donnée, utilisez respectivement scaleToWidth et scaleToHeight .

J'ai supprimé la hauteur et la largeur spécifiées dans la fonction img.set de votre code. Et ajouté une méthode scaeToHeight et scaleToWidth. Utilisez le code ci-dessous.

window.fabric.Image.fromURL(imgUrl, (img) => {
  img.set({
    left: 300,
    top: 0
  });
  img.scaleToHeight(300);
  img.scaleToWidth(300);
  canvas.add(img);
})

Découvrez ce violon: https://jsfiddle.net/hazeebp/195uan6f/1/

18
Abdul Haseeb