使用File Reader上传文件后Canvas显示图片失败求助

你的代码核心问题是图片加载事件名拼写错误：JavaScript的事件名是大小写敏感的，你写的tempImageStore.onLoad应该改为tempImageStore.onload（注意load全小写）。这个错误导致图片加载完成后，绘制Canvas的回调函数根本没执行，所以上传后Canvas没显示图片，也不会有控制台报错（因为只是绑定了一个不存在的事件，浏览器不会抛出错误）。

修正后的完整代码如下：

var canvas = document.getElementById("ourCanvas"),
context = canvas.getContext('2d'),
uploadedFile = document.getElementById('uploaded-file');

window.addEventListener('DOMContentLoaded', initImageLoader);

function initImageLoader() {
  uploadedFile.addEventListener('change', handleManualUploadedFiles);
  function handleManualUploadedFiles(ev){
    var file = ev.target.files[0];
    handleFile(file);
  }
}

function handleFile(file) {
  var imageType = /image.*/;

  if(file.type.match(imageType)){
    var reader = new FileReader();

    reader.onloadend = function(event) {
      var tempImageStore = new Image();

      // 修正事件名为onload（全小写）
      tempImageStore.onload = function(ev){
        canvas.height = ev.target.height;
        canvas.width = ev.target.width;
        context.drawImage(ev.target, 0, 0);
      }
      tempImageStore.src = event.target.result;
    }

    reader.readAsDataURL(file);
  }
}

额外注意点：

• 确保你的HTML中存在id为ourCanvas的<canvas>元素，以及id为uploaded-file的<input type="file">元素
• 如果需要限制Canvas的最大尺寸（避免图片过大撑爆页面），可以在绘制时按比例缩放，比如：

  tempImageStore.onload = function(ev){
    const maxSize = 800;
    let width = ev.target.width;
    let height = ev.target.height;
    if(width > maxSize || height > maxSize){
      const ratio = Math.min(maxSize/width, maxSize/height);
      width *= ratio;
      height *= ratio;
    }
    canvas.width = width;
    canvas.height = height;
    context.drawImage(ev.target, 0, 0, width, height);
  }
  

内容的提问来源于stack exchange，提问作者Riszky Hermawan