捕获网页的快照答案

【问题标题】：Capturing a snapshot of a web page捕获网页的快照
【发布时间】：2014-09-01 04:03:29
【问题描述】：

我正在使用cloudinary's url2png 插件来捕获我网站上呈现的页面。它将捕获页面但没有任何样式。该页面需要几秒钟才能加载，所以我在想它可能只需要稍等片刻才能捕获它？

控制器：

@user = User.find_by_username(params[:username])


    @user_items_designs = ItemsDesign.
        select('items_designs.id ,
                            items_designs.name,
                            items_designs.item_id,
                            items_designs.description,
                            items_designs.category,
                            items_designs.style,
                            items_designs.brand,
                            items_designs.color,
                            items_designs.make,
                            items_designs.special_name,
                            items_designs.likes,
                            items_designs.image_name,
                            items_designs.image_name_hover,
                            items_designs.image_name_selection,

                            users_items_designs.hide,
                            users_items_designs.location_id,

                            locations.z,
                            locations.x,
                            locations.y,
                            locations.height,
                            locations.width,
                            locations.section_id,

                            items.name as items_name,
                            items.name_singular as items_name_singular,

                            items.clickable,
                            sections.name as section_name'
    ).
        joins(:users_items_designs).
        where('user_id = ?', @user.id).
        joins('LEFT OUTER JOIN locations  ON locations.id = users_items_designs.location_id').
        joins('LEFT OUTER JOIN items  ON items.id = items_designs.item_id').
        joins('LEFT OUTER JOIN sections ON sections.id = locations.section_id')

    @items = []
    @user_items_designs.each do |item|
      location = Location.find(item.item_id)
      @items << {id: item.id, item_id: item.item_id, name: item.name, description: item.description, image_name: item.image_name, x: location.x.to_i, y: location.y.to_i, z: location.z.to_i}
    end

捕获页面的代码必须在视图中：

<%
   snapshot = cl_image_tag("http:****",
                           :type => "url2png",
                           :sign_url => true)

%>
<%= snapshot %>

这将构建要捕获的页面：

<% @items.each do |image| %>
            <% puts image.inspect %>
            <div class="room_design_container_<%= image[:item_id] %>" style="position: absolute; left: <%= "#{image[:x]}px" %>; top: <%= "#{image[:y]}px" %>; z-index: <%= image[:z] %>;">
              <img class="room_design"
                   src="<%= image[:image_name].url %>"

                   data-main-src-client="<%= image[:image_name].url %>"
                   data-main-src-server="<%= image[:image_name].url %>"

                   data-design-id-server="<%= image[:id] %>"

                   data-design-item-id="<%= image[:item_id] %>"

                   data-design-location-id="<%= image[:location_id] %>"
              />
            </div>
        <% end %>

【问题讨论】：

标签： css ruby-on-rails cloudinary

【解决方案1】：

您可以指定任何URL2PNG parameters 作为要捕获的原始网站的后缀。后缀为/url2png/，后跟URL2PNG的任意参数，格式为key=value|key=value|key=value。

下面是一个设置delay参数的例子：

cl_image_tag("http://www.****.com/url2png/delay=5|fullpage=false", 
             :type => "url2png", :sign_url => true)

【讨论】：

【解决方案2】：

您可以指定任何URL2PNG parameters 作为要捕获的原始网站的后缀。后缀为/url2png/，后跟URL2PNG的任意参数，格式为key=value|key=value|key=value。

下面是一个设置delay参数的例子：

cl_image_tag("http://www.example.com/url2png/delay=5|fullpage=false", 
             :type => "url2png", :sign_url => true)

【讨论】：