如何检索剪辑区域的 dataURL？

Question

我正在尝试检索剪辑区域的 dataURL，但只要矩形在该区域之外，生成的图像就会有边距（我猜它试图包含矩形）。

这是一个行为示例：https://codesandbox.io/embed/clip-area-x24ci

（单击 "export" 按钮或将黑色矩形移到剪辑区域之外）

是否可以只检索剪辑区域的内容？

Answer 1

您可以为 node.toDataURL() 函数设置 x、y、width 和 height：

const clipArea = {
  x: 100,
  y: 100,
  height: 200,
  width: 200
};

const dataURL = node.toDataURL({
  pixelRatio: 2,
  ...clipArea
});