如何動態裁剪x-y座標圖像？

所以我有一些erb基於用戶輸入動態生成分步說明。在每個步驟中都有文本，然後至少有一個圖像標籤覆蓋在頂部（突出顯示步驟說明文本所指的內容）。現在的問題是圖像尺寸太大，不利於在移動設備上顯示。（它們的最大寬度是640px）。我有每個標籤的X-Y位置，所以我想動態裁剪每個標籤，以減少指令加載時的寬度（我認爲300px會很好）。我想知道怎麼做這個最好的方法呢？在此先感謝如何動態裁剪x-y座標圖像？

的jQuery（如何顯示在標籤）

$('span.i_contact').each(function() {     
    var pos_width = $(this).data('pos-width'); 
    var pos_height = $(this).data('pos-height'); 
    var xpos = $(this).data('pos-x'); 
    var ypos = $(this).data('pos-y'); 
    var taggedNode = $('<div class="tagged" />') 
    taggedNode.css({ 
     "border":"5px solid orange", 
     "width":pos_width, 
     "height":pos_height, 
     "left":xpos, 
     "top":ypos 
    }); 

    var n = $(this).data('index') 
    $('.i_tagmap' + n).append(taggedNode) 
    console.log(taggedNode.position())  
}); 

$("span.o_contact").each(function() {    
    var pos_width = $(this).data('pos-width'); 
    var pos_height = $(this).data('pos-height'); 
    var xpos = $(this).data('pos-x'); 
    var ypos = $(this).data('pos-y'); 

    var taggedNode = $('<div class="tagged" />') 
    taggedNode.css({ 
     "border":"5px solid green", 
     "width":pos_width, 
     "height":pos_height, 
     "left":xpos, 
     "top":ypos 
    }); 
    var n = $(this).data('index') 
    $('.o_tagmap' + n).append(taggedNode)   
});

厄爾布：

<% n = steps.index(step) %> 
<h2 style="margin-left:20px;"> Step <%= n + 1%></h2> 
<div class="stepcontainer"> 
<div class="steptext"> 
    <% if step.priority == 1 %> 
     <%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_product.full_name}. Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_product.full_name}." %> 
    <% elsif step.priority == 2 %> 
     <%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_product.full_name}. Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_product.full_name}." %> 
    <% elsif step.priority == 3 %> 
     <%= "Plug the #{step.o_connection.product.full_name } #{step.o_connection.cord_type.name} Cable into the wall." %> 
    <% elsif step.priority == 4 %> 
     <%= "Plug the #{step.i_connection.cord_type.name} end of the cable into the #{step.i_connection.product.full_name}. Then plug the #{step.o_connection.cord_type.name} end into the #{step.o_connection.product.full_name}." %> 
    <% elsif step.priority == 5 %> 
     <%= "Plug #{step.o_connection.product.full_name}" %> 
    <% elsif step.priority == 6 %> 
     <%= "Touch the #{step.o_connection.button.name} Button on the #{step.o_connection.product.full_name}" %> 
    <% end %> 
</div> 
<div class="modalbutton"> 
<%= render(step.flags.new) %> 
</div> 

<div class="productimg">  
    <span class="o_contact o_contact<%= n %>" data-pos-x="<%= step.o_connection.pos_x %>" data-pos-y="<%= step.o_connection.pos_y %>" data-pos-width="<%= step.o_connection.pos_width %>" data-pos-height="<%= step.o_connection.pos_height %>" id="spanid<%= n %>" data-index="<%= n %>"> </span> 

<% if step.input_contact.present? %> 
    <span class="i_contact i_contact<%= n %>" data-pos-x="<%= step.i_connection.pos_x %>" data-pos-y="<%= step.i_connection.pos_y %>" data-pos-width="<%= step.i_connection.pos_width %>" data-pos-height="<%= step.i_connection.pos_height %>" ="spanid<%= n %>" data-index="<%= n %>"></span>  

    <div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;"> 
     <%= link_to image_tag(step.i_connection.image.image.url(:medium)), "#{step.i_connection.image.image.url(:large)}", class: "fancybox" %> 
     <div class="i_tagmap<%= n %>"></div> 
    </div>  
</div> 

<div class="cableimg"> 
    <% if step.i_connection.cord_type.present? %> 

      <%= image_tag(step.i_connection.cord_type.image.url(:thumb), :class => "orange") %> 
    <% end %>   
    <% end %> 

    <% if step.o_connection.cord_type.present? %> 
      <%= image_tag(step.o_connection.cord_type.image.url(:thumb), :class => "green") %>  
    <% end %> 
</div> 

<% if step.o_connection.button.present? %> 
    <div class="productimg"> 
     <div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;"> 
      <%= link_to image_tag(step.o_connection.image.image.url(:medium)), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %> 
      <div class="o_tagmap<%= n %>"></div> 
     </div> 
    </div> 

<% else %> 
    <div class="productimg"> 
     <div id="image_panel<%= n %>" style="float:left; width:300px; position:relative;"> 
      <%= link_to image_tag(step.o_connection.image.image.url(:medium)), "#{step.o_connection.image.image.url(:large)}", class: "fancybox" %> 
      <div class="o_tagmap<%= n %>"></div> 
     </div> 
    </div>    
<% end %> 
</div> 
<br>

來源

2013-08-03 Eric Filkins