9

クライアント側の画像のサイズ変更（HTML5キャンバスを使用）を使用してページを作成し、画像をアップロードしています。すべてが機能していますが、問題は画質があまり良くないことです。

これは、サイズ変更/アップロードコードが生成した画像を含む（進行中の）フォトギャラリーへのリンクです。

品質の悪さの意味がわかりますか？特にサムネイル画像では、ギザギザのエッジがたくさんあります。これを修正する方法のアイデアはありますか？

サムネイルを生成するためのJavaScriptは次のとおりです。

img.onload = function()
{
   var canvasWidth = 150;
   var canvasHeight = 150;
   var Rz = resizeCanvasSmall(img,canvasID,canvasWidth,canvasHeight);

   ctx.drawImage(img,Rz[0],Rz[1],Rz[2],Rz[3],Rz[4],Rz[5],Rz[6],Rz[7]);
   dataurl = canvas.toDataURL("image/jpeg",0.8);  // File type and quality (0.0->1.0)
   UploadFile();
}


// Function to resize canvas (for thumbnail images)
// img = image object, canvas = canvas element ID
function resizeCanvasSmall(img,canvas,width,height)
{
var sx; //The x coordinate where to start clipping
var sy; //The y coordinate where to start clipping
var swidth; //The width of the clipped image
var sheight; //The height of the clipped image

var aspectRatio = width / height;

if (img.width > img.height) // If landscape
{
    sheight = img.height;
    swidth = img.height * aspectRatio;
    sy = 0;
    sx = (img.width - swidth) / 2;
}
else //If portrait
{
    swidth = img.width;
    sheight = img.width / aspectRatio;
    sx = 0;
    sy = (img.height - sheight) / 2;
}

document.getElementById(canvas).width = width;
document.getElementById(canvas).height = height;

return [sx,sy,swidth,sheight,0,0,width,height];
}
4

3 に答える 3

5

大量のサイズを変更する場合の一般的なルールは、2 のべき乗でジャンプして、エイリアシング アーティファクトを少なくし、残りの方法で最終的なサイズ変更を 1 回だけ行うことです。例: 1000px を 68px に縮小する必要がある場合は、500px に縮小し、次に 250px、次に 125px、次に 68px に縮小します。最後の 1 つまで常に 2 のべき乗です。

また、縦横比を維持する必要があります。そうしないと、対角線でファンキーなエイリアシングが発生します。正方形以外のソース画像から正方形のサムネイルが必要な場合は、ターゲットの正方形にできるだけ近づけながらサイズを縮小し、中央でトリミングします。（または、小さくしてパディングします）。どうしてもアスペクト比を維持する必要があります。

私が説明したものよりもさらに良い結果を得るには、独自のサイズ変更アルゴリズムを実装する必要がありますが、これははるかに遅くなります (最適化されたネイティブ コードではなく JS で行われるため)。WebGL に飛び込むことも選択肢の 1 つかもしれません。

于 2013-04-22T03:47:15.500 に答える
0

内部で何が使用されているかはわかりませんが、Processing.js にはかなり見栄えの良い image resize があると常に考えていました。ドキュメントには、いくつかの使用例があります。（更新：サイズ変更のコードを見ると、あなたがしていることと同様のプロセスを実行しているように見えます。ただし、ある画像からデータを取得して別の画像に移動することを除いて。）

サイズを変更する際のもう 1 つの注意点は、ピクセルがより適切に整列するように、可能であれば画像サイズを常に半分にすることです。理想的なサイズ変更の例は、50%、25% などです。

于 2012-12-18T13:46:49.930 に答える