canvas压缩图片 出现黑边如何解决

当使用 Canvas 压缩图片时，可能会出现黑边的情况，这是由于 Canvas 绘制时会对图片进行一定的裁剪导致的。解决这个问题的方法是在 Canvas 绘制之前，先将图片绘制在一个与原图大小相同的临时 Canvas 上，然后再将临时 Canvas 上的图片绘制到目标 Canvas 上。这样可以保证图片不会被裁剪，避免出现黑边。

以下是实现代码：

// 创建临时 Canvas
var tempCanvas = document.createElement('canvas');
var tempCtx = tempCanvas.getContext('2d');

// 加载图片，并在临时 Canvas 上绘制
var img = new Image();
img.onload = function() {
  tempCanvas.width = img.width;
  tempCanvas.height = img.height;
  tempCtx.drawImage(img, 0, 0, img.width, img.height);

  // 在目标 Canvas 上绘制临时 Canvas 上的图片
  var canvas = document.getElementById('target-canvas');
  var ctx = canvas.getContext('2d');
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(tempCanvas, 0, 0, img.width, img.height);
};
img.src = 'your-image-url.jpg';

这样可以避免出现黑边，同时保证压缩后的图片质量。