js 压缩 图片大小

在JavaScript中，可以使用Canvas API来压缩图片大小。下面是一个简单的示例代码：

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

// 设置图片源
img.src = '原始图片路径';

// 当图片加载完成后执行回调函数
img.onload = function() {
  // 创建一个canvas元素
  var canvas = document.createElement('canvas');

  // 设置canvas的宽高与图片一致
  canvas.width = img.width;
  canvas.height = img.height;

  // 获取2D上下文
  var ctx = canvas.getContext('2d');

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

  // 压缩图片
  var compressedDataUrl = canvas.toDataURL('image/jpeg', 0.5); // 第二个参数为压缩质量，范围为0到1

  // 压缩后的图片数据URL
  console.log('压缩后的图片数据URL:', compressedDataUrl);
};

上述代码中，首先创建一个Image对象，并设置其src属性为原始图片的路径。然后，在图片加载完成后，创建一个canvas元素，并设置其宽高与原始图片一致。接着，获取canvas的2D上下文，并使用drawImage方法将原始图片绘制到canvas上。最后，使用toDataURL方法将canvas中的图片数据压缩为指定格式（这里是JPEG）和质量，并返回压缩后的图片数据URL。

需要注意的是，压缩质量参数的取值范围为0到1，0表示最低质量，1表示最高质量。