如何捕捉画布的全部内容？

Question

我想创建一个带有图像的画布，然后对其应用过滤器，然后从中获取图像数据。当我查看使用画布时，很明显，当我应用效果（外发光）时，内容将超出画布的大小。

如何捕获画布图像以包含所有画布内容而不是更多内容？

当内容可能大于画布或内容可能超出画布边界时，如何捕获画布内容的图像？

我认为这个问题已经得到解答，但我还没有找到。

示例代码：

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");

// canvas.width = ?;
// canvas.height = ?;

var canvasImage = new Image();
canvasImage.onload = (event)=> {
   context.drawImage(image, 0, 0, width?, height?);
   // add an effect that draws pixels outside of the canvas area
   canvas.filters = "dropShadow(0,0,25,0)";

   var blob = canvas.toBlob((blob)=> {
      // save to file or get image data
   });

};

canvasImage.src = canvasImageSource;

我并不总是提前知道宽度和高度。对于图像元素，我知道应用效果之前的宽度和高度。我提前不知道文本元素。

我找到了 this 但这正在获取 SVG 字符串。它没有显示如何获取画布的总内容...除非它自动获取内容？？？

我找到了另一篇相关文章，但它没有描述当内容大于或小于画布边界时该怎么做。

MDN 说画布创建固定大小的绘图表面：

该元素创建一个固定大小的绘图表面

就我而言，我不知道应用效果后的大小或负位置。我确实知道效果之前图像的大小，但不知道文本或其他元素。

一个示例用例。我在 0x0 添加图像，并将画布的大小设置为图像的大小。然后我添加平面阴影（因此阴影位于图像的所有侧面）。总图像尺寸现在更大，并且位于顶部和左侧。如何获得带有效果的总图像尺寸？

Answer 1

在画布之外绘制的内容根本没有绘制，所以这个问题有点没有意义。

要做这样的事情，你必须在绘制之前自行处理绘图所需的尺寸。您的示例未使用有效的语法，但如果我们假设它生成具有 25px 展开值且没有偏移的阴影，那么您需要在每个方向上向未过滤的绘图尺寸添加 50px。
但这很快就变成了一场噩梦，根据

miterLimit

规则，像大笔划这样的事情可能会变得巨大。某些 SVG 过滤器可能无法访问，而且总是难以解析。我们甚至不讨论何时添加剪切区域或合成...

如果您喜欢冒险，我确实为我的

CanvasLayer

原型写了一些处理最简单情况的东西。有需要的可以借用一下。