是否可以使用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變量中。

這可能嗎？

特克斯-加威因

Answer 1

排序。 通過將額外的參數添加到.drawImage（）方法，將圖像繪制到畫布上並進行裁剪。

Answer 2

如果您只想裁剪圖像，而不以任何方式縮放，則可以使用overflow:hidden創建某種父容器，然后使用JS縮放其大小。