0

我制作了一个 js 脚本来将图像（数量超过 300 个）转换为 base-64。

<script type="text/javascript">
        var onderdelen, afbeeldingen;
        var c=document.getElementById("myCanvas");
        var container = $("#container ul");
        var lengte = container.length;
        var speed = 1000;
        dataStart = "{\"onderdelen\":[";
        dataEnd = "]}";

        convertToBase64 = function(convertImg){
            if(null == convertImg){
                return "";
            }else{              
                c.width = convertImg.width;
                c.height = convertImg.height;

                ctx=c.getContext("2d");         
                ctx.drawImage(convertImg,0,0);
                dataURL = c.toDataURL("image/jpg").replace("data:image/png;base64,","");

                return(dataURL);
            }   

        };

        $("#output").append(dataStart);

        container.each(function(index,value){
            setTimeout( function() {

                var deze = $(value) 

                $("#output").append("{\"nr\" : \""+deze.attr("id")+"\", \"naam\" : \""+deze.attr("naam")+"\", \"cat\" : \""+deze.attr("cat")+"\"},");

                kinderen = deze.find("li");
                kinderen.each(function(i,v){

                    naam = $(this).parent().attr("id")+"_"+$(this).attr("class");
                    setTimeout(function(){
                        var img = $(v).find("img").get(0)
                        $("#output").append("{\"naam\": \""+ naam + "\", \"data\" : \"" + convertToBase64(img) + "\"},");
                    },i*speed);

                    $(this).hide();
                });

                console.log(index);

            }, index*speed*5);

            //if(index==100){return false;}

        });

    </script>

当我运行时，排序在 37（索引）处关闭，如果我等待足够长的时间，它将完成。谁能告诉我如何使它运行更顺畅？

是否有一些我超载的javascript函数，是否有一种我不知道的cashe形式，我是否过度使用setTimeout函数，我是否过度使用dom，我的文件是否很大。有任何想法吗。

4

1 回答 1

0

setTimeout不会创建另一个线程，但会将任务在“消息循环”中排队，因此它们将在一个循环过程中触发并在持续时间过长时挂断 UI

改为使用Web workers或创建一个Queue并逐个处理图像，而不是一次运行多个计时器

于 2013-09-25T14:28:55.653 回答