Question

我尝试使用canvas方法调整图像大小。然后我获取ArrayBuffer并使用它来上传新图像。这是我的调整大小方法。

function resizeImage(img) {
  var perferedWidth = 160;
  var ratio = perferedWidth / img.width;
  var $canvas = $("#canvasTest");
  var canvas = $("#canvasTest")[0];
  canvas.width = img.width * ratio;
  canvas.height = img.height * ratio;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0,0,canvas.width, canvas.height);
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data.buffer;
  return imageData;
}

问题是图像上传后，它只是一张空白图片。我没有做正确的事情，因为imageData没有给我一个有效的缓冲区。我知道它无效，因为当我将imageData转换为base64字符串时，它不是有效的base64编码图像（当我将src设置为它时，图像不会显示）。

我也知道drawImage方法正在运行，因为我在DOM中暂时创建了一个画布，并且正确地将图像绘制到该画布。

我做错了什么？谢谢！

在画布中调整大小后的空白图像

0 个答案: