HDRiな生活

HDR（ハイダイナミックレンジ）写真の連載。ストックフォトでカメラ機材代の捻出を目論む。

ロードバイクのパーツ配色シミュレータ作ったー

ロードバイクのパーツ配色シミュレータ作ったー

カメラ:D700、 レンズ:Carl Zeiss Planar T* 1.4/50 ZF、ISO:200、絞り優先、ブラケット:-2〜+2、ホワイトバランス:オート

関連写真

  • ロードバイクのサドルに直接テールライトを付けてみたので加工の過程をば
  • 季節の挨拶はさわやかにお願いします
  • 勉強を始めようとすると部屋の掃除を始めてしまうアレの私的解釈
  • 自転車、ジョギング、水泳、痩せるのに最適なのは運動はどれか？
  • 2013年2月ストックフォトの売り上げ
  • 2012年1月のストックフォト売り上げ報告

ロードバイクのパーツって色のバリエーション豊富なんだけど、結構お値段するし、いざ装着した時に配色が悪いとスゴク残念な気持ちになる。あれいくない。
ということで、事前にある程度配色のアタリが付けられるシミュレータを作りました（要 IE9 以上）。いまのところ、フレーム、フォーク、ステム、シート、シートポスト、タイヤ、ホイール、ブラケットカバー、バーテープ、の色がカスタマイズ可能。

以下、サイト制作の備忘兼お役に立てば。

canvas で描画された画像を pngファイルとして保存する流れ

canvas への描画について

イラストレータなどでベクター作成 -> svg 出力 -> 以下サイトのコンバーターで Javascript化

パーツ毎に上記 Javascript化して関数化、色をピックアップするたびに全部再描画する。

var canvas = document.getElementById('canvas_id'); var ctx = canvas.getContext('2d'); function draw_bike(){ draw_tire(ctx,color); draw_wheel(ctx,color); draw_frame(ctx,color); . . . } var draw_tire = function(ctx,color) {...} var draw_wheel = function(ctx,color) {...} var draw_frame = function(ctx,color) {...} . . .

canvas で描画された画像を pngデータ化 -> png画像ファイルとして保存 の流れ

Javascript 側

var canvas = document.getElementById('canvas_id'); // toDataURL()メソッドで canvas に描画された画像を pngデータに変換 var dataURL = canvas.toDataURL('image/png');

php 側

// pngデータの文頭 data:image/png;base64,… の22桁は不要なのでトル // hash値などユニークなファイル名をつけて base64_decode()メソッドで png画像に変換、保存 $bike_picture_data = substr_replace($dataURL, '', 0, 22); $fp = fopen('path_to_png_images/'. $unique_file_name . '.png',w); fwrite($fp,base64_decode($bike_picture_data)); fclose($fp);

変数を含むページで Smarty のキャッシュを利用する方法

$variables= $_GET['xxxx']; $smarty -> display("index.tpl",$variables);

GET から得た値をまんま使うと不具合があるので、あり得ない文字数が入力されたらエラーページに飛ばすなど何らかの前処理は必須。

手探りグリグリなのでもっと要領いい方法あったら是非教えてください・・・っ

撮影環境・雑多品

GT0540

D700の重さに耐えつつ、最軽量クラスのGT0540。Gitzoが40%引きの信じられない店、楽天のナニワ。他にも破格の品が定期的に入れ替わっています。

関連記事

コメント： 0