Javascript 从输入字段拍摄照片并转换为base64

我想能够从PC拍摄照片并上传到服务器。到目前为止，我已经成功地从div中拍摄了一张照片，将其转换为base64并发送到服务器端。这是毫无问题的

我的HTML：

  <img src="AvatarIMG/Goofy.jpg" id="img" width="100" height="100">

 <input id="uploadImage" type="file" name="myPhoto" />

然而，我想能够从我的本地计算机上选择一张图片，然后上传它，但到目前为止没有运气。。。这就是我尝试过的

我的HTML：

  <img src="AvatarIMG/Goofy.jpg" id="img" width="100" height="100">

 <input id="uploadImage" type="file" name="myPhoto" />

---

请提供一些帮助。

问题是您需要等待

img.onload

，因为您试图在图像加载之前将其绘制到画布上

$（'but#upload'）。单击（函数（）{
var img=document.createElement（“img”）；
var of reader=new FileReader（）；
readAsDataURL（document.getElementById（“uploadImage”）.files[0]）；
oFReader.onload=函数（OFRENT）{
img.src=ofretent.target.result；
};
img.onload=函数（）{
var c=document.createElement（'canvas'）；
c、 高度=img.自然高度；
c、 宽度=img.自然宽度；
var ctx=c.getContext（'2d'）；
ctx.drawImage（img，0，0，c.宽度，c.高度，0，0，c.宽度，c.高度）；
var base64String=c.toDataURL（）；
console.log（base64String）；
//上传你的东西
}
返回false；
});

Hay我的伙计，这很有效。。。最后谢谢你，伙计。如果不是太多，我能再请你帮我一个忙吗？如何使我发送的图片始终保持大小、宽度：20、高度20。如果不是太多的话。无论如何，谢谢你，祝你有一个愉快的一天，伙计。在第一个例子中，只要改变这个。。。c、 高度=20；c、 宽度=20；ctx.drawImage（img，0，0，img.naturalWidth，img.naturalHeight，0，0，20，20，）；现在上传的图片将是20 x 20；