javascript html5縮放像素

我似乎無法弄清楚如何在html5畫布上縮放像素。這是我到目前爲止的地方。javascript 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.請注意，圖像翻倍並且只填充畫布的一半。

Pixel size of 1

Pixel size of 2

EDIT2：我做了展示我遇到了奇怪的行爲至少一個網頁。

Live example

來源

2011-04-02 Scott

@Scott - 不知道你在做什麼縮放 – fazo 2011-04-02 22:03:57

好吧，我正在採取幀緩衝，這是一個逐個像素的圖像表示。它是單層數組，可通過'n = row * width + col'訪問。我試圖把它繪製到圖像數據表上，但是按像素高度和寬度縮放。 – Scott 2011-04-02 22:08:03

@Scott - 你是否試圖通過縮放因子將整個圖像縮放到新的大小或每個像素？ – fazo 2011-04-02 22:20:03

的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-02 22:26:39 olliej

由於某些原因，將數據直接寫入畫布緩衝區時，縮放不起作用。 – Scott 2011-04-02 23:48:29

ImageData API專門用於忽略任何上下文轉換。如果您使用ImageData，那麼您將手動進行縮放（或通過中間畫布），但更大的問題是您是否實際上首先需要使用ImageData。 – olliej 2011-04-03 02:31:13

我需要快速訪問是爲什麼我直接繪製到緩衝區。我已經嘗試過繪製方法，但對於我的目的來說它們太慢了。 – Scott 2011-04-03 03:21:08

你可以使用即暫時的圖像與canvas.toDataURL()，然後繪製它與drawImage()調整。

context.putImageData()應該這樣做，但尺寸參數are not yet implemented in Firefox。

的代碼，具有兩個帆布用於演示目的：

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是正確的，there is no need to use a temp image

來源

2011-04-02 22:01:20 bpierre

我不確定如何以這種方式使用drawImage。介紹一個例子？ – Scott 2011-04-02 22:08:41

您只是將圖像元素引用傳遞給命令。context.drawImage（imageref，0,0,150,150）; – 2011-04-02 22:18:32

對不起，我的意思是'canvas.toDataURL（）'。例如：http://jsbin.com/aweje4/2/edit – bpierre 2011-04-02 22:27:24

javascript html5縮放像素

回答

相關問題