Javascript html画布可以绘制上传的图像吗？

我正在尝试使用javascript创建一个上传图像大小调整功能。但是，使用filereader将上载文件转换为base64，不会在画布上显示任何图像。相反，如果我使用一个外部图像，并将其转换为base64，该函数的工作方式就像一个符咒。那会怎么样？有什么问题

这是我的代码，很长

//When changes are made to our input field
   $ ('#input-file').change (function (evt) { 
     //The selected file is recovered
     var file = evt.target.files [0];

     //And processFiles function that will resize and send the file to the server is started
     processFiles (file);
   });

   processFiles = function (file) {
     var reader = new FileReader ();

     //When the file has been completely read, the function will be executed ResizeImage
     reader.onloadend = function (evt) {
       //Reader.result represents our base64 encoded file
       ResizeImage (reader.result, file);
     };

     //Allows you to play the file
     reader.readAsDataURL (file);
   };

   ResizeImage = function (data, file) {
     var fileType = file.type,
         maxWidth = 960
         maxHeight = 960;


     //The file is loaded in a <img>
     var image = new Image ();
     image.src = data;

     //Once the image is loaded, the following operations are performed
     image.onload = function () {
       //The ImageSize function calculates the final file size keeping the proportions
       var size = ImageSize (image.width, image.height, maxWidth, maxHeight)
           ImageWidth = size.width,
           imageHeight = size.height,

           //We create a canvas element 
           //canvas = document.createElement ('canvas');
           canvas=document.getElementById('hahaha')

       canvas.width = ImageWidth;
       canvas.height = imageHeight;

       var ctx = canvas.getContext ("2d");

       //DrawImage will allow resizing the image
       //This is our image here
       var img=document.getElementById('haha')
       ctx.drawImage (img, 0, 0, ImageWidth, imageHeight);

       //Allows you to export the contents of the canvas element (our resized image) base64
       data = canvas.toDataURL(fileType);
       alert(data)

       //All the elements used for resizing is suppressed
       delete image;
       delete canvas;

       //SubmitFile (data);
     }
   };


   //Function to resize an image keeping the proportions
   ImageSize = function (width, height, maxWidth, maxHeight) {
     var newWidth = width, 
         newHeight = height;

     if (width> height) {
       if (width> maxWidth) {
         newHeight  = maxWidth / width;
         newWidth = maxWidth;
       }
     else {}
       if (height> maxHeight) {
          newWidth = maxHeight / height;
         newHeight = maxHeight;
       }
     }

     return {width: newWidth, height: newHeight};
   };

//当对输入字段进行更改时
$（'#输入文件'）.change（函数（evt）{
//将恢复选定的文件
var file=evt.target.files[0]；
//启动了将调整文件大小并将其发送到服务器的processFiles功能
处理文件（文件）；
});
processFiles=函数（文件）{
var reader=newfilereader（）；
//当文件完全读取后，将执行函数ResizeImage
reader.onloadend=函数（evt）{
//result表示我们的base64编码文件
调整图像大小（reader.result，文件）；
};
//允许您播放该文件
reader.readAsDataURL（文件）；
};
ResizeImage=函数（数据、文件）{
var fileType=file.type，
最大宽度=960
最大高度=960；
//该文件以高度（1）加载{
如果（宽度>最大宽度）{
新高度=最大宽度/宽度；
newWidth=maxWidth；
}
else{}
如果（高度>最大高度）{
newWidth=最大高度/高度；
newHeight=maxHeight；
}
}
返回{width:newWidth，height:newHeight}；
};

你可以参考这把小提琴，了解一些想法。这可能对你有帮助。这是一把小提琴，我只是为了好玩而实现的，用来生成用户选择的图像的缩略图。它使用FileReader API选择文件，然后将缩略图加载到画布上

就我个人而言，我更倾向于使用经典JS而不是使用jQuery，并且使用了很多事件处理程序

oFileIn.addEventListener()
oFileReader.addEventListener()
oImage.addEventListener()

---

你可以参考这把小提琴，了解一些想法。这可能对你有帮助。这是一把小提琴，我只是为了好玩而实现的，用来生成用户选择的图像的缩略图。它使用FileReader API选择文件，然后将缩略图加载到画布上

就我个人而言，我更倾向于使用经典JS而不是使用jQuery，并且使用了很多事件处理程序

oFileIn.addEventListener()
oFileReader.addEventListener()
oImage.addEventListener()

---

这很奇怪，尤其是我们的大部分代码看起来很像。我不知道我的哪里出了问题，但你的工作很好。谢谢你的帮助！你不知道你帮了我多少忙！这很奇怪，尤其是我们的大部分代码看起来很像。我不知道我的哪里出了问题，但你的工作很好。谢谢你的帮助！你不知道你帮了我多少忙！