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

うまくいけば、私はこれからあまり信じられないほど離れていませんが、フルスクリーンのキャンバスに画像を単純に描画するより良い方法があるかどうか疑問に思っていますが、background-size:cover と同様の寸法を維持していますか? これらの画像は、ピクセル操作フィルターも使用しています。キャンバスを再描画して毎回フィルターを再適用することなく、ウィンドウのサイズ変更時にキャンバスのサイズを変更することは可能ですか? ありがとう！

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 に答える