如何从 JsBarcode 实现生成图像？答案

【问题标题】：How to generate an image from the JsBarcode implementation?如何从 JsBarcode 实现生成图像？
【发布时间】：2020-01-30 14:34:08
【问题描述】：

我正在使用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。我四处搜索，据我所知，如果我给 toDataURL() 一个数组但页面中实际上没有其他画布，那将更有意义。我在这里错过了什么？

此时，我意识到这将在代码中显示两次条形码，但我不在乎，我会在之后修复它。我对生成图像更感兴趣，但我似乎无法这样做。

【问题讨论】：

标签： javascript canvas jsbarcode

【解决方案1】：

您正在使用 jquery，它将元素包装在一个数组中。您可以使用 element[0] 或 element.get(0) https://api.jquery.com/get/ 选择原始 DOM 节点

您不需要画布元素，您可以将 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>

【讨论】：