便利な画像置換サービス

デモコンテンツヘルパー

Webサイトの開発に関与する多くのWebスタジオは、製品のデモ中、つまり、デモコンテンツを含む完成したサイトを表示する必要があるときに困難に直面します。 ここでは、あらゆる方法で多くの画像を回転して探し、必要なサイズに調整し、場合によっては1つの配色に固執する必要があります。

ここでは、 Cambeltオンラインサービス（ロシア語- タイミングベルト ）が助けになります。これにより、オンザフライのプロジェクトで必要な画像が生成されます。







画像のソースとして必要なサイズのURLアドレス（たとえば、 cambelt.co/468x60 ）を指定するだけです。 テキストを使用してラベルやさまざまな色を作成することもできます。





公式サイトのメインページからの引用です

サイトの画像を簡単に作成できるようになりました。このサイトからのリンクを「src」タグに挿入し、必要な寸法を指定するだけです

例

今、最も重要なことは例です！

1. 通常の画像

   
   
   それは本当に簡単です、あなたがしなければならないのはあなたが使用したいサイズをリンクで示すことです。 正方形の画像を提供する300の値を1つだけ指定するか、形状を制御するための2つの300x200の値を指定できます。
   
   

   <img src="http://cambelt.co/300x200" alt="image" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

2. カスタムテキスト

   
   
   また、非常に簡単です-寸法を指定した後、画像に表示するテキストを追加します。 スペースを+に置き換える必要があります。 画像の幅を超えないように注意してください。
   
   

    <img src="http://cambelt.co/300x200/Habrahabr" alt="image" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

3. 背景色

   
   
   クエリの最後に？Color = 25d54e行を追加することで、カスタムカラーを設定できます-このように
   
   

    <img src="http://cambelt.co/300x200/Colors?color=25d54e"alt="image" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

4. テキストの色

   
   
   ？Color =クエリ文字列を使用して、要素のカスタム色を指定できます。 前景色のみを設定するには、プレフィックス（カンマ）とHTMLカラーコードが必要です。
   
   

    < img src="http://cambelt.co/300x200/Habrahabr?color=,987423" alt="image"/>
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

5. 両方のタイプの色を組み合わせる

   
   
   したがって、独自の前景色を背景色と組み合わせて使用​​するには、次のように、両方の部分？Color =を行に挿入するだけです。
   
   

    <img src="http://cambelt.co/300x200/Habrahabr?color=234653,eeeeee" alt="image" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

6. フォントを使用します

   
   
   また、サイトで提供される幅広い選択から特別なフォントを指定して、画像内にテキストを表示することもできます。 使用可能なフォントの完全なリストについては、 Font Showcaseタブにアクセスしてください。 それらを使用するには、 font =？を指定するだけです。 ：
   
   

    <img src="http://cambelt.co/300x200/Habrahabr?font=Homestead-Display" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

7. フォントサイズ

   
   
   リクエストでfont_size =パラメータを渡すことでカスタムフォントサイズを設定できますか？：
   
   

    <img src="http://cambelt.co/300x200/Habrahabr?font_size=12" alt="image" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

8. ファイル形式

   
   
   3つの形式のいずれかで画像をリクエストできます。 このサービスはデフォルトですべてのPNGファイルを提供しますが、他のファイル（JPG、GIF）を希望する場合は、 ？Format =パラメーターを使用して必要なファイルを取得できます。
   
   

    <img src="http://cambelt.co/300x200/JPG?format=jpg" alt="image" />
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   
   
   

9. 両方のタイプの色を組み合わせる

   
   
   安全なHTTPS接続を介して画像を受信することもできます-安全なWebページで使用するため：
   
   

    <img src="https://cambelt.herokuapp.com/300x200/Secure" alt="image" />