我一直在使用 input type="file"来浏览图像并将其绘制在 Canvas 中。下面是我的代码:
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);" />
Javascript 代码:
function myid_open_file_dialog(elemId)
{
var elem = document.getElementById(elemId);
if(elem && document.createEvent) {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, false);
elem.dispatchEvent(evt);
}
}
$("#myid_registrar_signature_upload").click(function (event) {
$("#myid_registrar_signature_upload").val("");
myid_open_file_dialog('myid_registrar_signature_upload');
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var image = new Image();
reader.onload = function (e){
image.src = e.target.result;
$('#img_registrar_signature')
.attr('src', e.target.result);
image.onload = function() {
var canvas= document.getElementById("myid_registrar_signature");
var context = canvas.getContext('2d');
img_registrar = document.getElementById("img_registrar_signature");
context.drawImage(this,0,0, this.width, this.height, 0, 0, canvas.width, canvas.height);
}
};
reader.readAsDataURL(input.files[0]);
}
}
我的问题是当我浏览图像并将其显示到我的 Canvas 上时,图像被加载并立即消失。好像自动清除了。我哪里出错了?
最佳答案
你在这部分有一个递归问题:
$("#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');
});
关于javascript - drawimage 后 Canvas 中的图像立即消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29248169/