如何将文本添加到图像中，用户也可以通过添加的文本保存图像？

Question

同样，我一直在为这个问题找到解决方案，如果你不理解我的问题，这里有一些演示。

我把我的名字定为“彼得”

我有一张祝贺海报，里面有一个名字的地方。

当用户到达此页面时，海报将生成名称和海报，他们可以保存这两张图片中的文本。**我没有这方面的演示代码，因为我真的不知道如何做。我也希望有一个可行的方法.

Answer 1

为此，您可以使用HTML画布。当它加载到画布上时，只需绘制图像，然后在上面画文本。并使用canvas.toDataURL("image/png")导出画布。这将为画布上绘制的内容创建一个数据URL。获得URL后，只需将其作为href放在HTML标记中，并将download属性设置为它。

点击链接，它将开始下载。

<canvas id="canvas" width="400" height="150"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let img = new Image("Image_URL_here");
img.addEventListener("load", ()=>{
  ctx.drawImage(img,0,0);
  ctx.font = '50px serif';
  ctx.fillText('Hello world', 50, 90);
});