Question

我一直在使用输入类型=＆＃34;文件＆＃34;浏览图像并在画布中绘制。以下是我的代码：

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]);        
    }
}

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

Answer 1

这部分你有一个递归问题：

$("#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');                   
});

<强> Fiddle

Answer 2

保持myid_open_file_dialog功能原样（我不知道它是否在某处使用）。

＆＃13;

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]);        
    }
}

＆＃13;

<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);" />

＆＃13;

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

2 个答案: