Javascript画布加载图像

在Web应用程序中，JavaScript提供了一种方便的方法来绘制图形和图像，其中画布(canvas)元素是我们用来表示可编程的2D图形领域的设备无关的窗口。

在画布上加载图像

我们可以使用JavaScript的Image对象来下载和缓存图像，然后将其渲染到画布上。以下是一个简单的示例：

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

const img = new Image();
img.src = 'path/to/image.png';

img.onload = function() {
  context.drawImage(img, 0, 0);
};

上面的代码首先从DOM中获取画布元素，然后使用getContext方法获取画布的2D上下文。接下来，我们创建一个新的Image对象，并将它的src属性设置为图像的URL。当图像下载并准备好呈现到画布上时，onload回调函数被调用，我们使用drawImage方法将图像绘制到画布上。

图像的调整与剪裁

可以在drawImage方法中使用一些可选参数来对图像进行缩放、裁剪和调整等操作。

图像缩放

context.drawImage(img, 0, 0, img.width * 2, img.height * 2);

上面的代码将图像的宽度和高度分别扩大两倍，这样它就会在画布上显示为原来的4倍大小。

图像裁剪

context.drawImage(img, 100, 100, 50, 50, 0, 0, 50, 50);

上面的代码将从(x=100, y=100)的位置开始剪裁图像，将其剪裁为50x50的大小，并在画布的左上角从(x=0, y=0)的位置开始绘制。

图像调整

context.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);

上面的代码将图像按照画布的大小进行缩放，以充满画布并居中显示。

结论

使用JavaScript的Canvas API可以轻松地将图像加载到画布上，并进行缩放、裁剪和调整等操作。这为Web应用程序提供了丰富的交互和视觉效果。