前提・実現したいこと

質問箱のようにテンプレートの画像に文字を乗せて画像を生成したいです。
ImageMagick等で毎回画像を生成するのもいいかもしれませんが、費用を安く抑えたいためURLパラメーターに情報を乗せて画像をその都度生成したいです。

例

例えばplacehold.jpではURLパラメーターに色やピクセルサイズを指定して生成しています。当然全てのパターンの画像を作ってデータベースで保管しているわけではないと思います。

聞きたいこと

Rubyで実装しているのですが、そのほかの言語でも構いませんので、実装方法がわかる方いらしたら大まかな手順を教えてください。
もしくは15kB程度の容量になる予定なのですが、データベースに画像を保存しておくのと、その都度生成して保存はしないのではどちらが安くすみそうでしょうか。

Lhankor_Mhy

2019/06/19 08:50

補足願います。『ImageMagic等で毎回画像を生成するのもいいかもしれませんが、サーバーに負担をかけたくない』とのことですが、サーバで画像を生成しない、という意味ですか？

退会済みユーザー

2019/06/19 08:51

すみません、僕が勘違いしていたり、うまく説明できていない箇所があるので訂正します。『ImageMagic等で毎回画像を生成するのもいいかもしれませんが、サーバーに負担をかけたくない』 ↓ データベースに負担をかけたくないので、サーバーでその都度生成しようかなと思っています。『当然全てのパターンの画像を作っている訳ではないと思います。』 ↓ 全てのパターンをデータベース上に保存している訳ではないと思います

Lhankor_Mhy

2019/06/19 08:53

それなら、ImageMagic でいいような……？

m.ts10806

2019/06/19 08:56

ImageMagick　ですね（なるべくこういうものは正確に書いたほうが。）既に回答は書きましたが質問を修正してください。

退会済みユーザー

2019/06/19 09:06

質問内容の修正をしました。

x_x

2019/06/19 09:07

どこのサーバーで作っているのですか？ストレージ費用が高いのかそうでないのかはっきりしません。

hentaiman

2019/06/19 09:54

imagickの利用と費用がどう関係するのかを知りたい作った画像をWEBサーバーに保存するならデータベースに負担はかからないむしろ都度作る方がアクセス数によってはWEBサーバーに負担がかかる

行動規範の内容に同意します

回答4件

URLパラメーターに情報を乗せて画像をその都度生成したいです。

クライアントで処理をするイメージなのでしょうか？
この場合、javascriptを利用してCanvasに描画すると言う方法があります。
http://www.html5.jp/canvas/how6.html

ただ、貴殿の望むユースケースに合致するのかはわかりません。

投稿2019/06/19 10:41

t_obara

総合スコア5488

環境にもよりますがsvgをimgで呼び出すとか
例えばphpなら

myimage.php

PHP
1<?PHP
2header('content-type:image/svg+xml');
3?>
4<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" width="240" height="100" style="background-Color:cyan">
5<rect x="5" y="5" rx="5" ry="5" width="230" height="70" fill="white"></rect>
6<text x="20"  y="38" fill="black" >おすすめのコンシューマ or</text>
7<text x="65"  y="58" fill="black" >PCゲームは ?</text>
8</svg>

これを普通にimgで呼び出します

mypage.html

HTML
1<img src="myimage.php">

上記phpなので任意にパラメータや文字列を書き換えればよいです

追記

urlに埋め込むとこうなります

