Изображение на холсте сразу исчезает после рисования
Я использовал 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);" />
Код 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]);
}
}
Моя проблема в том, что когда я просматриваю изображение и отображаю его на холсте, изображение загружается и сразу исчезает. Кажется, это было автоматически очищено. Где я неправ?
2 ответа
Держать myid_open_file_dialog
функция как она есть (я не знаю, используется ли она где-то).
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) {
if(event.which) {
$("#myid_registrar_signature_upload").val("");
myid_open_file_dialog('myid_registrar_signature_upload');
}
event.preventDefault();
});
function readURL(input) {debugger;
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]);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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 для кнопки, которую вы в любом случае нажмете...:)):
$("#myid_registrar_signature_upload").click(function (event) {
$("#myid_registrar_signature_upload").val("");
//myid_open_file_dialog('myid_registrar_signature_upload');
});