Question

我正在尝试将全屏背景图像加载到画布上，然后对其应用图像过滤器，但有一些问题。我遇到了严重的性能问题，但只有在调整窗口大小时才会出现问题。基本上，我的代码试图保持画布/图像与屏幕尺寸匹配（效果很好）。

更新帆布方法：

在加载时调用updateCanvas方法，以初始创建/加载图像对象并将其放在画布上。如果选择了过滤器，则会调用过滤器方法。它接受onResize参数，该参数在窗口调整大小时传递以缩放画布/图像。 MAIN是指用于引用元素的对象。

updateCanvas:function(onResize){ 
        // SETUP VARIABLES
    var img=new Image(), 
            $this=Main.currentOBJ, // REFERENCE FOR .DATA
            objData=$this.data, 
            canvas=Main.OBJ.$Canvas[0], 
        ctx=canvas.getContext("2d"), 
            winW=$(window).width(), winH=$(window).height();

   // SOURCE CAN BE SET IN .DATA OR DEFAULT
   img.src=(objData.bg_pic_src!=='') ? objData.bg_pic_src : Main.ConSRC;

   // LOAD THE IMAGE OBJECT
   img.onload=function(){ 
       var imgW=img.width, imgH=img.height, 
           ratio=imgW/imgH, newW=winW, newH=Math.round(newW/ratio);

       // SETUP IMAGE PROPORTIONS
       if(newH < winH){ var newH=winH, newW=Math.round(newH*ratio); }; 

       // WHEN RESIZING THE BROWSER 
       if(!onResize){ // INTIAL DRAW
          Main.OBJ.$Canvas.attr({'width':newW+'px', 'height':newH+'px'});  
          ctx.drawImage(img,0,0,newW,newH);

          // APPLY FILTERS
      if(objData.bg_pic_filter > 0){ 
             Main.canvasFilter(ctx,newW,newH); // FILTER METHOD
      }else{ 
             Main.OBJ.$OverlayPic.animate({opacity:parseFloat(objData.bg_pic_opacity,10)},
        {duration:objData.bg_pic_speed_in,queue:false}); 
          };
    }else{ // RESIZING
         Main.OBJ.$Canvas.attr({'width':newW+'px', 'height':newH+'px'});  
         ctx.drawImage(img,0,0,newW,newH);

         if(objData.bg_pic_filter > 0){ 
             Main.canvasFilter(ctx,newW,newH); // FILTER METHOD
         };     
    };
};

画布过滤方法： 如果要将图像过滤器应用于背景图像，则从canvasUpdate方法调用canvasFilter方法。

canvasFilter:function(ctx,width,height){ 
      // SETUP VARIABLES
      var objData=Main.currentOBJ.data, 
      canvasWidth=width, canvasHeight=height,
      imgdata=ctx.getImageData(0, 0, canvasWidth, canvasHeight), 
      pix=imgdata.data, l=pix.length;

     // APPLY THE CORRECT LOOP DEPENDING UPON THE FILTER NUMBER 
     switch(objData.bg_pic_filter){
     case 1: ... break;
     case 2: 
         for(var i=l; i>0; i-=4){ 
             var cacher=pix[i+2]; 
             pix[i]=pix[i+1]; 
             pix[i+1]=cacher; 
             pix[i+2]=cacher; 
             pix[i+3]=cacher;
         }; 
     break;
    };          

     // APPLY THE FILER & FADE IN THE BACKGROUND
     ctx.putImageData(imgdata, 0, 0);
     Main.OBJ.$OverlayPic.fadeTo(parseInt(objData.bg_pic_speed_in,10),    
         parseFloat(objData.bg_pic_opacity,10));
};

所有这些都有效，初始绘制/过滤非常快。但是，当我调整窗口大小时，它非常缓慢。我暂时通过装入一个节流器来解决这个问题，它只是设置一个计时器以避免过快地触发上述功能。这有点帮助，但会保留背景图像（在图像周围显示开放的纯色背景区域），直到节流器计时器启动并触发方法 - 调整画布/图像的大小并应用过滤器。

问题：

有更快的方法吗？我已经阅读过使用Typed Arrays / Bitwise进行像素操作循环，但似乎支持对此非常可怕。我也研究过CSS3过滤器来完成同样的事情，但同样，支持是可怕的。那么，这是采用“现代浏览器”兼容性的全屏背景图像滤镜的唯一方法吗？
updateCanvas方法每次都在创建一个新的图像对象，我认为这可能是一个瓶颈，但我不确定，也不确定如何绕过它？
我使用单独的画布作为缓冲区读过其他人吗？这会在我的情况下实际上提高性能吗？
我真的在想我的代码中存在一个主要的逻辑问题。对我来说，我需要不止一次遍历所有像素信息，这是没有意义的，但这是我让它工作的唯一方法。有没有办法我可以绘制它/应用过滤器一次，然后调整大小，只需调整尺寸而不必重新绘制/重新应用/重新应用过滤器？我认为它会维护过滤后的图像，但是如果我在窗口调整大小时删除对canvasFilter方法的调用，它会完全删除过滤器效果。
我还没有使用记忆技术，因为我从来没有完全理解它，也从未完全理解何时/何时使用它。但是，基本上，如果我有一个一次又一次返回相同结果的函数（例如canvasFilter方法），我可以记忆以提高性能 - 或者它会有所不同，因为它在窗口调整大小后拉出不同的像素信息吗？ / p>
我也听说过webGL渲染可能有助于此吗？可能会离开，因为我对webGL一无所知。

对于loooonng问题很抱歉，但希望这涵盖了其他人也可以从中受益的一些话题。任何建议/提示将不胜感激。谢谢！：）

Answer 1

由于听起来你的图像大多是静态的，你可能想要尝试的方法是使用好的旧CSS。

这里的关键技巧是使用background-size：cover。请参阅：http://css-tricks.com/perfect-full-page-background-image/

广义而言：

加载图片
在画布中应用滤镜。（画布甚至不需要附加到页面上。）
通过以下网址将您的画布数据导出为网址：ctx.toDataUrl("image/png");
将样式添加到容器元素或正文： background-size:cover;background:url('data:image/png;yourcanvasdata');
通过js或css过渡属性

HTML5 Canvas图像过滤器滞后（JavaScript）

1 个答案: