html5使用canvas压缩图片的示例代码

前言

在Web开发中，图片压缩是一个常见的需求。HTML5提供了一种强大的特性，即使用canvas元素来对图片进行压缩。本文将为您提供一个使用canvas压缩图片的示例代码。

步骤一：获取图片数据

首先，我们需要从用户选择的图片中获取图片数据。用户可以通过文件上传、拖放等方式进行选择。以下是一个示例代码：

<input type="file" id="fileInput" >

<script>
    var fileInput = document.getElementById("fileInput");

    fileInput.addEventListener("change", function(event) {
        var file = event.target.files[0];
        var reader = new FileReader();

        reader.onload = function(e) {
            var image = new Image();
            image.src = e.target.result;

            image.onload = function() {
                // 图片加载完成后，进行下一步操作
                compressImage(image);
            };
        }

        reader.readAsDataURL(file);
    });
</script>

上述代码首先创建了一个文件选择框，并给其赋予fileInput的id属性。然后在JavaScript中，我们监听了文件选择框的change事件，并在事件回调函数中通过FileReader对象读取用户选择的文件。读取成功后，我们创建了一个Image对象，并将其src属性设置为读取到的图片数据。当图片加载完成后，再进行下一步的图片压缩操作。

步骤二：使用canvas压缩图片

接下来，我们将使用canvas元素对图片进行压缩。以下是一个示例代码：

function compressImage(image) {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");

    var maxWidth = 800; // 压缩后的最大宽度
    var maxHeight = 600; // 压缩后的最大高度

    var width = image.width;
    var height = image.height;

    if (width > height) {
        if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
        }
    } else {
        if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
        }
    }

    canvas.width = width;
    canvas.height = height;

    ctx.drawImage(image, 0, 0, width, height);

    var compressedImageData = canvas.toDataURL("image/jpeg", 0.7); // 压缩图片

    // 将压缩后的图片数据进行下一步操作
    // ...
}

在上述代码中，首先我们创建了一个新的canvas元素，并获取其2D绘图上下文ctx。然后，我们定义了压缩后的图片的最大宽度maxWidth和最大高度maxHeight。接着，我们根据图片的宽高比例计算出压缩后的宽高，并将canvas的宽高设置为计算得到的值。

然后，通过ctx.drawImage()方法将原始图片绘制到canvas上，绘制的大小为压缩后的宽高。最后，我们调用canvas.toDataURL()方法将canvas上的内容转化为压缩后的图片数据，并设置了图片数据的格式为image/jpeg，压缩质量为0.7。您可以根据需求调整压缩质量。

步骤三：处理压缩后的图片数据

在步骤二的代码中，我们已经获取到了压缩后的图片数据compressedImageData。接下来，在此基础上进行进一步操作，例如展示压缩后的图片、上传到服务器等。以下是一个简单的示例代码：

// 显示压缩后的图片
var compressedImage = document.createElement("img");
compressedImage.src = compressedImageData;

document.body.appendChild(compressedImage);

// 上传压缩后的图片数据到服务器
var formData = new FormData();
formData.append("image", compressedImageData);

var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload", true);
xhr.send(formData);

上述代码首先使用document.createElement("img")方法创建了一个img元素，然后将压缩后的图片数据设置为src属性，并将其添加到HTML文档的body中，从而显示压缩后的图片。

然后，我们创建了一个FormData对象，并将压缩后的图片数据添加到该对象中。接着，我们使用XMLHttpRequest对象发送POST请求到服务器，将压缩后的图片数据上传。

总结

本文提供了一个使用HTML5的canvas元素对图片进行压缩的示例代码。您可以根据实际需要，调整压缩的最大宽度和最大高度，以及压缩质量等参数。同时，您可以在压缩后的图片数据上进行进一步的操作，例如展示图片或上传到服务器。

希望本文能对您有所帮助，谢谢阅读！