如何使用 JavaScript 裁剪或调整图像大小

使用 css 在网站上显示调整大小或裁剪的图像版本非常容易。但是，这不会改变原始图像数据。如果您想为访问者或客户创建实际裁剪或调整大小的图像版本怎么办？

我们已经发布了一些关于如何使用 php 创建图像缩略图或使用 PHP应用裁剪、调整大小和其他过滤器的教程。在本教程中，您将学习如何使用 javascript 裁剪或调整图像大小。

这是我们的图像裁剪代码的现场演示。

这是调整大小代码的示例：

要记住的事情

我们将需要访问原始图像数据以创建新版本的图像，该图像被裁剪或调整为特定尺寸。canvas我们可以在元素的帮助下做到这一点。

canvas html 元素已经存在很长时间了，我们可以用它来绘制各种图形。有数百个库可用于使用 canvas api 创建图形、矢量和动画。我们将在本教程中使用 API 来创建裁剪和调整大小的图像。

您应该记住的一件事是，访问图像数据以使用画布操作它需要您将图像放在同一服务器上，或者使用crossorigin属性来指示画布有权访问、修改和保存图像数据。

1.加载图像数据

我们需要做的第一件事是加载我们的图像数据。您可以通过引用已加载到 dom 中的图像或使用Image()构造函数创建新图像来做到这一点。这是一个例子：

// Reference to the image loaded into the DOM const originalImage = document.queryselector("img.puppy");
// use Image() constructor to let imagePath = 'images/puppy.jpg';const originalImage = new Image();originalImage.src = imagePath;

2.在画布上绘制图像

我们现在将使用事件***器来等待图像加载，然后获取其原始宽度和高度。此宽度和高度用于确定图像的纵横比。访问纵横比将允许我们调整图像大小而无需在任一方向拉伸它，这样我们就可以避免任何失真。

canvas API的drawImage()方法将在这里发挥重要作用。我们可以通过传递适当数量的参数来使用它来调整图像大小和裁剪图像。它可以接受三个、五个或九个参数，并具有以下语法。

void ctx.drawImage(image, dx, dy); 
void ctx.drawImage(image, dx, dy, dWidth, dHeight); 
void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight );

我们将使用第二个版本来实现我们的调整大小功能和第三个版本来实现裁剪。第一个参数是要在画布上绘制的图像元素。前缀s和d表示我们的原始图像和新图像的来源和目的地。这意味着(sx, sy)和(dx, dy)表示图像的左上角坐标。同样，sWidth/sHeight和dWidth/dHeight表示图像的宽度和高度。

我已经标记了来自Pixabay的小狗图像上的源值，我们将对其进行裁剪，以让您了解这些参数的含义。

如何使用 JavaScript 裁剪或调整图像大小第1张如何使用 JavaScript 裁剪或调整图像大小第2张如何使用 JavaScript 裁剪或调整图像大小第3张

图像的左上角被认为是 (0, 0)，右下角对应于 ( imageWidth, imageHeight)。这意味着我们可以通过将、、和的值分别设置sx为sy0、0 sWidth、sHeight图像宽度和图像高度来获得整个图像。

调整图像大小

假设我们要调整小狗图像的大小，使其只有 500 像素宽。我们可以使用以下 JavaScript 代码来调整图像大小。稍后我们将把这段代码修改为可调用函数，这样当用户不想保留纵横比时，宽度不再是硬编码，高度可以任意设置。

originalImage.addeventListener('load', function() {
     const originalWidth = originalImage.naturalWidth;
     const originalHeight = originalImage.naturalHeight;
     constant aspectRatio = originalWidth/originalHeight;
     let new width = 500;
     let newHeight = newWidth/aspectRatio;
     canvas.width = newWidth;
     canvas.height = newHeight;
    
     ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);});

在我们的事件监听器中，我们使用 Image 对象的naturalWidthandnaturalHeight属性来获取它的尺寸。我们使用这些信息来获取图像的纵横比。变量的值newWidth决定了我们希望图像在调整大小时的宽度。然后我们newHeight通过将宽度除以我们计算的纵横比来计算。

