1. PingCode智库首页
  2. 百科

js图片怎么压缩

Edit1 • • 百科

js图片怎么压缩

JS图片压缩的方法包括使用Canvas、利用压缩库如compress.js、调整图片的质量和尺寸等。在这篇文章中，我们将详细介绍这些方法，并深入探讨每一种方法的具体实现和适用场景。首先，我们将通过Canvas来实现图片的压缩，这是最直接且常用的方式。接下来，我们会讨论如何利用开源的压缩库如compress.js进行图片压缩。最后，我们会介绍如何通过调整图片的质量和尺寸来实现压缩效果。

一、使用Canvas进行图片压缩

Canvas是HTML5中的一个新元素，通过JavaScript可以对图像进行各种操作，包括图像的压缩。下面我们详细介绍如何使用Canvas来压缩图片。

1.1、Canvas的基本使用

首先，我们需要创建一个Canvas元素，并将图片绘制到Canvas上，然后可以通过Canvas的toDataURL方法将图像转化为base64编码的字符串，并可以指定图像的质量。

function compressImage(file, quality, callback) {


    const reader = new FileReader();


    reader.readAsDataURL(file);


    reader.onload = function(event) {


        const img = new Image();


        img.src = event.target.result;


        img.onload = function() {


            const canvas = document.createElement('canvas');


            const ctx = canvas.getContext('2d');


            // 设置画布尺寸为图片尺寸


            canvas.width = img.width;


            canvas.height = img.height;


            // 将图片绘制到Canvas上


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


            // 将Canvas内容转为base64编码的字符串，并指定图像质量


            const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);


            // 将base64字符串转为Blob对象


            const compressedBlob = dataURLToBlob(compressedDataUrl);


            callback(compressedBlob);


        }


    }


}


function dataURLToBlob(dataUrl) {


    const arr = dataUrl.split(',');


    const mime = arr[0].match(/:(.*?);/)[1];


    const bstr = atob(arr[1]);


    let n = bstr.length;


    const u8arr = new Uint8Array(n);


    while (n--) {


        u8arr[n] = bstr.charCodeAt(n);


    }


    return new Blob([u8arr], {type: mime});


}

1.2、调整图片尺寸

除了通过调整图像的质量来压缩图片，我们还可以通过调整图像的尺寸来达到压缩效果。这在处理大图片时尤为有效。

function compressImage(file, quality, maxWidth, maxHeight, callback) {


    const reader = new FileReader();


    reader.readAsDataURL(file);


    reader.onload = function(event) {


        const img = new Image();


        img.src = event.target.result;


        img.onload = function() {


            let width = img.width;


            let height = img.height;


            if (width > maxWidth || height > maxHeight) {


                if (width / height > maxWidth / maxHeight) {


                    width = maxWidth;


                    height = Math.round(maxWidth * (img.height / img.width));


                } else {


                    height = maxHeight;


                    width = Math.round(maxHeight * (img.width / img.height));


                }


            }


            const canvas = document.createElement('canvas');


            const ctx = canvas.getContext('2d');


            canvas.width = width;


            canvas.height = height;


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


            const compressedDataUrl = canvas.toDataURL('image/jpeg', quality);


            const compressedBlob = dataURLToBlob(compressedDataUrl);


            callback(compressedBlob);


        }


    }


}

二、使用压缩库

在复杂的项目中，使用第三方库可以大大简化我们的工作。这里我们介绍如何使用compress.js库来压缩图片。

2.1、安装和使用compress.js

首先，我们需要安装compress.js库。可以使用npm进行安装：

npm install compress.js

然后在项目中引入并使用该库：

import Compress from 'compress.js';


const compress = new Compress();


const files = [...fileInputElement.files];


compress.compress(files, {


    size: 4, // 最大大小为4MB


    quality: 0.75, // 压缩质量


    maxWidth: 1920,


    maxHeight: 1920,


    resize: true


}).then((data) => {


    const img = data[0];


    const base64str = img.data;


    const imgExt = img.ext;


    const file = Compress.convertBase64ToFile(base64str, imgExt);


    console.log(file);


});