HTML
1<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLUNvbG9yOmN5YW4iPg0KPHJlY3QgeD0iNSIgeT0iNSIgcng9IjUiIHJ5PSI1IiB3aWR0aD0iMjMwIiBoZWlnaHQ9IjcwIiBmaWxsPSJ3aGl0ZSI+PC9yZWN0Pg0KPHRleHQgeD0iMjAiICB5PSIzOCIgZmlsbD0iYmxhY2siID7jgYrjgZnjgZnjgoHjga7jgrPjg7Pjgrfjg6Xjg7zjg54gb3I8L3RleHQ+DQo8dGV4dCB4PSI2NSIgIHk9IjU4IiBmaWxsPSJibGFjayIgPlBD44Ky44O844Og44GvID88L3RleHQ+DQo8L3N2Zz4=">
2<object data="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjI0MCIgaGVpZ2h0PSIxMDAiIHN0eWxlPSJiYWNrZ3JvdW5kLUNvbG9yOmN5YW4iPg0KPHJlY3QgeD0iNSIgeT0iNSIgcng9IjUiIHJ5PSI1IiB3aWR0aD0iMjMwIiBoZWlnaHQ9IjcwIiBmaWxsPSJ3aGl0ZSI+PC9yZWN0Pg0KPHRleHQgeD0iMjAiICB5PSIzOCIgZmlsbD0iYmxhY2siID7jgYrjgZnjgZnjgoHjga7jgrPjg7Pjgrfjg6Xjg7zjg54gb3I8L3RleHQ+DQo8dGV4dCB4PSI2NSIgIHk9IjU4IiBmaWxsPSJibGFjayIgPlBD44Ky44O844Og44GvID88L3RleHQ+DQo8L3N2Zz4="></object>
3

投稿2019/06/19 09:26

編集2019/06/19 11:32

yambejp

総合スコア114839

退会済みユーザー

2019/06/19 10:46

この方法の延長線上の解が面白そうな気がします(個人的な興味ｗ)

行動規範の内容に同意します

サーバーに負担をかけたくないためURLパラメーターに情報を乗せて画像をその都度生成したいです。

えっと、サーバ以外のどこで生成することを意図していますでしょうか。

当然全てのパターンの画像を作っている訳ではないと思います。

どうしてそう考えたのでしょうか？ PNGで返している以上、対応した画像をサーバサイドで生成しています。

投稿2019/06/19 08:47

maisumakun

総合スコア145184

maisumakun

2019/06/19 08:49

一度生成した画像についてはキャッシュしてサーバサイドの処理をバイパスする、ということは可能です。

退会済みユーザー

2019/06/19 08:55

なるほど、具体的な方法を教えていただいてもよろしいでしょうか？また、15kb程度の小さな容量の画像になると思うのですが、保存するのとその都度生成するのではどちらがより安価になりそうか教えてください。

maisumakun

2019/06/19 08:57 編集

それこそ、サーバより手前にCDNを挟んでしまって金の力で解決する手段から、ローカルにキャッシュファイルを作ってあれば読み込み、という方法まで千差万別です。

rana_kualu

2019/06/19 12:17 編集

> 対応した画像をサーバサイドで生成しています。間違い(必ずしも正しくない)。サーバサイドを使用せず、クライアントのみでの画像生成は可能です。 https://codepen.io/joseluisq/pen/mnkLu https://codepen.io/gtk2k/pen/WpNyMW まあplacehold.jpなどは、リクエストの都度ImageMagick等で画像生成していると思いますが。

maisumakun

2019/06/19 12:22

> rana_kualuさん（HTTPリクエストに対するレスポンスを） PNGで返している以上、のカッコ内を省略した表現でした。サーバにPNGのリクエストを投げて、その結果が返ってきているので、サーバサイド生成と判断しました。

行動規範の内容に同意します

提示のような形であれば、「単に文字列が画像に載っている」だけとも言えるので
テンプレート画像一枚だけ用意しておいて文字列込みの画像をサーバーサイドで作って表示するといったことは可能でしょう。

PHPなら他にもGDライブラリというものもあります。
PHPでもImageMagickは使えますね。

いずれにしてもリクエストパラメータによって毎回画像は生成されることになりますが、それは画像ファイル実体がサーバーに置かれるというわけではありません。
※これは動的なWebページと考え方としては同じです。
※そもそもサーバーに負荷がドンとかかるような大きな画像を生成することってそうないですし提示のものくらいでしたら余裕ではないでしょうか。

いっそ文字だけDBから取得して画像はJavaScriptでCanvasで書いてしまうという手も。

投稿2019/06/19 08:55

編集2019/06/19 09:19

m.ts10806

総合スコア80850