根据 X 和 Y 坐标调整图像大小答案

【问题标题】：Resize image based on X and Y coordinates根据 X 和 Y 坐标调整图像大小
【发布时间】：2021-04-27 04:04:35
【问题描述】：

我有一个使用 CMS Contentful 的 Gatsby 应用程序。我已经在 Contentful 上实现了 Image Focal Point，它返回 x 和 y 坐标以进行图像裁剪。我曾尝试使用 HTML Canvas 根据图像焦点的坐标调整图像大小，但没有成功。

这是我尝试过的：

const resizeImage = (url, width, height, x, y, callback) => {

  const canvas = document.createElement("canvas")
  const context = canvas.getContext("2d")
  const imageObj = new Image()

  canvas.width = width
  canvas.height = height
  imageObj.src = url
  imageObj.setAttribute("crossorigin", "anonymous")

  imageObj.onload = function () {
    context.drawImage(imageObj, x, y, width, height, x, y, width, height)
    callback(canvas.toDataURL())
  }
  return imageObj.src
}

我传入图像的 url，所述图像的宽度和高度，图像焦点的 x 和 y 坐标以及回调：

resizeImage("my-image.png", 1000, 500, 300, 600, (url) => {url})

这将返回与我输入的相同的 src url，并且不会将图像裁剪到所需的 xy 坐标。非常感谢任何指导！

【问题讨论】：

标签： javascript html5-canvas gatsby contentful

【解决方案1】：

您可能遇到了安全问题，特别是：出于安全原因，您的本地驱动器被声明为“其他域”，它会弄脏画布。由于这个原因，他的形象没有被裁剪。我在复制您的代码时遇到了服务器图像的这个问题，所以要小心。

我用你的代码生成了一个codesandbox，如果你想用这种方式剪切图像，请告诉我

const resizeImage = (url, width, height, x, y, callback) => {
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");

  const imageObj = new Image();
  canvas.width = width;
  canvas.height = height;
  imageObj.src = url;
  imageObj.crossOrigin = "anonymous"; //WARNING!
  imageObj.onload = () => {
    context.drawImage(imageObj, x, y, width, height, 0, 0, width, height);
    const url = canvas.toDataURL();
    callback(url);
  };
};

【讨论】：