2.2、自定义压缩参数

compress.js允许我们通过自定义参数来控制图片压缩的效果。例如，我们可以设置最大文件大小、压缩质量、最大宽度和高度等。

compress.compress(files, {


    size: 2, // 最大大小为2MB


    quality: 0.8, // 压缩质量


    maxWidth: 1600,


    maxHeight: 1600,


    resize: true


}).then((data) => {


    // 处理压缩后的图片数据


});

三、调整图片质量和尺寸

通过调整图片的质量和尺寸，我们也可以实现图片的压缩。下面介绍如何通过调整图片的质量和尺寸来实现压缩效果。

3.1、调整图片质量

调整图片质量是实现图片压缩的直接方法之一。通过降低图片的质量，可以有效减少图片的大小。

function adjustImageQuality(file, quality, callback) {


    const reader = new FileReader();


    reader.readAsDataURL(file);


    reader.onload = function(event) {


        const img = new Image();


        img.src = event.target.result;


        img.onload = function() {


            const canvas = document.createElement('canvas');


            const ctx = canvas.getContext('2d');


            canvas.width = img.width;


            canvas.height = img.height;


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


            const adjustedDataUrl = canvas.toDataURL('image/jpeg', quality);


            const adjustedBlob = dataURLToBlob(adjustedDataUrl);


            callback(adjustedBlob);


        }


    }


}

3.2、调整图片尺寸

调整图片尺寸是另一种常用的图片压缩方法。通过缩小图片的尺寸，可以显著减少图片的大小。

function adjustImageSize(file, maxWidth, maxHeight, callback) {


    const reader = new FileReader();


    reader.readAsDataURL(file);


    reader.onload = function(event) {


        const img = new Image();


        img.src = event.target.result;


        img.onload = function() {


            let width = img.width;


            let height = img.height;


            if (width > maxWidth || height > maxHeight) {


                if (width / height > maxWidth / maxHeight) {


                    width = maxWidth;


                    height = Math.round(maxWidth * (img.height / img.width));


                } else {


                    height = maxHeight;


                    width = Math.round(maxHeight * (img.width / img.height));


                }


            }


            const canvas = document.createElement('canvas');


            const ctx = canvas.getContext('2d');


            canvas.width = width;


            canvas.height = height;


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


            const adjustedDataUrl = canvas.toDataURL('image/jpeg', 1.0);


            const adjustedBlob = dataURLToBlob(adjustedDataUrl);


            callback(adjustedBlob);


        }


    }


}

四、使用现代浏览器的API

现代浏览器提供了一些原生API，可以帮助我们更方便地进行图片压缩。比如，使用createImageBitmap和OffscreenCanvas。

4.1、createImageBitmap和OffscreenCanvas

使用createImageBitmap和OffscreenCanvas可以实现高效的图片压缩，这种方法特别适合在Web Worker中运行，从而避免阻塞主线程。

async function compressImageWithBitmap(file, quality, maxWidth, maxHeight) {


    const bitmap = await createImageBitmap(file);


    const offscreenCanvas = new OffscreenCanvas(maxWidth, maxHeight);


    const ctx = offscreenCanvas.getContext('2d');


    let width = bitmap.width;


    let height = bitmap.height;


    if (width > maxWidth || height > maxHeight) {


        if (width / height > maxWidth / maxHeight) {


            width = maxWidth;


            height = Math.round(maxWidth * (bitmap.height / bitmap.width));


        } else {


            height = maxHeight;


            width = Math.round(maxHeight * (bitmap.width / bitmap.height));


        }


    }


    offscreenCanvas.width = width;


    offscreenCanvas.height = height;


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


    const blob = await offscreenCanvas.convertToBlob({ type: 'image/jpeg', quality: quality });


    return blob;


}

五、使用Web Worker进行图片压缩

在进行大量图片压缩操作时，使用Web Worker可以避免阻塞主线程，提高用户体验。

5.1、创建Web Worker

首先，我们需要创建一个Web Worker脚本，用于处理图片压缩操作。

