Comment redimensionner des images avec javascript

En développement front-end, il est souvent nécessaire de redimensionner les images, notamment en responsive design. JavaScript peut ajuster la taille de l'image en appelant l'API d'image. Cet article vous expliquera comment utiliser JavaScript pour ajuster la taille de l'image.

1. Utilisez CSS pour ajuster la taille de l'image

Avant d'introduire JavaScript pour ajuster la taille de l'image, voyons d'abord comment utiliser CSS pour ajuster la taille de l'image. En HTML, on peut ajuster la taille de l'image grâce aux attributs CSS, par exemple :

<img src="example.jpg" style="width: 50%; height: auto;">

Dans le code ci-dessus, la largeur de l'image est fixée à 50% via l'attribut style, et la hauteur est adaptatif. Cette méthode est très simple, mais parfois nous devons ajuster dynamiquement la taille de l'image via JavaScript, nous devons alors utiliser l'API d'image.

2. Utilisez l'API d'image pour ajuster la taille de l'image

1 Utilisez HTML5 Canvas pour ajuster la taille de l'image

HTML5 Canvas est une sorte. de graphiques utilisés pour dessiner des graphiques et des éléments HTML animés, que nous pouvons utiliser pour réaliser le redimensionnement d'images. Dans Canvas, nous pouvons utiliser la méthode drawImage() pour dessiner des images et ajuster la taille de l’image. Par exemple, le code suivant montrera comment utiliser Canvas pour dessiner une image d'une taille de 200x200 pixels :

// 声明一个Canvas元素
var canvas = document.createElement('canvas');
// 设置Canvas的宽度和高度
canvas.width = 200;
canvas.height = 200;
// 获取Canvas的上下文
var ctx = canvas.getContext('2d');
// 创建一个Image元素
var img = new Image();
// 设置Image的URL
img.src = 'example.jpg';
// 加载完图片后执行函数
img.onload = function() {
  // 在Canvas上绘制图片
  ctx.drawImage(img, 0, 0, 200, 200);
  // 获取修改后的图片
  var newImg = canvas.toDataURL();
  // 展示修改后的图片
  document.getElementById('result').src = newImg;
}

Le code ci-dessus montre comment utiliser Canvas pour ajuster l'image à une taille de 200x200 pixels. . Tout d’abord, nous créons un élément Canvas et définissons sa largeur et sa hauteur. Ensuite, nous obtenons le contexte du Canvas et créons un élément Image. Une fois l’élément Image chargé, nous dessinons l’image sur le Canvas et obtenons l’image modifiée. Enfin, nous affichons l'image modifiée en HTML.

2. Utilisez HTMLImageElement pour ajuster la taille de l'image

En plus d'utiliser Canvas, nous pouvons également utiliser l'API de HTMLImageElement pour ajuster la taille de l'image. HTMLImageElement est un élément d'image en HTML, qui fournit certaines propriétés et méthodes pour exploiter les images. Le code suivant montrera comment utiliser HTMLImageElement pour redimensionner l'image :

// 创建一个Image元素
var img = new Image();
// 设置Image的URL
img.src = 'example.jpg';
// 加载完图片后执行函数
img.onload = function() {
  // 设置图片的宽度和高度
  img.width = 200;
  img.height = 200;
  // 展示修改后的图片
  document.getElementById('result').src = img.src;
}

Le code ci-dessus montre comment utiliser HTMLImageElement pour redimensionner l'image à une taille de 200 x 200 pixels. Nous créons un élément Image et définissons son URL. Une fois l'image chargée, nous pouvons utiliser les attributs width et height pour définir la taille de l'image. Enfin, nous affichons l'image modifiée en HTML.

3. Résumé

Dans cet article, nous avons présenté comment utiliser JavaScript pour redimensionner les images. Nous pouvons utiliser CSS pour simplement redimensionner les images, et nous pouvons également utiliser les API de HTML5 Canvas et HTMLImageElement pour réaliser des ajustements plus complexes. Utiliser Canvas peut nous donner plus de liberté, mais cela nécessite un processus de dessin plus lourd ; tandis que l'utilisation de HTMLImageElement est plus simple, mais sa fonction est relativement faible. Choisissez simplement en fonction de vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!