拥抱创意：运用Canvas在前端指定大小缩放比例压缩图片

2023-09-30 21:03:45

前言

随着移动设备拍照像素的不断提高，图片文件的大小也随之增大，这给移动端应用的图片上传带来了挑战，因为许多应用都有文件大小限制，特别是对于社交媒体平台和即时通讯工具，图片大小通常被限制在2MB以内。为了解决这个问题，我们需要一种方法来压缩图片，使其满足文件大小限制，同时保持良好的视觉质量。

利用Canvas实现图片压缩

在前端，我们可以使用HTML5 Canvas元素来实现图片压缩。Canvas是一个内置于浏览器的绘图表面，它允许我们使用JavaScript在浏览器中绘制图像。我们可以使用Canvas来对图片进行缩放、裁剪、调整大小等操作，从而实现图片压缩。

指定大小压缩图片

在指定大小压缩图片时，我们会先将图片加载到Canvas中，然后使用Canvas的drawImage()方法将图片绘制到Canvas上，同时指定输出的宽高。这样就可以将图片压缩到指定的大小。

// 获取图片元素
const image = document.getElementById('myImage');

// 创建Canvas元素
const canvas = document.createElement('canvas');

// 设置Canvas的宽高
canvas.width = 640;
canvas.height = 480;

// 将图片绘制到Canvas上
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, 640, 480);

// 将Canvas转换为base64编码的图片数据
const dataURL = canvas.toDataURL('image/jpeg');

// 保存压缩后的图片
const link = document.createElement('a');
link.href = dataURL;
link.download = 'compressedImage.jpg';
link.click();

缩放比例压缩图片

在缩放比例压缩图片时，我们会先将图片加载到Canvas中，然后使用Canvas的scale()方法将图片缩放指定比例。这样就可以将图片压缩到指定的比例。

// 获取图片元素
const image = document.getElementById('myImage');

// 创建Canvas元素
const canvas = document.createElement('canvas');

// 获取图片的原始宽高
const originalWidth = image.width;
const originalHeight = image.height;

// 设置缩放比例
const scale = 0.5;

// 将Canvas的宽高设置为缩放后的宽高
canvas.width = originalWidth * scale;
canvas.height = originalHeight * scale;

// 将图片绘制到Canvas上
const ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, originalWidth, originalHeight, 0, 0, canvas.width, canvas.height);

// 将Canvas转换为base64编码的图片数据
const dataURL = canvas.toDataURL('image/jpeg');

// 保存压缩后的图片
const link = document.createElement('a');
link.href = dataURL;
link.download = 'compressedImage.jpg';
link.click();