How to resize images with javascript

In front-end development, it is often necessary to adjust the image size, especially in responsive design. JavaScript can adjust the image size by calling the image API. This article will introduce you how to use JavaScript to adjust the image size.

1. Use CSS to adjust image size

Before introducing JavaScript to adjust image size, let’s first take a look at how to use CSS to adjust image size. In HTML, we can adjust the size of the image through CSS attributes, for example:

<img  src="/static/imghwm/default1.png"  data-src="example.jpg"  class="lazy"   style="max-width:90%" alt="How to resize images with javascript" >

In the above code, the width of the image is set to 50% through the style attribute, and the height is adaptive. This method is very simple, but sometimes we need to dynamically adjust the image size through JavaScript, then we need to use the image API.

2. Use the image API to adjust the image size

1. Use HTML5 Canvas to adjust the image size

HTML5 Canvas is an HTML element used to draw graphics and animations. We can use this to achieve image resizing. In Canvas, we can use the drawImage() method to draw pictures and adjust the size of the picture. For example, the following code will show how to use Canvas to draw a picture with a size of 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;
}

The above code shows how to use Canvas to adjust the picture to a size of 200x200 pixels. First, we create a Canvas element and set its width and height. Next, we get the context of the Canvas and create an Image element. After the Image element is loaded, we draw the image on the Canvas and obtain the modified image. Finally, we display the modified image in HTML.

2. Use HTMLImageElement to adjust image size

In addition to using Canvas, we can also use the API in HTMLImageElement to adjust image size. HTMLImageElement is an image element in HTML, which provides some properties and methods for operating images. The following code will show how to use HTMLImageElement to resize the 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;
}

The above code shows how to use HTMLImageElement to resize the image to 200x200 pixel size. We create an Image element and set its URL. After the image is loaded, we can use the width and height attributes to set the size of the image. Finally, we display the modified image in HTML.

3. Summary

In this article, we introduced how to use JavaScript to resize images. We can use CSS to simply resize images, and we can also use the APIs in HTML5 Canvas and HTMLImageElement to achieve more complex adjustments. Using Canvas can give us more freedom, but requires a more cumbersome drawing process; while using HTMLImageElement is simpler, but its function is relatively weak. Just choose according to your needs.

The above is the detailed content of How to resize images with javascript. For more information, please follow other related articles on the PHP Chinese website!