ユーザーがコンピューターからローカルで画像ファイルを開くことができるように、Webページ用のjavascript / jqueryプログラムを作成しています。次に、プログラムは画像ファイルのサイズを16 x 16のアイコンサイズに変更し、データURLとして保存します。
サイズ変更された画像が非常にピクセル化されていることを除いて、すべて正常に機能します。現在、ローカルの画像ファイルを取得して、そこからデータ URL を作成しています。次に、16 x 16 のキャンバス要素を作成し、キャンバスに画像を描画し、そこから新しいデータ URL を作成します。
新しくサイズ変更された画像は非常にピクセル化されており、滑らかではなく、アンチエイリアス処理されていないように見えるため、別の方法が必要です。ブラウザが幅と高さの属性を 16 に設定して元の画像を表示すると、非常にきれいで滑らかに見えます。これが私が望むものです。ブラウザで表示されているものと同じ結果を得る方法がわかりません。Google Chrome を使用しています。
私はここでそれの小さな例を作りました: http://jsfiddle.net/5Pj8m/
この例では jsFiddle ロゴを使用しましたが、任意のローカル ファイルでテストして結果を確認できます。このコードは、他の誰かがその方法を学ぶのに役立つかもしれませんが、それでも、結果として得られるサイズ変更された画像は、はるかに良く見えるはずです。
私がやろうとしていること、そしてそれが何とか可能であることを説明できたことを願っています。誰かが私を助けたり、これを理解したりできますか?
これがコードです。
HTML:
<input type='file' id='inputFile'>
<table border=1><tr><td>
<span id='spanDisplayOrigFull'>OrigFull:
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png>
</span>
</td><td>
<span id='spanDisplayOrigIcon'>OrigIcon:
<img src=http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png width='16' height='16'>
</span>
</td></tr><tr><td>
<span id='spanDisplayNewFull'>NewFull: </span>
</td><td>
<span id='spanDisplayNewIcon'>NewIcon: </span>
</td></tr></table>
ジャバスクリプト:
$('#inputFile').bind('change', function()
{
var file = inputFile.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function()
{
var imageUrlFull = reader.result;
var imageLocalFull = new Image();
imageLocalFull.src = imageUrlFull;
imageLocalFull.id = 'imageLocalFull';
imageLocalFull.onload = function()
{
var canvas = document.createElement('canvas');
canvas.width = 16; canvas.height = 16;
var context = canvas.getContext('2d');
context.drawImage(imageLocalFull, 0, 0, 16, 16);
var imageUrlIcon = canvas.toDataURL(file.type);
var imageLocalIcon = new Image();
imageLocalIcon.src = imageUrlIcon;
imageLocalIcon.id = 'imageLocalIcon';
imageLocalIcon.onload = function()
{
spanDisplayNewFull.appendChild(imageLocalFull);
spanDisplayNewIcon.appendChild(imageLocalIcon);
};
};
};
});