如何使用 react 和 canvg 库在画布中添加文本？答案

【问题标题】：how to add text in canvas with react and canvg library?如何使用 react 和 canvg 库在画布中添加文本？
【发布时间】：2019-05-04 09:35:14
【问题描述】：

我正在尝试使用 react 和 canvg lib 在画布中添加文本（右下角）

这是我尝试的：

DownloadImage = (i) => {
        var _this = this;
        this.modeler.saveSVG(function (err, svg) {
            if (err) console.log(err)
            _this.setState({ datasvg: svg }, function () {
                const canvas = _this.refs.canvasforimage;
                console.log(canvas)

                const options = {
                    log: false,
                    ignoreMouse: true
                };

                canvg(canvas, this.state.datasvg, options);
                    const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
                    const element = document.createElement("a");
                    element.setAttribute('download', 'diagram.png');
                    element.setAttribute('href', image);
                    element.click();
            })
        })
    }


    render = () => {
        return (
                <canvas  ref="canvasforimage" id="canvasforimage">
                 {/* <div style="position:absolute;right:0;bottom:0">Text</div> */} Not working
                </canvas>
        )

上面的功能正在运行...我可以下载为图像，但渲染时的代码我评论不工作

【问题讨论】：

如果您希望该文本成为下载图像的一部分，您必须使用 fillText() 将其绘制到画布上。

标签： javascript reactjs canvg

【解决方案1】：

感谢@Chris G 的评论所以我已经通过在canvg之后添加代码解决了这个问题

canvg(canvas, this.state.datasvg, options);
const ctx = canvas.getContext('2d');
ctx.fillText('Hello world',50, 50);

【讨论】：