如何获取裁剪区域的dataURL？

Question

我正在尝试检索裁剪区域的dataURL，但是只要矩形不在该区域之外，生成的图像就会有一个空白（我想它正在尝试包含矩形）。

以下是行为的示例：https://codesandbox.io/embed/clip-area-x24ci

（单击“导出”按钮或将黑色矩形移至剪切区域之外）

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

Answer 1

您可以为x功能设置y，width，height和node.toDataURL()：

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

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