我正在使用 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,
});
调用:
var canvas = $("#barcode");
var img = canvas.toDataURL("image/png");
$("#canvas").append('<img src="' + img + '"/>');
但是,当这样做时,我得到:
canvas.toDataURL is not a function
.我用 Google 搜索了一下,据我所知,如果我给出 toDataURL()
会更有意义一个数组,但页面中实际上没有其他 Canvas 。我在这里缺少什么?
此时,我意识到这会在代码中显示两次条形码,但我不在乎,我会在之后修复它。我对生成图像更感兴趣,但我似乎做不到。
最佳答案
您正在使用 jquery,它将元素包装在一个数组中。您可以使用 element[0]
或使用 element.get(0)
https://api.jquery.com/get/
您不需要 Canvas 元素,您可以将 SVG 序列化为 base64 URL 并将其用作图像源。
var number = '12345678';
JsBarcode("#barcode", number, {
text: number.match(/.{1,4}/g).join(" "),
width: 2,
height: 50,
fontSize: 15,
});
var svg = $("#barcode")[0];
var xml = new XMLSerializer().serializeToString(svg);
var base64 = 'data:image/svg+xml;base64,' + btoa(xml);
var img = $("#image")[0];
img.src = base64;
svg {
border: 1px solid green;
}
img {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
<svg id="barcode"></svg>
<img id="image"></img>
关于javascript - 如何从 JsBarcode 实现生成图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59988342/