JavaScript Canvas 图像数据操作

Question

我想使用非常简单的算法调整图像大小。我有这样的东西:

var offtx = document.createElement('canvas').getContext('2d');
offtx.drawImage(imageSource, offsetX, offsetY, width, height, 0, 0, width, height);
this.imageData = offtx.getImageData(0, 0, width, height).data;
offtx.clearRect(0, 0, width, height);

for(var x = 0; x < this.width; ++x)
{
    for(var y = 0; y < this.height; ++y)
    {
        var i = (y * this.width + x) * 4;
        var r = this.imageData[i ];
        var g = this.imageData[i+1];
        var b = this.imageData[i+2];
        var a = this.imageData[i+3];
        offtx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")";
        offtx.fillRect(0.5 + (x * this.zoomLevel) | 0, 0.5 + (y*this.zoomLevel) | 0, this.zoomLevel, this.zoomLevel);
    }
}

this.imageData = offtx.getImageData(0, 0, this.width * this.zoomLevel, this.height * this.zoomLevel);

但是，这个解决方案的问题是图像会丢失任何透明度信息。我不知道这种情况是否发生在这个算法中，或者也许我稍后用来显示该图像的 putImageData 正在这样做，但我似乎无法保持透明度。

每次执行此操作时，我都会创建一个 Canvas ，将图像放在该 Canvas 上，并使用 getImageData 从该 Canvas 中获取图像，正如您在代码的第一行中看到的那样。也许没有其他办法，所以我可能不介意......

但问题是我使用两个 for 循环来绘制调整大小的图像，然后使用 getImageData 来存储该图像信息。这是一种奇怪的方法。我更愿意创建空图像数据并用仅调整大小的所有原始图像信息填充它。我无法用我的头脑理解这一点，我无法想象它的循环结构。为了表达我的意思:

for(var x = 0; x < this.width; ++x)
{
    for(var y = 0; y < this.height; ++y)
    {
        var i = (y * this.width + x) * 4;
        var r = this.imageData[i ];
        var g = this.imageData[i+1];
        var b = this.imageData[i+2];
        var a = this.imageData[i+3];
        //I WOULD LIKE MAGIC TO HAPPEN HERE THAT WILL
        //RESIZE THAT CURRENT PIXEL AND MOVE IT TO THE NEW IMAGE DATA RESIZED
        //SO EVERYTHING IS DONE NICE AND CLEAN IN THIS LOOP WITHOUT THE 
        //GETIMAGEDATA LATER AND MAYBE SET TRANSPARENT PIXELS WHILE I'M AT IT
    }
}

我无法弄清楚 MAGIC 部分。

感谢您的阅读!

Answer 1

为什么不直接使用内置的 drawImage 并禁用图像平滑功能呢？在循环中执行此操作不仅相对较慢，而且容易出错(正如您已经发现的)。

按照以下方式进行操作将为您提供“像素艺术”外观，并且还将保留 Alpha channel :

var factor = 4; /// will resize 4x

offtx.imageSmoothingEnabled = false; /// prefixed in some browsers
offtx.drawImage(imageSource, offsetX, offsetY, width, height,
                             0, 0, width * factor, height * factor);

这里是an online demo 。