javascript将画布裁剪为内容

Posted 2023-02-25

技术标签:

【中文标题】javascript将画布裁剪为内容【英文标题】：javascript crop canvas to content 【发布时间】：2012-07-05 11:25:58 【问题描述】：

我怎样才能只围绕它的内容裁剪 html 画布？

我正在使用strokeText 填充画布，因此很难计算内容的大小。我可以遍历画布的每个像素，还是有更好的方法？

谢谢

【问题讨论】：

【参考方案1】：

提前使用measureText来检查文本占用了多少空间。我希望这能回答你的问题。

【讨论】：

【参考方案2】：

Patrick，您可以遍历画布中的像素，请参阅这个很棒的 cheatsheet 中的“像素操作”部分。

当然，这不是一种选择——坦率地说，这太疯狂了——执行逐像素分析只是为了对文本做一些事情。所以这里出现了@RobotRock 提到的measureText。不过值得一提的是，根据我的经验，measureText 在某些情况下并非 100% 可靠。

还值得一提的是来自 API 的文本操作属性：textAlign 和 textBaseline。因为如果您询问measureText，您实际上想要以某种方式对齐文本的可能性 >50% )))

【讨论】：

以上是关于javascript将画布裁剪为内容的主要内容，如果未能解决你的问题，请参考以下文章