旋转图片并保存为base64/blob格式

2023-10-20 01:03:44

您是否曾经遇到过需要旋转图像的情况？也许您正在尝试在页面上显示图像，但它却以错误的方向显示。或者，您可能希望将图像保存为base64或blob格式，以便稍后在其他地方使用它。

无论出于何种原因，本指南将向您展示如何使用JavaScript/HTML5来旋转图像并将其保存为base64或blob格式。

旋转图像

要旋转图像，您首先需要创建一个画布元素。然后，您可以使用getContext()方法来获取画布的上下文。这将允许您在画布上绘制图像。

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

接下来，您需要将图像加载到画布上。您可以使用drawImage()方法来完成此操作。

const image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);
};
image.src = 'image.png';

现在，您可以使用rotate()方法来旋转图像。该方法接受一个角度参数，以弧度为单位。

ctx.rotate(Math.PI / 2);

最后，您可以使用toDataURL()方法将图像保存为base64格式。

const base64Image = canvas.toDataURL();

您也可以使用toBlob()方法将图像保存为blob格式。

canvas.toBlob(function(blob) {
  // Do something with the blob
});

显示旋转后的图像

要显示旋转后的图像，您可以使用<img>元素。

<img src="data:image/png;base64,${base64Image}" alt="Rotated image">

您还可以使用<canvas>元素来显示旋转后的图像。

<canvas id="canvas" width="200" height="200"></canvas>

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

ctx.drawImage(image, 0, 0);

选择、压缩和转换图像

现在我们已经了解了如何旋转图像，让我们看看如何选择、压缩和转换图像。

首先，您需要创建一个文件输入元素。这将允许用户选择要旋转的图像。

<input type="file" accept="image/*" id="file-input">

接下来，您需要创建一个用于压缩图像的函数。您可以使用canvas元素来完成此操作。

function compressImage(image, width, height) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

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

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

  return canvas.toDataURL();
}

最后，您需要创建一个用于将图像转换为base64或blob格式的函数。

function convertImage(image, format) {
  if (format === 'base64') {
    return canvas.toDataURL();
  } else if (format === 'blob') {
    return canvas.toBlob();
  }
}