使用带像素的背景位置的中心图像

Question

信息详情： 我有一个图像编辑器，我在其中跟踪单击并使用background-position 拖动以重新定位图像。我想将图像自动居中并允许单击和拖动功能。我可以使用center 或50%，但点击和拖动使用的是像素，所以我最好：

1. 找到图像的宽度和高度（我正在努力做到这一点）
2. 找到包装 div 的宽度和高度（我可以做到这一点）
3. 以像素为单位计算两者的中心并将这些值设置为background-position

我在 class 中使用 javascript File Loader API，如下所示：

this.reader.onload = file => {
      // setting image on class via `this.reader.result`
    };

如何在使用粗箭头携带上下文时获取文件的宽度和高度？有可能吗？

Answer 1

这是您加载图像并从中获取宽度/高度的方式。

var image = new Image();

image.onload = function() { 
  // the onload function will be called when the image has been loaded
  var height = img.height;
  var width = img.width;

  // more code here
}

image.src = url;

要以像素为单位获取图像的中心，只需将高度和宽度均除以 2。