添加图像作为边框

Question

我有一张图片，我称之为user_image，我还有另一张图片，我称之为border_image。

我想做的功能就像当我点击border_image (*Cars2_h.gif*) 时它应该看起来像user_image (flowers.jpeg) 的边框。

现在我的老团队成员已经在 java 中使用图像渲染完成了这项工作，我不确定他们是如何做到的。

我想在 ruby​​ 中执行相同的功能（迁移到 Ruby On Rails）。我非常需要你们的帮助。

我尝试使用mini_magick 复合方法，但它没有按预期工作。

Answer 1

如果我正确理解您想要实现的目标，那么这在 CSS 中更容易在客户端完成。使用 CSS 背景属性来定义边框图像，分配给 CSS 类，然后单击只需切换主图像的 CSS 类。在它周围提供填充，以便背景可见，仅此而已。这是一些伪代码，我为您创建了一个 JSFiddle，您可以在这里看到它的运行情况http://jsfiddle.net/RK8CD/

HTML

<button id="toggle">toggle background</button> 
<img id="user_image" src=".....">

CSS

.withBackground { 
   background: url('....') repeat;
   padding:20px;
}

JS

$('#toggle').click(function() {
    $('#user_image').toggleClass("withBackground");
});

如果您想使用多张图片作为背景并让用户选择，那么最好直接设置 CSS 属性，而不是为每张图片制作单独的类。