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缩放像素

回答

相关问题