1

非常に単純なアルゴリズムを使用して画像のサイズを変更したい。私はこのようなものを持っています:

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 がこれを行っているのかはわかりませんが、透明性を維持できないようです。

これを行うたびにキャンバスを作成し、そのキャンバスに画像を配置し、コードの最初の行でわかるように、getImageData を使用してそのキャンバスから画像を取得します。他に方法がないのかもしれないので、気にしないのかもしれませんが…

しかし、問題は、2 つの 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の部分がわかりません。

読んでくれてありがとう！

4

2 に答える 2

0

drawImage画像のスムージングを無効にしてビルトインを使用しないのはなぜですか? この操作をループで実行すると、比較的遅くなるだけでなく、エラーが発生しやすくなります (既に発見したように)。

次のようにすると、「ピクセル アート」の外観になり、アルファ チャネルも保持されます。

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);

こちらがオンラインデモです。

于 2013-09-16T18:47:21.563 に答える
0

最近作成したこのライブラリを使用してみてください。これは、画像をロードし、幅と高さまたは割合を固定してサイズ変更できます。

キャンバスをbase64、blobなどに変換するのと同じように、まさに必要なことを行います...

var CanvaWork = new CanvaWork();
CanvaWork.canvasResizeAll(obj.canvas, function(canvases){
    // "canvases" will be an array containing 3 canvases with different sizes depending on initial options
});

https://github.com/vnbenny/canvawork.js

これがお役に立てば幸いです！

于 2016-11-03T11:11:34.503 に答える