在前端开发中，经常需要将图像缩放以适应不同的容器大小。本文将介绍如何使用JavaScript和HTML5 Canvas来实现图像的自适应缩放。
HTML5 Canvas
HTML5 Canvas是一个可以通过JavaScript脚本来绘制图形的基于Web的技术。它提供了一组API，使得我们可以在网页上绘制图形，包括线条、矩形、圆形和图像等。Canvas可以用于游戏开发、数据可视化、动画效果等方面。
图像缩放
图像缩放是指调整图像的大小，通常是为了适应不同的显示尺寸或者打印需求。在前端开发中，通常需要将图像缩放以适应容器大小。比如，在网页设计中，可能需要将图像缩放以适应响应式布局；在移动端开发中，可能需要将图像缩放以适应不同的设备分辨率。
Canvas中的图像缩放
Canvas提供了两个方法来实现图像缩放：drawImage()和scale()。
drawImage()
drawImage()方法可以将图像绘制到画布上。该方法有三个参数：要绘制的图像、图像左上角的x坐标和y坐标。如果只传入这三个参数，则绘制的图像大小不变。
const img = new Image(); img.src = 'image.jpg'; canvasContext.drawImage(img, 0, 0);
如果要将图像缩放到指定的大小，可以在drawImage()方法中添加两个参数：要绘制的图像的宽度和高度。
const img = new Image(); img.src = 'image.jpg'; canvasContext.drawImage(img, 0, 0, canvas.width, canvas.height);
这样就可以将图像缩放到与画布相同的大小。
scale()
scale()方法可以对当前绘图进行缩放。该方法有两个参数：水平方向上的缩放因子和垂直方向上的缩放因子。如果缩放因子为2，则图像将放大两倍。如果缩放因子为0.5，则图像将缩小一半。
canvasContext.scale(2, 2); // 将图像放大两倍 canvasContext.drawImage(img, 0, 0); // 绘制图像 canvasContext.scale(0.5, 0.5); // 将图像缩小一半 canvasContext.drawImage(img, 0, 0); // 绘制图像
自适应缩放
要实现自适应缩放，即让图像根据容器大小进行缩放，可以使用以下代码：
-- -------------------- ---- ------- ----- --- - --- -------- ------- - ------------ ---------- - ---------- - ----- ------ - --------------------------------- ----- ------------- - ------------------------ ----- -------------- - ------------------------------ ----- --------------- - ------------------------------- ------------ - --------------- ------------- - ---------------- ----- ----- - --------------------- - ---------- ------------- - ------------ ----- ----- - --------- - ------ ----- ------ - ---------- - ------ ---------------------------- ------------- - ------ - -- -------------- - ------- - -- ------ -------- --
这段代码的作用是：
- 加载图像；
- 获取容器的宽度和高度；
- 将Canvas的大小设置为容器大小；
- 计算缩放因子，以保持图像比例不变；
- 计算缩放后的图像宽度和高度；
- 绘制图像在Canvas中心。
示例代码
以下示例代码演示了如何使用Canvas将图像自适应缩放到容
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25523