时间戳

首页 > 解决方案 > 根据 X 和 Y 坐标调整图像大小

javascript - 根据 X 和 Y 坐标调整图像大小

问题描述

我有一个使用 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 坐标。非常感谢任何指导！

标签： javascripthtml5-canvasgatsbycontentful

解决方案

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

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

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);
  };
};

推荐阅读