창에서 캔버스 업데이트하기 크기 조정

Question

캔버스 요소를 처음 사용하고 전체 화면 이미지를 그리는 중 일부 픽셀 수정을 시도하고 있습니다. 이것에 대한 작은 방법을 쓰고 이미지를로드하는 작업은 완벽하지만 브라우저 창 크기를 조절하는 것은 속도 조절기를 사용하는 경우에도 매우 느립니다.

여기 캔버스에 이미지를 그리기위한 나의 방법, 그리고 그것에 이미지 필터 효과 적용하십시오 만약 거기에 너무 믿을 수 없을만큼 떨어져이에서,하지만 난 궁금한 건 아니에요 희망

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); 
    }; 
}, 

을 단순히 전체 화면 캔버스에 이미지를 그릴 때 더 좋은 방법이지만 background-size : cover와 비슷한 크기를 유지해야합니까? 이러한 이미지는 픽셀 조작 필터도 사용합니다. 그것을 다시 그리지 않고 매번 필터를 다시 적용 할 필요없이 창 크기를 조정할 때 캔버스 크기를 조정할 수 있습니까? 감사합니다. 귀하의 질문에 대한

Answer 1

일부의 생각 :

는 "심지어 throttler에"나는 당신이 당신의 비용이 반복적으로 트리거되는 것을 다시 그리기 유지하는 있으리라 믿고있어 말을. 이런 식으로 뭔가 : JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed? 원래 필터링 된 이미지가 받아 들일 수없는 pixelating없이 크기 조정에서 살아남을 경우

// 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;