Le dessin sur toile est adapté et affiché au centre selon la méthode contain ou cover.

Lorsque vous utilisez drawImage pour dessiner sur toile, les images à dessiner sont de tailles et de proportions différentes, donc comme la mise en page html+css, le contenu et la couverture sont nécessaires pour répondre à différents besoins.

Redimensionnez l'image de manière à ce que le côté long de l'image soit entièrement visible tout en conservant les proportions. En d’autres termes, l’image peut être affichée entièrement.

Si l'image est placée dans le rectangle de la boîte fixe selon le mode contenir, l'image doit être mise à l'échelle dans une certaine mesure.

Le principe est :

Si la largeur et la hauteur de l'image ne sont pas égales, de sorte que le côté long de l'image puisse être entièrement affiché, alors le côté hauteur de l'image originale sera égal au côté correspondant à la boîte fixe après mise à l'échelle, et l'autre côté se retrouvera dans des proportions égales.

Si la largeur et la hauteur de l'image sont égales, la largeur et la hauteur de l'image mise à l'échelle seront déterminées en fonction de la largeur et de la hauteur de la boîte fixe. Si la largeur de la boîte fixe est supérieure à la hauteur, alors la hauteur de. l'image à l'échelle sera égale à la hauteur de la boîte fixe, et l'autre côté pourra être trouvé en conséquence, et vice versa.

 /** * @param {Number} sx coordonnée x fixe de la boîte, sy fixe y indice gauche de la boîte* @param {Number} box_w largeur fixe de la boîte, box_h hauteur fixe de la boîte* @param {Number} source_w largeur de l'image originale, source_h hauteur de l'image originale* @return {Object} {paramètres de drawImage, coordonnée x, coordonnée y, largeur et hauteur de l'image mise à l'échelle}, correspondant à drawImage(imageResource, dx, dy, dWidth, dHeight) */ function containImg(sx, sy, box_w, box_h, source_w, source_h ) { var dx = sx, dy = sy, dLargeur = boîte_w, dHauteur = boîte_h ; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ dHeight = source_h*dWidth/source_w; dy = sy + (box_h-dHeight)/2; else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ dLargeur = source_w*dHeight/source_h; dx = sx + (box_w-dWidth)/2; } return{ dx, dy, dWidth, dHeight } } var c=document.getElementById(myCanvas); ctx.fillStyle = '#e1f0ff'; //Fixez la position et la taille de la boîte - l'image doit être placée dans cette boîte ctx.fillRect(30, 30, 150, 200); var img = new Image(); .log( img.width,img.height); var imgRect = containImg(30,30,150,200,img.width,img.height); console.log('imgRect',imgRect); ctx.drawImage(img, imgRect.dx, ​​​​imgRect.dy, imgRect.dWidth, imgRect.dHeight } img.src = ./timg2.jpg; //Remarque : en mode de préchargement img, onload doit être placé au-dessus de la valeur attribuée à src pour éviter que l'événement onload ne puisse pas être déclenché lorsqu'il existe déjà un cache, ce qui entraînerait la non-exécution de l'événement onload.

Redimensionnez l'image tout en conservant le rapport hauteur/largeur afin que seul le côté court de l'image soit entièrement visible. Autrement dit, l’image n’est généralement complète que dans le sens horizontal ou vertical, et le découpage se produira dans l’autre sens.

principe:

Capturer une partie de l'image en fonction de la proportion de la boîte fixe

 /** * @param {Number} box_w largeur de boîte fixe, box_h hauteur de boîte fixe* @param {Number} source_w largeur de l'image originale, source_h hauteur de l'image originale* @return {Object} {informations sur l'image interceptée}, correspondant à drawImage(imageResource , sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) paramètres*/ fonction coverImg(box_w, box_h, source_w, source_h){ var sx = 0, sy = 0, sWidth = source_w, sHeight = source_h; if(source_w > source_h || (source_w == source_h && box_w < box_h)){ sWidth = box_w *sHauteur/boîte_h ; (source_w-sWidth)/2; }else if(source_w < source_h || (source_w == source_h && box_w > box_h)){ sHeight = box_h*sWidth/box_w; sx, sy, sLargeur, sHauteur } } var c=document.getElementById(myCanvas); var ctx=c.getContext(2d); ctx.fillStyle = '#e1f0ff'; //Fixez la position et la taille de la boîte -- l'image doit être placée dans cette boîte ctx .fillRect(30, 30, 150, 200); var img = new Image(); console.log(img.width,img.height); var imgRect = coverImg(150,200,img.width,img.height); console.log('imgRect',imgRect); imgRect.sy, imgRect.sLargeur, imgRect.sHauteur, 30, 30, 150, 200); } img.src = ./timg2.jpg; //Remarque : en mode de préchargement img, onload doit être placé au-dessus de la valeur attribuée à src pour éviter que l'événement onload ne puisse être déclenché lorsqu'il y a déjà un cache. Par conséquent, les événements dans onload ne sont pas exécutés.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.