百聞は一見にしかず…

(1) 2 つの円が明らかに完全な円である、(2) 各領域の開始部分と終了部分を角度で定義できる、たとえばセクション 1 のような画像を生成する方法を知りたいです。垂直方向から 0 ラジアンで開始し、垂直方向から pi/2 ラジアンで終了するなど、(3) 各領域の色を定義できます。

実際、リングの外側と内側に黒い境界線があってはなりません。各領域の境界線は、各領域と同じ色にする必要があります。

たとえば、ImageMagick でこれを行うにはどうすればよいでしょうか。

グラビアでメガネやペンなどをパーソナライズできるウェブショップに取り組んでいます...

このショップのような「プレビュー」機能も必要です (「Vorschau」をクリック): https://www.geschenke-online.de/graviertes-whiskyglas-scotch-whiskey-drinker-mit-wunschname-und-geburtsjahr

彼らはこのリンクからプレビュー画像を生成しています: https://hotrod-factory.com/cgi-bin/webproducer?motiv=pde-leo-k18-whg25.dtm&text_field1=Mytext%20&text_field2=2015&width=600

.dtm ファイルとは何ですか? また、この機能を Web サイトに実装するにはどうすればよいですか?

前もって感謝します！

<img/>タグで使用できる svg を動的に作成したいと考えています。これ自体は簡単です。svg を作成し、ヘッダーを設定して、生成されたパーツを正しい場所にエコーします。

問題は、svg にフォントを埋め込めるようにしたいということです。svg の css でルールを使用しようとしましたが、うまくいきませ@font-faceんでした (MDN は、Android と Safari でのみ動作すると言っています)。

これを行うクロスブラウザの方法はありますか?

私が検討した解決策：

考えられる解決策 #01:

ソリューション：

@font-faceメイン ファイルで、 css ルールを使用する svg ファイルを作成し、exec()inkscape を使用してその svg を別の svg に変換し、すべての文字をパスに変換します。次に、正しいヘッダーを使用して、タグecho file_get_contents($inkscape_file)で使用できる svg として出力できます。<img/>

これに関する問題：

これにより、2 つの追加ファイルが作成されるため、非常に非効率的です。さらに、各ユーザーが複数の画像を生成することになるため、その画像が占めるスペースは驚異的に大きくなります。

考えられる解決策 #02:

ソリューション：

イラストレーターでテンプレートを作成し、svg として保存し、すべてのグリフを埋め込むオプションにチェックを入れます。次に、テキストとスタイルを PHP スクリプトのオプションに置き換えます。正しいヘッダーを使用して、これを出力します。

これに関する問題：

これにより、使用できるフォントの量が大幅に制限されます。これは、私がテンプレートを作成したものに限定されるためです。私が望んでいた動作は、ユーザーが独自のフォントをアップロードして使用するオプションを追加することでした。このソリューションでは、それができません。

関連する可能性のある追加情報:

1. 私の開発サーバーは fedora を実行しており、実動サーバーは redhat を使用しています。

2. @font-face私が現在使用しているルールは次のとおりです。

   @font-face { font-family: Potato; src: url("/fonts/potato.otf"); }

写真モザイクは、既存の画像をサムネイルのモザイクとして再生成する手法です。元のピクセルの色は、カバー タイルの色にほぼ似ている必要があります。

たとえば、ロールプレイング ゲーマーは、ユーザーのサムネイル画像から世界地図を再生成しました。

この画像のソース コードは githubで共有されていますが、特定の世界地図タスク用にかなり調整されています。

既存の画像を一連のサムネイルのコラージュ/モザイクとして再生成するための一般的な解決策はありますか?

開発中のサイトをブートストラップに変換しています。私のページの 1 つで、ユーザー入力に基づいて画像を動的に作成します。

次のようなページから始めます。

以降 ：

ユーザーが雑誌の表紙の 1 つをクリックすると、左上隅に新しい画像が生成されます。画像の他の部分は、他のページでユーザーが選択したものです。

私の問題は、コードを生成する JavaScript が HTML に width= および height= コードを挿入することです。これはブートストラップのレスポンシブ画像を無効にするため、それを取り除きたいのですが、方法がわかりません。他のすべては正常に機能しています。

プロセスは次のとおりです。

HTML から始めます。

ページ エントリに画像はありません。デフォルトのイメージが生成されます。

顧客が雑誌の表紙をクリックすると、リクエストが発行されます。

関数 buildFrameUrl は次のようなものを返します。

これが getImage のコードです

これにより生成される HTML は次のようになります

width= は、ここで設定された値から取得されます。

高さについても同じです。

この行を削除しようとしましたが、fShowLoading コードから 32x32 の画像が得られます。fShowLoading ブロックから幅と高さ = を削除すると、適切なサイズの画像が得られますが、結果の html には幅 = と高さ = が含まれています。

width= および height= html の生成を排除して、ブートストラップが画像のサイズをレスポンシブに変更できるようにする方法について何か考えはありますか?