这些值也用于设置画布的宽度和高度。之后我们只需使用该drawImage()方法在画布上绘制我们的图像。

裁剪图像

您可能还记得我们之前的讨论，使用五个参数调用该drawImage()方法只需要我们传递目标坐标和尺寸。源图像在新画布上完整绘制。但是，我们也可以将任意源坐标和尺寸传递给该drawImage()方法，以便仅绘制源图像的一部分。这是在 javaScript 中裁剪图像的一个非常基本的实现。

originalImage.addEventListener('load', function() {
    
     let sx = 352;
     let sy = 260;
     let croppedWidth = 1332;
     let croppedHeight = 850;
     canvas.width = crop width;
     canvas.height = crop height;
     ctx.drawImage(originalImage, sx, sy,croppedWidth,croppedHeight, 0, 0,croppedWidth,croppedHeight);});

稍后我们将改进此代码，以便这些值不是硬编码的，而是从可调用函数派生的。当用户没有传递它的值时，它croppedHeight也将自动从纵横比和纵横比中确定。croppedWidth

3.下载图片

除非目标只是在网页上呈现裁剪或调整大小的图像，否则您可能还希望让用户能够下载图像。我们可以通过使用该todataURL()方法以最小的努力实现这一点。它接受两个允许您指定文件格式和图像质量的参数。

假设您的网页上有一个带有以下 HTML 的下载按钮：

<button class="download">下载图片</button>

然后，我们可以使用以下 JavaScript 创建一个临时虚拟链接，以便我们下载图像。

const downloadBtn = document.querySelector("button.download");downloadBtn.addEventListener('click', function() {
     let tempLink = document.createElement('a');
     tempLink.download = 'Puppy Crop.jpg';
     tempLink.href = document.getElementById('canvas').toDataURL("image/jpeg", 0.9);
     tempLink.click();});

现在单击下载按钮将开始下载名为puppy-cropped.jpg的文件。

4.创建可重复使用的裁剪和调整大小功能

我们代码中的很多值目前都是硬编码的。这严重限制了代码的可重用性。让我们以一种允许我们调用单个函数来裁剪、调整大小和下载图像的方式重写它。这是将任何给定图像调整大小或裁剪到指定尺寸然后以给定名称保存的代码。

function resizeImage(imagePath, downloadName, newWidth, newHeight) {
    const originalImage = new Image();
    originalImage.src = imagePath;
    const canvas = document.getElementById('canvas');
    const ctx = canvas. getContext('2d');
    originalImage.addEventListener('load', function() {
        const originalWidth = originalImage.naturalWidth;
        const originalHeight = originalImage.naturalHeight;
        constant aspectRatio = originalWidth/originalHeight;
        if (new height === undefined) {
            new height = new width/aspect ratio;
        }
        canvas.width = newWidth;
        canvas.height = newHeight;
        
        ctx.drawImage(originalImage, 0, 0, newWidth, newHeight);
        download image (download name);
    });} function cropImage(imagePath, downloadName, newX, newY, newWidth, newHeight) {
    const originalImage = new Image();
    originalImage.src = imagePath;
    const canvas = document.getElementById('canvas');
    const ctx = canvas. getContext('2d');
    originalImage.addEventListener('load', function() {
        
        const originalWidth = originalImage.naturalWidth;
        const originalHeight = originalImage.naturalHeight;
        constant aspectRatio = originalWidth/originalHeight;
        if (new height === undefined) {
            new height = new width/aspect ratio;
        }
        canvas.width = newWidth;
        canvas.height = newHeight;
        
        ctx.drawImage(originalImage, newX, newY, newWidth, newHeight, 0, 0, newWidth, newHeight);
        download image (download name);
    });} function download image(download name) {
    let tempLink = document.createElement('a');
    tempLink.download = download name;
    tempLink.href = document.getElementById('canvas').toDataURL("image/jpeg", 0.9);
    tempLink.click();}