[英]how to add text in canvas with react and canvg library?
我正在尝试使用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>
)
上面的功能正在工作...我可以下载为图像,但代码在渲染我评论不起作用的那个
感谢@Chris G的评论,所以我已经通过在canvg之后添加代码来解决问题
canvg(canvas, this.state.datasvg, options);
const ctx = canvas.getContext('2d');
ctx.fillText('Hello world',50, 50);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.