// worker.js


self.onmessage = async function(event) {


    const { file, quality, maxWidth, maxHeight } = event.data;


    const blob = await compressImageWithBitmap(file, quality, maxWidth, maxHeight);


    self.postMessage(blob);


}


async function compressImageWithBitmap(file, quality, maxWidth, maxHeight) {


    const bitmap = await createImageBitmap(file);


    const offscreenCanvas = new OffscreenCanvas(maxWidth, maxHeight);


    const ctx = offscreenCanvas.getContext('2d');


    let width = bitmap.width;


    let height = bitmap.height;


    if (width > maxWidth || height > maxHeight) {


        if (width / height > maxWidth / maxHeight) {


            width = maxWidth;


            height = Math.round(maxWidth * (bitmap.height / bitmap.width));


        } else {


            height = maxHeight;


            width = Math.round(maxHeight * (bitmap.width / bitmap.height));


        }


    }


    offscreenCanvas.width = width;


    offscreenCanvas.height = height;


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


    const blob = await offscreenCanvas.convertToBlob({ type: 'image/jpeg', quality: quality });


    return blob;


}

5.2、主线程调用Web Worker

在主线程中，我们可以创建Web Worker并发送图片压缩的参数给它。

const worker = new Worker('worker.js');


worker.onmessage = function(event) {


    const compressedBlob = event.data;


    console.log('Compressed Blob:', compressedBlob);


}


function compressImageInWorker(file, quality, maxWidth, maxHeight) {


    worker.postMessage({ file, quality, maxWidth, maxHeight });


}

六、总结

图片压缩是Web开发中常见的需求，尤其在处理用户上传图片时更为重要。本文详细介绍了使用Canvas进行图片压缩、利用压缩库compress.js、调整图片质量和尺寸、使用现代浏览器API、以及使用Web Worker进行图片压缩等方法。希望通过本文的介绍，能够帮助大家更好地理解和实现图片压缩功能。

在实际项目中，如果需要进行团队协作和项目管理，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们可以帮助团队更高效地协作和管理项目。

相关问答FAQs：

1. 如何使用JavaScript压缩图片？

JavaScript可以通过使用canvas元素和toDataURL()方法来压缩图片。您可以使用以下代码示例：

// 创建一个新的Image对象
var img = new Image();

// 设置图片的src属性
img.src = 'your_image_url';

// 当图片加载完成后执行以下代码
img.onload = function() {
  // 创建一个canvas元素
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');

  // 设置canvas的宽度和高度
  canvas.width = img.width;
  canvas.height = img.height;

  // 在canvas上绘制原始图片
  ctx.drawImage(img, 0, 0, img.width, img.height);

  // 使用toDataURL方法将canvas转换为压缩后的图片
  var compressedImg = canvas.toDataURL('image/jpeg', 0.8);

  // 在此处使用压缩后的图片
  // ...
};

2. 如何使用JavaScript压缩多个图片？

如果您需要批量压缩多个图片，您可以使用循环来处理每个图片。以下是一个示例代码：

// 假设您有一个图片URL的数组
var imageUrls = ['url1', 'url2', 'url3'];

// 循环处理每个图片
imageUrls.forEach(function(url) {
  var img = new Image();
  img.src = url;
  img.onload = function() {
    // 压缩图片的代码...
  };
});

3. 如何在保持图片质量的同时压缩图片大小？

要在保持图片质量的同时压缩图片大小，您可以调整toDataURL()方法的第二个参数。该参数表示图片的压缩质量，取值范围为0到1。较低的值会导致更高的压缩率，但可能会影响图片的质量。以下是一个示例代码：

// 在toDataURL()方法中使用较低的压缩质量值
var compressedImg = canvas.toDataURL('image/jpeg', 0.5);

请注意，压缩质量的最佳值因图片而异，您可以尝试不同的值来找到最适合您的需求的压缩质量。

文章包含AI辅助创作，作者：Edit1，如若转载，请注明出处：https://docs.pingcode.com/baike/3833291

赞 (0)
Edit1Edit1
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部