是否可以使用CSS / JavaScript裁剪div的背景图像？

Question

所以我得到了一个div。该div有一个背景图片。背景图像是世界地图。我需要在两个精确点处剪切这个图像。从左侧剪切地图很容易。

在CSS中

.le-map {
  background-image: url('../img/le-map-of-le-world.mlg');
  background-size: 100%;
  background-repeat: no-repeat;
}

在JavaScript中

var clipLeft = [Number of pixels left into the image, 
from which I want to begin cropping the image] 
$leMap.css({ background-position: -(clipX)}

我设置div来拍摄地图的背景图像，然后精灵图像使其向左移动我指定的特定像素数。

但是我也希望从右侧裁剪它，在另一个特定点，也可以存储在JavaScript变量中。

这可能吗？

THX --Gaweyne

Answer 1

对它进行排序。将图像绘制到画布上并通过向.drawImage（）方法添加额外参数来裁剪它。

Answer 2

如果您只想裁剪图像，而不是以任何方式缩放，可以使用overflow:hidden创建某种父容器，然后使用JS缩放其大小。