Question

您好，我有一个小应用程序，使用img工具包共享图像的png。这些图像是用于社交的，因此我想创建多个图像版本，例如instagram的1080 X 1080版本和LinkedIn的1240 X 644版本。

我要问的问题是如何使用imgkit为同一视图创建多个图像

当前在控制器中创建图像

def show
    respond_to do |format|
      format .html
      format.png do
        kit = IMGKit.new render_to_string, width: 1080, height: 1080
        send_data kit.to_png, type: "image/png", disposition: "inline"
      end
    end
  end

，并通过共享栏在视图中访问

<div class="row d-flex justify-content-center mb-1 mr-lg-5 ml-lg-5 pr-lg-5 pl-lg-5">
  <div class="col d-flex justify-content-center align-items-center pt-3 border-dark border-top border-left border-bottom">
    <p class="text-justify text-center">SHARE:</p>
  </div>
  <div class="col facebookshare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to "https://www.pinterest.com/pin/create/button/" do %>
      <i class="fab fa-facebook-f fa-2x d-none d-sm-block"></i>
      <i class="fab fa-facebook-f d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
  </div>
  <div class="col instashare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to "https://www.pinterest.com/pin/create/button/" do %>
      <i class="fab fa-instagram fa-2x d-none d-sm-block"></i>
      <i class="fab fa-instagram d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
  </div>
  <div class="col twittershare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to "https://twitter.com/share?ref_src=twsrc%5Etfw" do %>
      <i class="fab fa-twitter fa-2x d-none d-sm-block"></i>
      <i class="fab fa-twitter d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </div>
  <div class="col pinteresrshare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to("https://www.pinterest.com/pin/create/button/") do %>
      <i class="fab fa-pinterest-p fa-2x d-none d-sm-block"></i>
      <i class="fab fa-pinterest d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
  </div>
  <div class="col tumblrshare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to("http://tumblr.com/widgets/share/tool?canonicalUrl=\#{quote_url(@quote)}", data: {
        content: quote_url(@quote, format: 'png'),
        caption: @quote.quote,
        url: quote_url(@quote) })do %>
    <i class="fab fa-tumblr fa-2x d-none d-sm-block"></i>
    <i class="fab fa-tumblr d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>
  </div>
  <div class="col buffershare d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom">
    <%= link_to("http://bufferapp.com/add", data: {
        picture: quote_path(@quote, format: 'png'),
        text: "this is the tweet text",
        url: quote_path(@quote),
        via: "@motiv8kit"}) do %>
    <i class="fab fa-buffer fa-2x d-none d-sm-block"></i>
    <i class="fab fa-buffer d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
    <script type="text/javascript" src="https://static.buffer.com/js/button.js"></script>
  </div>
  <div class="col dload d-flex justify-content-center align-items-center p-0 m-0 border-dark border-top border-bottom border-right">
    <%= link_to quote_path(@quote, format: "png"), download: "" do %>
      <i class="fas fa-download fa-2x d-none d-sm-block"></i>
      <i class="fas fa-download d-sm-none d-md-none d-lg-none d-xl-none"></i>
    <% end %>
  </div>
</div>

Answer 1

quote_path是show的命名路由，对吗？如果是这样，则将大小添加为参数：

class MyClass
  SIZES = {'linkedin' => [1240, 644], 'instagram' => [1080, 1080]}

  def show    
    respond_to do |format|
      format .html
      format.png do
        w, h = SIZES[params[:s]] # Remember to check presence of :s
                                 # and set default values
        kit = IMGKit.new render_to_string, width: w, height: h
        send_data kit.to_png, type: "image/png", disposition: "inline"
      end
    end
  end
end

您认为（无论如何都需要自适应链接）：

<%= link_to quote_path(@quote, format: "png", s: 'linkeding') do %>
<% end %>
<%= link_to quote_path(@quote, format: "png", s: 'instagram') do %>
<% end %>

Img Kit在导轨中创建多种图像尺寸

1 个答案: