共有:高い解像度の写真を、サイトの背景画像にするプログラムを作りました。写真を自動でクリッピングすることで、写真を縮小することなくサイトの背景画像にします。(注)クリッピング:写真の一部を切り取ることこの部分はiframe対応のプラウザで見てください。Webdesign高解像度写真ここでは、写真の総画素数が2000万画素以上の写真としました。総画素数が2000万画素の写真とは、例えば、横幅5000画素×高さ4000画素の写真です。ピクセル、pixcel、pxとも表記される。詳細はWikipediaをご参照ください。6000×4000px)を撮影できるカメラが販売されています。写真素材の販売サイトでも、高解像度な写真が販売されています。詳細は、記事「写真販売サイトで必要なカメラ性能」参照。ディスプレイ解像度ディスプレイの代表的な解像度は以下となります。6000×4000px)は、一度に表示できません。高解像度写真の解像度サイト閲覧解像度ディスプレイ全面でサイトを閲覧しないとき、サイトの解像度はディスプレイ解像度より小さくなっています。一度に表示するはできません。高解像度写真の解像度ランダム・クリッピング高解像度の写真をWebサイトの背景画像とする場合、写真をクリッピングする必要があります。今回は、ランダムにクリッピングすることを考えました。以下、クリッピングする際の座標系などです。高解像度画像の横幅:W高解像度画像の高さ:HWebサイトの横幅:wWebサイトの高さ:hx-y座標:Webサイトの背景画像の座標クリップベクトル(S)クリップベクトルSは、x-y座標で定義され、x-y座標の原点から高解像度画像の原点へのベクトルです。図から、Sの取り得る値の範囲が以下となることが分かります。変数WとHは、高解像度画像(HighResokutionImage.jpg)の横幅と高さです。function()オンロードした後、10秒(10,000ミリ秒)間隔で、dispHRI()関数を呼び出しています。setInterval()関数の詳しい説明は、記事「1分タイマーの作り方」をご参照ください。calc_s()高解像度画像の横幅(W)と高さ(H)、Webサイト画面の横幅(w)と高さ(h)を用いて、クリッピング・ベクトル(S)を計算します。範囲でランダムに1画素単位でクリッピング・ベクトル(S)を計算しています。dispHRI()まず、Webサイト画面の横幅(w)と高さ(h)を求めます。次に、calc_s()関数を呼び、クリッピング・ベクトル(S)を計算します。backgroundPositionプロパティで、背景画像をクリッピング・ベクトル(S)分、ずらしています。高解像度写真Webデザイン高解像度写真を自動でクリッピングして背景画像にしただけでは、Webサイトとしては未完成です。今回は、高解像度写真Webデザインの「基本的な動作」をプログラミングしました。Webサイトとして完成させるには、以下の作り込みが必要となります。人間が撮った写真には主題もしくはメッセージとか、なにか意図があるはずです。その写真を選んだ人は、その写真の意味を感じて選んだはずです。第一に注意しなければならないのが、高解像度写真をクリッピングすることで、その写真の印象が損なわれないように工夫することです。高解像度のパノラマ写真は、被写体である風景を丸ごと取り込んだ「迫力」があります。クリッピングしても、この「迫力」を無くさないように工夫する必要があります。他の要素との関係サイトの「背景」に高解像度写真を用いたとき、「前景」にも要素があります。「テキスト」の説明文や「入力フォーム」などです。そのままではファイルサイズが大きく、Webサイトに使いづらいです。画像が劣化しないように画像圧縮をし、段階的に転送するなど工夫をする必要があります。今回は、ランダムにクリッピングしたので、個々のクリッピングはバラバラです。水平線に沿ってクリッピングを移動させるとか、パノラマ写真であれば近景から遠景にクリッピングを移動させる、などクリッピングの方法も工夫する必要があります。コメントをキャンセルメールアドレスが公開されることはありません。高齢者が使用するラジオを購入しました。カメラにはピントが合う範囲があります。ページ上にJavaScriptを用いて点を描画します。ここでも、やはり、Canvasを使用します。「PhpSpreadsheet」というPHP対応のExcel操作ライブラリを利用しました。カメラの「絞り」により、ピント合わせに限界が生じます。ページを開けると、1分のカウントダウンが始まる、1分タイマーを作ります。プログラムで判別します。デジタルカメラには撮像素子が使われています。撮像素子は長方形で、大きさは縦3.6cm、横2.4cm程度です。写真を撮るとき、被写体にカメラを向けてピントを合わせます。ライセンスの下に提供されています。WordPress.コメントを読み込み中...コメントをどうぞメール名前サイト。