使用CanvasRenderingContext2D的drawImage方法时触发TypeError错误

这个错误其实很好理解——你直接传给drawImage()的e.target.files[0]是一个File对象，但Canvas的这个方法根本不接受File类型！它只认HTMLImageElement、HTMLCanvasElement、HTMLVideoElement或者ImageBitmap这些可视化的元素/对象。

要解决这个问题，你需要先把File对象转换成HTMLImageElement（也就是我们常用的<img>对应的DOM对象），等图片加载完成后再传入你的尺寸标准化函数。下面是具体的实现步骤和代码：

步骤1：监听文件选择事件，获取File对象 #

首先还是从input元素获取用户选择的图片文件，这部分你已经做对了：

const imageInput = document.getElementById('your-image-input-id');
imageInput.addEventListener('change', function(e) {
  const selectedFile = e.target.files[0];
  if (!selectedFile || !selectedFile.type.startsWith('image/')) {
    console.warn('请选择有效的图片文件');
    return;
  }
  // 接下来处理这个File对象
  convertFileToImage(selectedFile);
});

步骤2：将File对象转为HTMLImageElement #

这里有两种常用的方法，选哪种都可以：

方法A：使用FileReader（兼容性好） #

function convertFileToImage(file) {
  const img = new Image();
  const reader = new FileReader();
  
  reader.onload = function(event) {
    img.src = event.target.result; // 将File转为DataURL赋值给图片src
  };
  
  // 等待图片加载完成后再调用标准化函数
  img.onload = function() {
    normalizeImageSize(img); // 现在传入的是HTMLImageElement，符合要求
  };
  
  reader.readAsDataURL(file);
}

方法B：使用URL.createObjectURL（更高效） #

这个方法不需要读取整个文件内容，性能更好，而且代码更简洁：

function convertFileToImage(file) {
  const img = new Image();
  img.src = URL.createObjectURL(file); // 生成临时URL指向File对象
  
  img.onload = function() {
    normalizeImageSize(img);
    // 记得释放临时URL，避免内存泄漏
    URL.revokeObjectURL(img.src);
  };
}

步骤3：你的标准化尺寸函数（修正后） #

现在source_img参数是合法的HTMLImageElement，drawImage()就能正常工作了：

function normalizeImageSize(source_img) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 示例基准值：最大宽800，最大高600，你可以根据需求修改
  const maxWidth = 800;
  const maxHeight = 600;
  let newWidth = source_img.width;
  let newHeight = source_img.height;

  // 计算保持宽高比的缩放尺寸
  if (newWidth > maxWidth) {
    newHeight *= maxWidth / newWidth;
    newWidth = maxWidth;
  }
  if (newHeight > maxHeight) {
    newWidth *= maxHeight / newHeight;
    newHeight = maxHeight;
  }

  // 设置Canvas尺寸并绘制图片
  canvas.width = newWidth;
  canvas.height = newHeight;
  ctx.drawImage(source_img, 0, 0, newWidth, newHeight);

  // 如果需要导出处理后的图片，可以用下面的方法
  // const processedImage = canvas.toDataURL('image/png'); // 转为DataURL
  // canvas.toBlob(function(blob) { /* 转为Blob对象 */ }, 'image/jpeg', 0.9);
}

关键注意点 #

• 一定要等待img.onload事件触发后再处理图片！如果图片还没加载完成就调用drawImage()，同样会报错。
• 用URL.createObjectURL的时候，记得在图片加载完成后调用URL.revokeObjectURL释放资源，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Hassan Baig