如何围绕 x-y 坐标动态裁剪图像？

Posted 2023-02-25

【中文标题】如何围绕 x-y 坐标动态裁剪图像？

【英文标题】：how to dynamically crop an image around x-y coordinates?

【发布时间】：2013-08-03 14:50:59

【问题描述】：

所以我有一些 erb 可以根据用户输入动态生成分步说明。在每个步骤中都有文本，然后至少有一个图像，上面覆盖有图像标签（突出显示步骤说明文本所指的内容）。现在的问题是图像尺寸太大，不利于在移动设备上显示。 （它们的最大宽度为 640 像素）。我有每个标签的 X-Y 位置，所以我想在每个标签周围动态裁剪以在指令加载时减小它们的宽度（我认为 300px 就可以了）。我想知道解决这个问题的最佳方法是什么？提前致谢

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)        
);

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- data-pos- 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- data-pos- ="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>

【参考方案1】：

您可以在客户端试用 Jcrop：

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

或服务器端的 RMagick：

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

【参考方案2】：

filepickerio 非常酷，如果您正在寻找端到端解决方案，它还提供图像后处理功能。查看主页上的最后一个示例