如何使用ImageMagick或CSS实现Gallery Wrap（画廊装裱）效果？

Gallery Wrap是一种画布装裱工艺，会将图像的边缘区域拉伸粘贴到画框的边框上（通常是1.5英寸厚度的画框），效果示意图如下：

以下分别介绍使用ImageMagick和CSS实现该效果的方法：

一、ImageMagick 实现方式 #

ImageMagick可通过命令行工具处理图像，生成符合Gallery Wrap效果的成品图，核心逻辑是提取图像边缘区域，拉伸至画框厚度对应的尺寸后，拼接回原图四周。

假设画框厚度对应像素为45px（1.5英寸按96DPI换算），执行以下命令：

# 提取并拉伸上下左右边缘区域
convert input.jpg -gravity north -crop x45+0+0 +repage -resize x45! top_edge.png
convert input.jpg -gravity south -crop x45+0+0 +repage -resize x45! bottom_edge.png
convert input.jpg -gravity west -crop 45x+0+0 +repage -resize 45! left_edge.png
convert input.jpg -gravity east -crop 45x+0+0 +repage -resize 45! right_edge.png

# 拼接边缘与原图，生成最终效果
convert input.jpg \
  \( top_edge.png \) -gravity north -composite \
  \( bottom_edge.png \) -gravity south -composite \
  \( left_edge.png \) -gravity west -composite \
  \( right_edge.png \) -gravity east -composite \
  gallery_wrap_output.jpg

步骤说明：先裁剪原图的上下左右边缘条，将边缘条拉伸至目标厚度尺寸，最后把拉伸后的边缘拼接回原图四周，模拟装裱时的拉伸效果。

二、CSS 实现方式 #

CSS无需修改原图，可通过背景属性结合伪元素在网页上模拟Gallery Wrap的视觉效果。

示例代码如下（假设容器尺寸为800x600px，画框厚度为45px）：

.gallery-wrap {
  width: 800px;
  height: 600px;
  position: relative;
  background: url('your-image.jpg') center/cover no-repeat;
}

.gallery-wrap::before,
.gallery-wrap::after,
.gallery-wrap .edge-top,
.gallery-wrap .edge-bottom {
  content: '';
  position: absolute;
  background: url('your-image.jpg') no-repeat;
}

/* 左侧边缘：截取原图左侧区域并拉伸 */
.gallery-wrap::before {
  left: -45px;
  top: 0;
  width: 45px;
  height: 100%;
  background-position: left center;
  background-size: auto 100%;
}

/* 右侧边缘：截取原图右侧区域并拉伸 */
.gallery-wrap::after {
  right: -45px;
  top: 0;
  width: 45px;
  height: 100%;
  background-position: right center;
  background-size: auto 100%;
}

/* 顶部边缘：截取原图顶部区域并拉伸 */
.gallery-wrap .edge-top {
  top: -45px;
  left: 0;
  width: 100%;
  height: 45px;
  background-position: center top;
  background-size: 100% auto;
}

/* 底部边缘：截取原图底部区域并拉伸 */
.gallery-wrap .edge-bottom {
  bottom: -45px;
  left: 0;
  width: 100%;
  height: 45px;
  background-position: center bottom;
  background-size: 100% auto;
}

对应的HTML结构：

<div class="gallery-wrap">
  <div class="edge-top"></div>
  <div class="edge-bottom"></div>
</div>

原理说明：通过伪元素和额外的div元素，分别截取原图的边缘区域，拉伸至画框厚度对应的尺寸后，放置在主容器的四周，模拟装裱边框的拉伸视觉效果。

内容的提问来源于stack exchange，提问作者Khan