Question

我有以下代码：

  $(":file").change(function () {
                 if (this.files && this.files[0]) {
                console.log(this.files[0]);
                        var reader = new FileReader();
                        reader.onload = imageIsLoaded;
                        reader.readAsDataURL(this.files[0]);

                //run after reader function is compeleted 

                var a = document.body.appendChild(
                    document.createElement("a")
                    );
                a.download = "export.svg";
                a.href = "data:image/svg+xml," + $('#ss').find('svg')[0];
                a.innerHTML = "[Export conent]";
                }
           });

我希望在完成顶部后运行注释下方的部分。

代码实际上正在读取svg并将其嵌入到html中。完成后，我需要生成一个下载按钮，但似乎代码的两个部分都在同步运行，因为$('#ss').find('svg')[0]即将到来undefined。知道怎么做吗？

  function imageIsLoaded(e) {
            var ret = atob(e.target.result.split(',')[1]);
            $('#ss').html(ret);

            var placement_ids = [];

            //($('#PLACEMENTS > g').length);

            $('#PLACEMENTS > g').each(function(){
                id = $(this).attr('id');

                if (id.indexOf("_1_") >= 0 ){
                  id = id.replace("_1_", "")
                }

                if (id.length <= 3){                        
                id = [id.slice(0, 2), "0", id.slice(2)].join('');   
                }

                $(this).attr('id',id);


                rect = $(this).find('rect');
                rect_id = rect.attr('id');

                rect_id = rect_id.replace("_x5F", "");

                rect_id = rect_id.replace("_3_", "");


                if (rect_id.length <= 8){                       
                rect_id = [rect_id.slice(0, 2), "0", rect_id.slice(2)].join('');    
                }

                rect.attr('id', rect_id);

                rect_x = rect.attr('x');
                rect_y = rect.attr('y');
                rect_w = rect.attr('width');
                rect_h = rect.attr('height');

                if (id == "PL01"){
                    $('#PL01').attr('available-decoration','TEAM_NAME,PLAYER_NAME,LOGO,GRAPHIC,NUMBERS');
                    $(this).append("<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='"+ rect_x +"px' height='"+ rect_h +"px' id='PL01_LOGO_GRAPHIC' y='"+ rect_y +"px' width='"+ rect_w +"px' version='1.1' preserveAspectRatio='xMidYMid' viewBox='0 0 256 405'><g></g></svg>");
                }
                if (id == "PL02"){
                    $('#PL02').attr('available-decoration','TEAM_NAME,PLAYER_NAME,LOGO,GRAPHIC,NUMBERS');
                    $(this).append("<svg id='PL02_LOGO_GRAPHIC' y='"+ rect_y +"px' height='"+ rect_h +"px' x='"+ rect_x +"px' width='"+ rect_w +"px' viewBox='0 0 256 256' version='1.1' preserveAspectRatio='xMidYMid'><g></g></svg>");
                }
                if (id == "PL03"){
                    $('#PL03').attr('available-decoration','TEAM_NAME,PLAYER_NAME,LOGO,GRAPHIC,NUMBERS');
                    $(this).append("<svg id='PL03_LOGO_GRAPHIC' y='"+ rect_y +"px' height='"+ rect_h +"px' x='"+ rect_x +"px' width='"+ rect_w +"px' viewBox='0 0 256 256' version='1.1' preserveAspectRatio='xMidYMid'><g></g></svg>");
                }
                if (id == "PL05"){
                    $('#PL05').attr('available-decoration','LOGO,NUMBERS');
                    rect_t = rect.attr('transform');
                    $(this).append("<g id='PL05_ClipPath'><defs><rect id='SVGID_1_' x='"+ rect_x +"' y='"+ rect_y +"' transform='" + rect_t + "' width='" + rect_w + "' height='" + rect_h + "'></rect></defs><clipPath id='SVGID_2_'><use xlink:href='#SVGID_1_' overflow='visible'></use></clipPath><g clip-path='url(#SVGID_2_)'><!--?xml version='1.0' encoding='UTF-8'?--><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='" + rect_w * 2 + "' height='" + rect_h + 9 + "' viewBox='0 0 250 250' version='1.1' preserveAspectRatio='xMidYMid' x='14.571' y='29.721px' id='PL05_LOGO_GRAPHIC' style='overflow: visible;'><g data-rotate-degree='45' data-scale='true' transform='rotate(45 128 124) scale(-1,1) translate(-250, 0)'></g></svg></g></g>");

                }
                if (id == "PL06"){
                    $('#PL06').attr('available-decoration','LOGO,NUMBERS');
                    $(this).append("<g id='PL061_LOGO_x5F_GRAPHIC'><defs></defs><clipPath id='SVGID_2_1'><use xlink:href='#PL06_RECT' overflow='visible'></use></clipPath><g clip-path='url(#SVGID_2_1)'><!--?xml version='1.0' encoding='UTF-8'?--><svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='" + rect_h + "' style='overflow: visible;' x='" + rect_x + "' id='PL06_LOGO_GRAPHIC' y='" + rect_y + "' width='" + rect_w + "' version='1.1' preserveAspectRatio='xMidYMid' viewBox='0 0 300 300' enable-background='new 0 0 300 300' xml:space='preserve'><g data-rotate-degree='-45' data-scale='true' transform='rotate(-45 128 124) scale(-1,1) translate(-300, 0)'></g></svg></g></g>");
                }
                if (id == "PL37"){
                    $('#PL37').attr('available-decoration','TEAM_NAME,PLAYER_NAME');
                } 


                $(this).append( "<foreignObject id='" + id + "_fo' x='" + rect_x +"' y='" + rect_y +"' fill='none' width='" + rect_w +"' height='" + rect_h +"'><canvas width='" + rect_w +"' height='" + rect_h +"' id='"+ id +"_canvas'></canvas></foreignObject>" ); 

                placement_ids.push(id);


            });

            $('#PLACEMENTS').attr('used-placements',placement_ids);




        }

HTML：

  <input type='file' />
  <div style='display:none' id='ss'></div>

Answer 1

使onload函数调用imageIsLoaded和其他代码。

$(":file").change(function () {
    if (this.files && this.files[0]) {
        console.log(this.files[0]);
        var reader = new FileReader();
        reader.onload = function(e) {
            imageIsLoaded(e);
            //run after reader function is compeleted 
            var a = document.body.appendChild(
                document.createElement("a")
            );
            a.download = "export.svg";
            a.href = "data:image/svg+xml," + $('#ss').find('svg')[0];
            a.innerHTML = "[Export conent]";
        };
        reader.readAsDataURL(this.files[0]);
     }
});

Answer 2

文件阅读器具有可用于在完成/启动/加载等后执行功能的事件。

所以你可以这样做：

reader.onload = createDownloadButton();

function createDownloadButton() {
            var a = document.body.appendChild(document.createElement("a"));
            a.download = "export.svg";
            a.href = "data:image/svg+xml," + $('#ss').find('svg')[0];
            a.innerHTML = "[Export conent]";
}

有关详细信息，请参阅：https://developer.mozilla.org/en-US/docs/Web/API/FileReader

在函数完成后运行jquery行

2 个答案: