javascript -如何在鼠标位置上缩放图像并在div上显示结果

<div id="image-container">
  <img id="image" src="image.jpg" alt="Image">
</div>

<div id="result"></div>

var imageContainer = document.getElementById("image-container");
var resultDiv = document.getElementById("result");

imageContainer.addEventListener("mousemove", function(event) {
  var mouseX = event.pageX - imageContainer.offsetLeft;
  var mouseY = event.pageY - imageContainer.offsetTop;

  // 在这里执行缩放图像的逻辑
});

imageContainer.addEventListener("mousemove", function(event) {
  var mouseX = event.pageX - imageContainer.offsetLeft;
  var mouseY = event.pageY - imageContainer.offsetTop;

  var image = document.getElementById("image");
  var scale = 0.5;

  var scaledWidth = image.width * scale;
  var scaledHeight = image.height * scale;

  var resultText = "缩放后的图像大小为 " + scaledWidth + "x" + scaledHeight;
  resultDiv.innerText = resultText;

  // 在这里执行缩放图像的逻辑
  image.style.width = scaledWidth + "px";
  image.style.height = scaledHeight + "px";
});