how to dynamically crop an image around x-y coordinates?

Question

So I have some erb that dynamically generates step-by-step instructions based on a users input. In each step there is text and then at least one image with an image tag overlaid on top (highlights what the step instruction text is referring to). The problem is right now the image dimensions are too big to be conducive for displaying on mobile. (Their max width is 640px). I have the XY position of each tag so I want to dynamically crop around each tag to reduce their width when the instructions load (I think 300px would be fine). I was wondering what would be the best way of going about this? Thanks in advance

jQuery (How the tags are displayed)

$('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)        
});

Erb:

<% 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>

Answer 1

You could experiment with Jcrop on the client side:

http://railscasts.com/episodes/182-cropping-images-revised?view=asciicast

Or RMagick on the server side:

http://railscasts.com/episodes/374-image-manipulation

Answer 2

filepickerio is really cool and provides image post-processing capabilities if you're looking for an end to end solution. Check out the last example on the homepage