拦截并修改Canvas字体：调用toDataURL时自动调字号返回数据URL

我来帮你搞定这个需求——每次调用Canvas的toDataURL()方法时，自动把当前画布的字号上调0.01，再返回处理后的Data URL。下面是完整的实现方案，我会一步步给你讲清楚：

首先得提个关键问题：直接给this.font拼接0.01是行不通的，因为font属性是类似"16pt Arial"这样的字符串，得先解析出其中的字号数值，修改后再重新拼接成合法的字体字符串。

完整实现代码 #

<script>
// 先保存原始的toDataURL方法，避免重写后无限递归
const originalToDataURL = HTMLCanvasElement.prototype.toDataURL;

// 重写toDataURL方法
Object.defineProperty(HTMLCanvasElement.prototype, 'toDataURL', {
  value: function() {
    const ctx = this.getContext('2d');
    if (ctx) {
      // 解析当前字体字符串，提取字号、单位和字体族
      const fontMatch = ctx.font.match(/^(\d+(\.\d+)?)([a-zA-Z]+)\s(.+)$/);
      if (fontMatch) {
        const currentSize = parseFloat(fontMatch[1]);
        const unit = fontMatch[3];
        const fontFamily = fontMatch[4];
        // 字号增加0.01
        const newSize = currentSize + 0.01;
        // 重新设置字体
        ctx.font = `${newSize}${unit} ${fontFamily}`;
      }
    }
    // 调用原始方法并传递参数，返回结果
    return originalToDataURL.apply(this, arguments);
  }
});

// 测试代码
const canvas = document.createElement("canvas");
canvas.width = 280;
canvas.height = 60;
canvas.style.display = "none";
const context = canvas.getContext("2d");
context.fillStyle = "rgb(102, 204, 0)";
context.fillRect(100, 5, 80, 50);
context.fillStyle = "#f60";
context.font = "16pt Arial";
context.fillText("<@nv45. F1n63r,Pr1n71n6!", 10, 40);
context.strokeStyle = "rgb(120, 186, 176)";
context.arc(80, 10, 20, 0, Math.PI, !1);
context.stroke();

// 调用toDataURL时会自动修改字号
const canvasValue = canvas.toDataURL();
console.log(canvasValue);
</script>

关键细节说明 #

• 保存原始方法：必须先把原生的toDataURL存起来，不然重写后调用this.toDataURL()会无限递归调用我们自己写的方法。
• 字体解析逻辑：用正则表达式匹配字体字符串的结构，提取出字号、单位（比如pt）和字体族（比如Arial），这样修改字号后才能正确还原成合法的字体格式。
• 上下文判断：先检查是否能获取到2D上下文，避免在没有上下文的情况下报错。
• 参数传递：用apply(this, arguments)把调用时传入的参数（比如图片格式、质量）传递给原始方法，保证功能完整性。

这样每次调用canvas.toDataURL()时，都会自动把当前画布的字号增加0.01，然后返回修改后的画布Data URL啦。

内容的提问来源于stack exchange，提问作者Zanga