图片处理

截图

• 通过 canvas 导出 base64 编码图片

html-to-image

• dom-to-image

dom-to-image

• html2canvas

html2canvas

压缩图片

Javascript

export async function cropAndCompressImage(url, w, h, format = 'image/jpeg', quality = 0.8) {
  return new Promise(resolve => {
    // 创建一个 Image 对象
    const image = new Image();
    // 设置 Image 的 src 属性
    image.src = url;

    image.setAttribute('crossorigin', 'anonymous');
    // 当 Image 加载完成后执行
    image.onload = function () {
      // 获取图片的原始宽度和高度
      const originalWidth = this.naturalWidth;
      const originalHeight = this.naturalHeight;

      // 计算图片的宽高比和目标宽高比
      const aspectRatio = originalWidth / originalHeight;
      const targetAspectRatio = w / h;

      // 初始化 Canvas 的宽度和高度
      let canvasWidth = originalWidth;
      let canvasHeight = originalHeight;

      // 如果图片的宽高比大于目标宽高比，则以目标宽度为准进行等比缩放
      if (aspectRatio > targetAspectRatio) {
        canvasWidth = w;
        canvasHeight = w / aspectRatio;
        // 如果图片的宽高比小于目标宽高比，则以目标高度为准进行等比缩放
      } else {
        canvasWidth = h * aspectRatio;
        canvasHeight = h;
      }

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

      // 设置 Canvas 的宽度和高度
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;

      // 获取 Canvas 的 2D 绘图上下文
      const context = canvas.getContext('2d');
      // 在 Canvas 上绘制图片
      context.drawImage(this, 0, 0, originalWidth, originalHeight, 0, 0, canvasWidth, canvasHeight);
      let source = canvas.toDataURL(format, quality);
      // console.log('compress url', source);
      resolve(source);
    };
    image.onerror = () => {
      resolve(null);
    };
  });
}

获取图片size

1. naturalWidth：这是一个只读属性，用于获取图像的原始宽度，即图像的实际像素宽度。无论图像是否被缩放，naturalWidth 始终返回图像的原始像素宽度。如果图像未加载完成，它的值可能为零。

2. width：这是一个属性，用于设置或获取图像元素的显示宽度。当你设置图像的 width 属性时，它会影响图像在页面上的显示大小，但不会改变图像的原始像素宽度。如果你获取 width 属性的值，它将返回图像元素在页面上的显示宽度，而不是图像的原始宽度。

Javascript

// 获取图片原始尺寸
export async function getImageRawSize(link) {
  return new Promise(resolve => {
    const mediaElement = new Image();
    mediaElement.src = link;
    mediaElement.onload = () => {
      resolve({ width: mediaElement.naturalWidth, height: mediaElement.naturalHeight });
    };
    mediaElement.onerror = () => {
      resolve(null);
    };
  });
}