クレジットカード風画像メーカー
アップロードした画像に対してカード番号や名前等をそれっぽく付け加え、クレジットカード風の画像を作成します。
以下のような感じになります。(元画像はVカツとエクセルで作成した#コンパスのリリカちゃんです)
[元画像]
[編集後]
1.カード情報の設定
以下のカード情報を入力して下さい。
カード番号 (半角数字) | カード名義人(半角ローマ字) | 有効期限(YY/MM)
2.文字色の選択
(1)カード情報(カード番号・カード名義人・有効期限)の文字色を選択して下さい。
(2)カード情報(カード番号上4桁・MONTH/YEAR・GOOD THRU)の文字色を選択して下さい。
3.画像の選択
元画像(400×600)を選択して下さい。400×600じゃなくても縦横比が大体4:6になっていれば多分大丈夫です(ダウンロードファイルは400×600になります)。
4.参考資料
[参考1]File APIとCanvasでローカルの画像をアップロード→加工→ダウンロードする
画像のアップロード→加工→ダウンロードの部分を流用させて頂きました。
www.tam-tam.co.jp
[参考2]Spectrumの使い方 (Webページにカラーピッカーを導入する)
カラーピッカーの導入について参考にさせて頂きました。
qiita.com
[参考3]spectrum.jsで簡単にカラーピッカーを設置する
カラーピッカーの導入について参考にさせて頂きました。
web.runland.co.jp
[参考4]カラーコード一覧表
www.netyasun.com
5.ICカード対応
ICチップを付けるとこんな感じです。
カード番号の文字色は黒にして、エンボス(文字の凹凸)なしのViewカード風にしました。
エンボスなしならそれなりに近い感じになるかなと思います(エンボスのメタリックな感じは今回表現できませんでした…)。
ICチップを付けたい場合は、下記の画像をご利用下さい(私がエクセルで作成したものです)。
6.所感
エクセルで作成する場合の方法は下記に記載していますが、それと比べるとクオリティは低くなってしまいました。 今の私の技術力ではここまでしかできませんでしが、今後改善できればと思います。
[参考]【クレジットカード】クレジットカード風のオリジナル画像／名刺を作ってみる【エクセル】
fintechdiary.hatenablog.com
最近は仕事が忙しいのと辛いのとで、なかなか家でプログラミングする気力がおきませんでした。
一時的にですが若干余裕ができたので、今週は久しぶりに作業できました。
納期に追われず、自分の好きなものを作るのはやはり楽しいですね。
来週からまた忙しくなりそうですが、余裕ができた時にまた何か作りたいと思います٩( 'ω' )و
