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

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

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

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

撮影環境・雑多品

Nikkor AF-S Micro 60mm F2.8G ED

ブツ撮りはコレ一本あればいいと今は思ってるNikkor 60mm単焦点。D40でもオートフォーカスが使える超音波モーター。本当、フルサイズ機になってますます使い勝手が良くなりましたこのレンズ。ナノクリスタルコート。

関連記事

コメント： 0