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.请注意,图像翻倍并且只填充画布的一半。
EDIT2: 我做了展示我遇到了奇怪的行为至少一个网页。
答
的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);
根据您的具体目标。
答
你可以使用即暂时的图像与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
@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