1

我是使用画布元素的新手，正在尝试绘制全屏图像，然后进行一些像素修改。我为此编写了一个小方法，并且加载图像效果很好，但是调整浏览器窗口的大小非常慢 - 即使使用节流器也是如此。

这是我在画布上绘制图像并对其应用图像滤镜效果的方法：

drawCanvas:function(obj,src,onResize){
   var img=new Image(), 
       objData=$.data(obj), 
       canvas=Plugin.OBJ.$Canvas[0], 
       ctx=canvas.getContext("2d"), 
       win=$(window), 
       winW=win.width(), 
       winH=win.height();       

    img.src=src; 
    Plugin.CanvasSRC=src;

    img.onload=function(){ 
    var imgW=img.width, 
            imgH=img.height, 
            ratio=imgW/imgH;
        newH=(Math.round(winW/ratio)<winH)?winH:Math.round(winW/ratio), 
            winW=(newH<winH)?$win.width():Math.round(newH*ratio);

        canvas.width=winW; canvas.height=newH;
    ctx.drawImage(img,0,0,winW,newH);

    var imgdata=ctx.getImageData(0,0,winW,winH), 
            pix=imgdata.data, 
            l=pix.length, 
            filter=objData.bg_pic_filter;

    switch(filter){ ... this section does the pixel manipulation ...};

    // APPLY THE FILTER && FADE IN 
    ctx.putImageData(imgdata,0,0);
    };
},

希望我不会对此感到难以置信，但我想知道是否有更好的方法可以将图像简单地绘制到全屏画布上，但让它保持与背景大小相似的尺寸：封面？这些图像也使用像素操作过滤器。是否可以在窗口调整大小时调整画布的大小，而不必每次都重新绘制并重新应用过滤器？谢谢！

4

1 回答 1

1

关于你的问题的一些想法：

当您说“即使使用节流器”时，我假设您正在防止重复触发昂贵的重绘。像这样的东西： JavaScript/JQuery: $(window).resize 调整大小完成后如何触发？

// on resizing, call for a delay
// after the delay call your drawCanvas()
$(window).resize(function () {
    waitForFinalEvent(function(){ drawCanvas(); }, 500, randomID());
});

// wait for the specified delay time before doing callback
// if this is called again before timeout, restart the timer
var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (timers[uniqueId]) {
      clearTimeout (timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

// generate a "good enough" unique id
function randomID() {
   return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}

如果您的原始过滤图像在调整大小时不会出现不可接受的像素化，您可以将原始图像保存到 dataURL，然后在调整大小的画布上缩放+重绘保存的图像，如下所示：

// save the canvas content as imageURL
var data=canvas.toDataURL();

// resize the canvas
canvas.width*=scaleFactor;
canvas.height*=scaleFactor;

// scale and redraw the canvas content
var img=new Image();
img.onload=function(){
    ctx.drawImage(img,0,0,img.width,img.height,0,0,canvas.width,canvas.height);
}
img.src=data;
于 2013-04-21T05:53:13.193 回答