Q&A
コードはマークダウンのcode機能を利用してご提示ください。
また「荒い」は感覚です。それを見る人によって評価は変わってきます。
実際の表示と目指す表示を図示や説明願います。
あと、元の画像の拡張子は何でしょうか。
それ次第では元の画像を変更する必要があります。
＞失礼これありましたね。
picture/Image_01_01.jpg"
前提・実現したいこと
行いたいことは、ブラウザ上での画像表示です。
表示したい画像は、横16個×縦15個＝240個。
画像1つが5280×7392ピクセルになります。
画像をそのまま表示すると、ブラウザ上で横に16個並ばないため
画像を縮小して表示しましたが、画像が荒くなってしまい、中身がうまく確認できませんでした。
context.drawImage(this, 0, 0,1000,1400);
の1000,1400) → 500，500）程度にすると
画像が荒くなり見えなくなってしまいます。
縮小しても画像が荒くならない方法はないのでしょうか。
Javascript でなくても構いません。
よろしくお願いします。
該当のソースコード
以下は画像1枚を表示させるソースコードです。
window.addEventListener("load", function(){
// Canvas要素を読み出し
var myCanvas = document.getElementsByTagName("canvas")[0];
// コンテキストを取得
var context = myCanvas.getContext("2d");
if (!context){ return; }
// 画像を描画する
var Image_01_01 = new Image();
Image_01_01.src = "picture/Image_01_01.jpg";
Image_01_01.onload = function(){
// 座標とサイズを指定して描画
context.drawImage(this, 0, 0,1000,1400);
}
}, false);
回答1件
0
ベストアンサー
"picture/Image_01_01.jpg"
jpgでは不可です。縮小、拡大によって画質の維持は出来ないものと思って良いと思います。
WikipediaによるとJPEGは「非可逆圧縮の画像フォーマット」とのこと。非可逆圧縮とは、例えばデジカメで風景などを撮影した場合に、人が感知できない情報などを大幅にカットした状態で、情報量を圧縮して保存しているということ。その圧縮率は用途によって異なりますが、要するに目に見えないほど細かい「色の違い」を省略することで容量を小さくしています。
一度低解像度に圧縮してしまうと、もとに戻すことはできないため、メール添付用に圧縮する場合などは、元データをとっておく必要があります。 フルカラー1670万色まで扱うことができ、写真やグラデーションもキレイに表現できるのが特徴です。
JPEGの圧縮は、画像を8×8ピクセルの正方形で区切り、それ１つ１つで圧縮をかけていくので画質が劣化してしまいます。
JPEGは圧縮率というのも設定できますが、圧縮率をあげると１つ１つのブロックにノイズが発生してしまいます。
これを「ブロックノイズ」と呼んでます。
「5280×7392」って結構なサイズですし、
それを500x500にするということは、10分の1以下です。
というか長方形の画像を正方形にしようとしてませんか？
その辺りから見なおすと多少マシになるかもしれませんが（試したわけではないですが）
あまりに小さくしすぎたりするのは劣化を招くだけなので、そもそも元画像を500で準備するとかにするしかなさそうです。
投稿2020/01/12 12:48
総合スコア80850
m.ts10806さん
ありがとうございます。
画像は都合上で決まってしまったサイズのために変更はできないんです。
保存される形式をJPEG→BMPに変えることはできますが
BMPでも同じ症状は出るのでしょうか。 すみませんが教えてください。
特徴については提示した記事の通りです。
まずやってみては？
「Web用」というのならPNG推奨ですけど、
結局その画像が何なのか次第だと思います。
Webといっても紙媒体とは違うので、「都合で決まっている」のなら
「Webでは仕様上こういう表現になります」と通すしかないかと。
m.ts10806さん
ありがとうございます。
やってみてます。 また教えてください。
あなたの回答
tips
プレビュー
