1

HTML5キャンバスでピクセルをスケーリングする方法がわかりません。これまでのところ、私はここにいます。

function draw_rect(data, n, sizex, sizey, color, pitch) {
    var c = Color2RGB(color);
    for( var y = 0; y < sizey; y++) {
        var nn = n * 4 * sizex;

        for( var x = 0; x < sizex; x++) {
            data[nn++] = c[0];
            data[nn++] = c[1];
            data[nn++] = c[2];
            data[nn++] = 0xff;
        }
        n = n + pitch;;
    } 
}

function buffer_blit(buffer, width, height) {
    var c_canvas = document.getElementById("canvas1");
    var context = c_canvas.getContext("2d");
    context.scale(2, 2);
    var imageData = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
    var n = width * height - 1;
    while((n--)>=0) draw_rect(imageData.data, n, pixel, pixel, buffer[n], width);

    context.putImageData(imageData, 0, 0);  
}

編集: ここでコードを更新しました。何が変わったのかわからない。

多分いくつかの画像が役立つでしょう。最初の画像のピクセル サイズは 1、2 番目のピクセル サイズは 2 です。

ピクセルサイズ 1

ピクセルサイズ 2

Edit2: 私が経験している奇妙な動作の少なくとも 1 つを示す Web ページを作成しました。

実際の例

4

2 に答える 2

3

drawImage は、ImageData を使用せずに任意の画像または画像のようなもの (またはたとえば) をスケーリングするために使用できます。ピクセル固有のスケーリングを明示的に処理したい場合を除き、おそらくネイティブ サポートを使用する必要があります。例えば。

var myContext = myCanvas.getContext("2d");
// scale image up
myContext.drawImage(myImage, 0, 0, myImage.naturalWidth * 2, myImage.naturalHeight * 2);
// scale canvas up, can even take the source canvas
myContext.drawImage(myCanvas, 0, 0, myCanvas.width * 2, myCanvas.height * 2);
// scale up a video
myContext.drawImage(myVideo, 0, 0, myVideo.width * 2, myVideo.height * 2);

または、次のようにすることもできます。

myContext.scale(2, 2); // say
//.... draw stuff ...
myContext.scale(.5, .5);

あなたの正確な目標に応じて。

于 2011-04-02T22:26:39.417 に答える
0

で画像を一時的に使用してcanvas.toDataURL()から、 でサイズ変更して描画できますdrawImage()。

context.putImageData()トリックを行う必要がありますが、寸法パラメーターはまだ Firefox に実装されていません。

デモ用の 2 つのキャンバスを含むコード:

var canv1 = document.getElementById("canv1"),
    canv2 = document.getElementById("canv2"),
    ctx1  = canv1.getContext("2d"),
    ctx2  = canv2.getContext("2d"),
    tmpImg = new Image();

/* Draw the shape */
ctx1.beginPath();
ctx1.arc(75,75,50,0,Math.PI*2,true);
ctx1.moveTo(110,75);
ctx1.arc(75,75,35,0,Math.PI,false);
ctx1.moveTo(65,65);
ctx1.arc(60,65,5,0,Math.PI*2,true);
ctx1.moveTo(95,65);
ctx1.arc(90,65,5,0,Math.PI*2,true);
ctx1.stroke();

/* On image load */
tmpImg.onload = function(){
  /* Draw the image on the second canvas */
  ctx2.drawImage(tmpImg,0,0, 300, 300);
};
/* Set src attribute */
tmpImg.src = canv1.toDataURL("image/png");

編集：olliejは正しいです、一時画像を使用する必要はありません

于 2011-04-02T22:01:20.963 に答える