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

Question

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

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

我在 class 中使用 javascript 文件加载器 API，如下所示：

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

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

Answer 1

这是加载图像并从中获取 width/height 的方式。

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。

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

center Image using background position with pixels

javascript

css

filereader

background-position