JavaScript在图片绘制文字两种方法的实现与对比_Javascript

序言

本文实现了在图片上绘制文字的两种思路，并通过demo的方式，去具体实现，实现代码为组件形式，支持即粘即贴即用。

效果展示

需求简介

遇到一个这样的需求，产品要求根据b端用户上传的图片模板，在c端绘制上个性字体且展示，最后也支持c端用户下载绘制后的图片。

解决思路

我们先梳理一下这个需求的一些关键的点，即图片来源、图片传递路径、获取图片、图片绘制文字、下载图片

那最关键的步骤就是图片绘制

我这里想到了两种方案：

方案一：定位+html2canvas

将图片用image渲染出来并放在一个dom中，然后将文字再单独写一个dom,通过定位的形式将其定位到对应的位置，最后通过html2canvas，将整个dom绘制成一个canvas，转成图片下载下来。

代码实现

import react from "react";
import html2canvas from "html2canvas";
import { button, image } from "antd-mobile";

type loadcanvasimgprops = {
  containerstyle?: react.cssproperties; // 最外层父组件的样式

  backgroundimagesrc?: string; // 背景图
  imagewidth?: string | number;

  text?: string; // 需要写的值
  textstyle?: react.cssproperties; // 渲染文本的样式

  buttonvalue?: string; // button值
  onclickbutton?: () => void; // 点击下载前执行的函数

  loadname?: string; // 下载后的文件名称
};

const loadcanvasimg: react.fc<loadcanvasimgprops> = ({
  text = "我是名字",
  loadname = "load",
  buttonvalue = "点击下载",
  backgroundimagesrc = "",
  textstyle = { position: "absolute", top: "0px", left: "0px" },
  containerstyle,
  imagewidth = 100,
  onclickbutton,
}) => {
  const onhtml2canvas = async () => {
    try {
      const loadbody = document.getelementbyid("loadbody") as htmlelement;
      const canvas = await html2canvas(loadbody, {
        usecors: true,
        allowtaint: false,
      });
      downloadcanvasimg(canvas);
      onclickbutton && onclickbutton();
    } catch (error) {
      console.error("error generating canvas image:", error);
    }
  };

  // 下载canvas
  const downloadcanvasimg = (canvas: htmlcanvaselement) => {
    const dataurl = canvas.todataurl("image/png") || "";
    const downloadlink = document.createelement("a");
    downloadlink.href = dataurl;
    downloadlink.download = `${loadname}.png`;

    document.body.appendchild(downloadlink);
    downloadlink.click();
    document.body.removechild(downloadlink);
  };

  return (
    <div classname="loadcanvasimg" style={containerstyle}>
      <div id="loadbody">
        <div style={textstyle}>{text}</div>
        <image src={backgroundimagesrc} width={imagewidth} alt="background" />
      </div>
      <button onclick={onhtml2canvas} color="primary">
        {buttonvalue}
      </button>
    </div>
  );
};

export default loadcanvasimg;

使用方式

import react from "react";
import loadcanvasimg from "..."; // 这里的路径是你的组件路径

const demo1 = () => {
  return (
    <div>
      <loadcanvasimg
        backgroundimagesrc={""} // 图片的url
        text={"我是名字"} // 需要绘制的值
        containerstyle={{ position: "relative" }}
        textstyle={{
          position: "absolute",
          top: "10px",
          left: "100px",
          fontsize: "20px",
        }}
        buttonvalue="保存证书"
        onclickbutton={() => {}} // 点击下载前执行的函数
        imagewidth={200}
      />
    </div>
  );
};

方案二：canvas绘制

先用canvas绘制图片，再用canvas绘制字体，最后转成图片下载下来。

代码实现

import react, { useeffect, useref } from "react";
import { button } from "antd-mobile";

interface canvasfontsizeprops {
  text?: string; // 要绘制的文字
  backgroundimagesrc?: string; // 图片的url链接
  x?: number; // 图片的x轴定位
  y?: number; // 图片的y轴定位
  textstyle?: react.cssproperties; // 绘制的文字样式
  fillstyle?: string | canvasgradient | canvaspattern; // canvas绘制文字的样式
  canvasstyle?: react.cssproperties; // canvas的样式
}

const canvasfontsize: react.fc<canvasfontsizeprops> = ({
  text = "姓名",
  backgroundimagesrc = "",
  x = 100,
  y = 100,
  textstyle = { fontfamily: "e1kcqpnw_gbk_ry", fontsize: "22px" },
  fillstyle = "#000",
  canvasstyle = { width: 800, height: 600 },
}) => {
  const canvasref = useref<htmlcanvaselement>(null);

  const downloadcanvasimage = () => {
    const canvas = canvasref.current;
    const dataurl = canvas?.todataurl("image/png") || "";

    const downloadlink = document.createelement("a");
    downloadlink.href = dataurl;
    downloadlink.download = "canvas_image.png";

    document.body.appendchild(downloadlink);
    downloadlink.click();
    document.body.removechild(downloadlink);
  };

  useeffect(() => {
    const canvas = canvasref.current as htmlcanvaselement;
    const ctx = canvas.getcontext("2d") as canvasrenderingcontext2d;

    const backgroundimage = new image();
    backgroundimage.setattribute('crossorigin', 'anonymous'); // 跨域的时候加上
    backgroundimage.src = backgroundimagesrc;
    backgroundimage.onload = () => {
      ctx.drawimage(backgroundimage, 0, 0, canvas.width, canvas.height);

      ctx.font = `${textstyle.fontsize} ${textstyle.fontfamily}`;
      ctx.fillstyle = fillstyle;
      ctx.filltext(text, x, y);
    };
  }, [text, x, y, backgroundimagesrc, textstyle, fillstyle]);

  return (
    <div>
      <canvas ref={canvasref} style={canvasstyle} />
      <button onclick={downloadcanvasimage} color="primary">
        下载链接
      </button>
    </div>
  );
};

export default canvasfontsize;

使用方式

import react from "react";
import canvasfontsize from "..."; // 这里的路径是你的组件路径

const demo1 = () => {
  return (
    <div>
      <canvasfontsize
        backgroundimagesrc={""} // 图片的url
        text={"我是名字"} // 需要绘制的值
        x={10} // x轴坐标
        y={10}  // y轴坐标
        textstyle = { fontfamily: "e1kcqpnw_gbk_ry", fontsize: "22px" } // 文字样式
        fillstyle = "#000" // 文字颜色
        canvasstyle = { width: 800, height: 600 } // canvas样式
      />
    </div>
  );
};

两种思路的优缺点对比

	优点	缺点
定位+html2canvas	对绘制复杂样式支持友好	需要安装第三方依赖
canvas绘制	使用简单，canvas原生支持	遇到复杂样式绘制较为困难