我目前有一个由JsBarcode的react实现生成的画布条形码,称为react-barcode。目前,我可以右键单击画布,然后在新选项卡中将其作为图像打开。如何通过单击按钮来实现此功能?
我已经检查了这个问题的几个答案,但他们都使用jquery。我正在寻找使用React或纯js的实现。
我正在使用JsBarcode在一个人结账时生成一个。我想将其发送到他们的电子邮件,但我不能,因为生成的电子邮件是 SVG 内的路径集合,因此他们不会将其发送到他们的电子邮件(没有呈现任何内容)。所以我想让这段代码生成后成为一个图像。
我的HTML:
<svg id="barcode"></svg><canvas id="canvas"></canvas>
我在生成条形码后尝试执行以下操作(有效):
JsBarcode("#barcode", result.source.number, {
text: result.source.number.match(/.{1,4}/g).join (" "),
width: 2,
height: 50,
fontSize: 15,
});
Run Code Online (Sandbox Code Playgroud)
致电:
var canvas = $("#barcode");
var img = canvas.toDataURL("image/png");
$("#canvas").append('<img src="' + img + '"/>');
Run Code Online (Sandbox Code Playgroud)
然而,当这样做时,我得到:
canvas.toDataURL is not a function。我用谷歌搜索了一下,据我所知,如果我给出toDataURL()一个数组,但页面中实际上没有其他画布,那就更有意义了。我在这里缺少什么?
此时,我意识到这会在代码中显示条形码两次,但我不在乎,之后我会修复它。我对生成图像更感兴趣,但我似乎无法做到这一点。