揭开canvas神秘面纱：图片压缩，了解base64原理！

2023-12-24 15:18:41

前端图片上传是一个永恒的话题，尤其对于大图片的上传，它不仅会增加服务器压力，还会降低用户体验。为了解决这一难题，canvas技术应运而生。

canvas是一种HTML5元素，它允许我们在网页上绘制图形。但canvas不仅仅局限于绘图，它还可以在图片压缩和base64转换中发挥神奇的作用。

canvas压缩原理

canvas压缩图片的原理非常简单，它通过创建一个新的canvas元素，然后将原图片绘制到新的canvas元素上，最后使用新的canvas元素的toDataURL()方法将图片转换为base64字符串。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0);

  const dataURL = canvas.toDataURL('image/jpeg', 0.7);
};

image.src = 'path/to/image.jpg';

在上面的代码中，我们首先创建了一个新的canvas元素，然后获取它的上下文对象。接下来，我们创建一个新的Image对象，并为其指定要压缩的图片路径。

当图片加载完成后，我们使用drawImage()方法将图片绘制到canvas元素上。最后，我们使用toDataURL()方法将canvas元素转换为base64字符串。

base64转换原理

base64是一种编码格式，它可以将二进制数据转换为ASCII字符。这使得base64非常适合在网络上传输二进制数据，例如图片。

canvas的toDataURL()方法可以将canvas元素转换为base64字符串。这使得我们可以轻松地将图片转换为base64字符串，以便在网络上传输或存储。

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();

image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;

  ctx.drawImage(image, 0, 0);

  const dataURL = canvas.toDataURL('image/jpeg');

  // 发送base64字符串到服务器
};

image.src = 'path/to/image.jpg';