Question

（是的，我来自瑞典，所以我的英语可能不完美;）

我在ipad上遇到了内存问题。这段代码不会崩溃，但它会停止。在某些时候，它永远不会进入Image对象上的任何事件处理程序。我不知道为什么..？我搜索了论坛并搜索了几天关于变通方法的信息。但它们并不适合我想要实现的目标（？）。（因为我只有1个Image对象）。

我创建的内容如下：

用户可见的1个主画布。

我画的其他16幅画布。

1我用图片加载图像的图像对象。

所有图像都是带有alpha的png，其尺寸为900x373像素。所有的画布都有相同的尺寸。

在其他16幅画布上绘制了8幅图像。

这样做的目的是能够旋转具有可互换层的对象。（1个角度是来自不同角度的物体，因此当主循环运行时它看起来像是在旋转。）旋转应该由触摸/鼠标控制，但这应该证明我想要实现的目标。

我知道这是需要查看的大量代码，因为我是javascript的新手，所以它可能不是最好的代码。但是它在我的笔记本电脑上可以正常工作。

我已经阅读了一些关于保存对imageObjects的引用的事件，因此它们不会得到GC。但是，当我只有一个图像对象时，这意味着什么？我也尝试用jquery语法添加和删除监听器，但没有成功。

如果有人愿意花时间回答这个问题，我们将不胜感激。

关心奥斯卡。

变量初始化：

        var drawingCanvas = null;
        var context = null;         
        var numAngles = 8;
        var angleStep = 32/ numAngles;  
        var canvasAngles = [];      
        var loadStatus = {};    
        var basePath = "assets_900/";       
        var layerPaths = [];
        var layerPathsA = ["black/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
        var layerPathsB = ["red/","v16/","f86/","fA00049/","fA00340/","fTG02/","fTG02/","fTJ02/"];
        var layerPathsC = ["black/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];
        var layerPathsD = ["red/","v16/","f86/","fR134/","fA00340/","fTG02/","fTG02/","fTJ02/"];            
        var layerPathsArr = [layerPathsA,layerPathsB,layerPathsC,layerPathsD];
        layerPathsCounter = 0;

        var numLayers = layerPaths.length;

        var imageInit = null;           
        var SW = 900;   //1920
        var SH = 373;    //796
        var loopcounter = 0;

首先设置画布和其他stuf：

layerPaths = layerPathsArr[0];           


             drawingCanvas = document.getElementById('myDrawing');
             context = drawingCanvas.getContext('2d');              

            for(var i = 0; i < numAngles; i++){
                var canvas = document.createElement('canvas');                  
                var canvasContext = canvas.getContext('2d');
                canvasContext.createImageData(SW, SH);
                canvas.height = SH;
                canvas.width = SW;                  
                canvasAngles.push(canvas);                  
            }

这将启动循环，然后它将永远不会停止，它将继续jsut直到移动safari崩溃：

loadImage(0,0,0);

这是一个加载图片的循环：当它加载了8个图像时，它将它们绘制在16个画布中的一个上，然后该画布将在可见画布上绘制。然后它加载一个新角度和8个新图像，依此类推......

            function loadImage(pathIndex,layerIndex,angleIndex){
                    if(layerIndex  < layerPaths.length ){
                        //logger.log("path :" + pathIndex +" lajr : "+ layerIndex + " angl: " + angleIndex);                            

                        imageInit = new Image();        

                        imageInit.onload = function(){                              

                            var canvas = canvasAngles[angleIndex];
                            var canvasContext = canvas.getContext('2d');
                            canvasContext.drawImage(imageInit,0, 0);                                        

                            imageInit.onload = null;
                            imageInit.onerror = null;
                            imageInit.onabort = null;

                            imageInit.src = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
                            imageInit = null;
                            delete imageInit;

                            loadImage(pathIndex,layerIndex+1,angleIndex);                           
                        }

                        imageInit.onerror = function(){
                            logger.log("Error loading, retrying....");
                            loadImage(pathIndex,layerIndex,angleIndex);         
                        }
                        imageInit.onabort = function(){
                            logger.log("Error loading (aborted)");
                        }                   

                        var path = "";
                        if(pathIndex < 10){
                            path = basePath + layerPaths[layerIndex] + "img000"+ pathIndex + ".png";
                        }else{
                            path = basePath + layerPaths[layerIndex] + "img00"+ pathIndex + ".png";
                        }                           
                        imageInit.src = path;
                    }else{      

                        displayAngle(angleIndex);

                        if(angleIndex > numAngles-2){

                            logger.log("turns : " + loopcounter++ +" C: " + layerPathsCounter);
                            clearCanvases();
                            loadImage(0,0,0);

                            layerPathsCounter++;

                            if(layerPathsCounter > layerPathsArr.length-1){
                                layerPathsCounter = 0;
                            }                               
                            layerPaths = layerPathsArr[layerPathsCounter];                              
                        }else{
                            loadImage(pathIndex+angleStep,0,angleIndex+1);
                        }       
                    }
                }

这里有几个辅助函数：

            function clearCanvases(){                   
                for(var i = 0; i < numAngles; i++){
                    var canvas = canvasAngles[i];
                    var canvasContext = canvas.getContext('2d');
                    canvasContext.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);                     
                }                           
            }

            function displayAngle(index){                                               
                context.clearRect(0,0,drawingCanvas.width, drawingCanvas.height);           
                var canvas = canvasAngles[index];
                context.drawImage(canvas,0,0);                      
            }

HTML：

    <body >     
    <canvas id="myDrawing" width="900" height="373">
        <p>Your browser doesn't support canvas. (HEHE)</p>
    </canvas>        
</body>

Answer 1

看起来你只能在一个标签中加载~6.5 mb。据我所知，没有办法释放这段记忆（？）

这将在ipad上加载大约13 500kb的imqages，然后停止..，

http://www.roblaplaca.com/examples/ipadImageLoading/img.html

ipad safari停止运行代码事件（带有1个图像对象的画布）内存不足

1 个答案: