canvas 合并图片和文字

 


代码

复制代码
  async getImgInfo(img, text) {
    return new Promise((resolve, reject) => {
      const canvas = document.createElement("canvas");
      canvas.width = 52;
      canvas.height = 68;
      const ctx = canvas.getContext("2d");
      ctx.rect(0, 0, canvas.width, canvas.height);
      const image = new Image();
      image.src = img;
      image.onload = () => {
        ctx.drawImage(image, 0, 0);
        // 设置字体样式
        ctx.font = "20px Arial";
        ctx.fillStyle = "white"; // 文字颜色
        ctx.textAlign = "center";

        // 绘制文字
        ctx.fillText(text, canvas.width / 2, canvas.height / 2);
        let base64 = canvas.toDataURL("image/png");
        resolve(base64);
      };

    });
  },
复制代码

 

posted @   小七要走  阅读(32)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
点击右上角即可分享
微信分享提示