Как сгенерировать изображение из реализации JsBarcode? - PullRequest
Новая
       31

Как сгенерировать изображение из реализации JsBarcode?

1 голос
/ 30 января 2020

Я использую 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() массив, но другого холста на странице буквально нет. Что мне здесь не хватает?

На данный момент я понимаю, что в коде будет дважды показан штрих-код, но мне все равно, я исправлю это после. Меня больше интересует создание изображения, и я, похоже, не могу этого сделать.

1 Ответ

1 голос
/ 30 января 2020

Вы используете jquery, и он упаковывает элемент в массив. Вы можете выбрать исходный узел DOM с помощью element[0] или с помощью element.get(0) https://api.jquery.com/get/

Вам не нужен элемент canvas, вы можете сериализовать SVG в URL-адрес base64 и используйте это как источник изображения. 

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>
...