Javascript 画布中的图像在drawimage之后立即消失

我一直在使用input type=“file”浏览图像并在画布中绘制它。下面是我的代码：

HTML代码：

<img id="img_registrar_signature" src="" alt="ID Photo" hidden />
<canvas id='myid_registrar_signature' width='500' height='100'></canvas>
<input type="file" id="myid_registrar_signature_upload" onChange="readURL(this);" />

---

我的问题是，当我浏览图像并将其显示到画布时，图像会被加载并立即消失。似乎它是自动清除的。我哪里出错了？

您在这一部分遇到了递归问题：

$("#myid_registrar_signature_upload").click(function (event) {
    $("#myid_registrar_signature_upload").val("");
    myid_open_file_dialog('myid_registrar_signature_upload');                   
});

这将生成一个click，该click反过来调用相同的方法，直到堆栈用完（浏览器中止）

注释掉下面的一行可以使它工作，但您需要根据您试图实现的目标找到一种解决方法（对于您将要单击的按钮，应该不需要调用单击事件……）：

---

保持

myid\u open\u file\u对话框

功能不变（我不知道它是否在某处使用）

function myid\u open\u file\u对话框（elemId）
{
var elem=document.getElementById（elemId）；
if（elem&&document.createEvent）{
var evt=document.createEvent（“MouseEvents”）；
evt.initEvent（“单击”，真，假）；
要素调度事件（evt）；
}       
}
$（“#我的ID#注册人#签名#上传”）。单击（函数（事件）{
if（event.which）{
$（“#我的ID#注册人#签名#上传”）.val（“”）；
myid_打开文件_对话框（“myid_注册人_签名_上传”）；
}
event.preventDefault（）；
});
函数readURL（输入）{调试器；
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
var image=新图像（）；
reader.onload=函数（e）{
image.src=e.target.result；
$（“img登记员签名”）
.attr（'src'，e.target.result）；
image.onload=函数（）{
var canvas=document.getElementById（“myid\u registrator\u签名”）；
var context=canvas.getContext（'2d'）；
img_registrator=document.getElementById（“img_registrator_签名”）；
context.drawImage（this，0,0，this.width，this.height，0,0，canvas.width，canvas.height）；
}                
};
reader.readAsDataURL（input.files[0]）；
}
}

对我来说很好。但是您确实有一个输入错误，canvas的close标记缺少反斜杠，即。

。控制台中有错误吗？任何导致画布调整大小的事件？@KenFyrstenberg感谢Ken，控制台不会抛出错误，但当我尝试逐行执行代码时，图像不会消失。我错过了什么？@NK谢谢你给我一个主意。如何使其不递归？：）

$("#myid_registrar_signature_upload").click(function (event) {
    $("#myid_registrar_signature_upload").val("");
    myid_open_file_dialog('myid_registrar_signature_upload');                   
});

$("#myid_registrar_signature_upload").click(function (event) {
    $("#myid_registrar_signature_upload").val("");
    //myid_open_file_dialog('myid_registrar_signature_upload');                   
});