Is there a way to create an image or vector file from a generated barcode?

Question

Generated barcodes manifest themselves as HTML tags, so they cannot be right-clicked and saved as an image. Below there's an example of the generated barcode. Is there any way within my browser (Chrome, Firefox, Safari) to convert this into an image file, or possibly an SVG (vector) file that I can use? I prefer not having to change the source code if possible.

<svg class="barcode" jsbarcode-width="1" jsbarcode-height="22" jsbarcode-textalign="center" jsbarcode-textposition="bottom" jsbarcode-displayvalue="true" jsbarcode-font="monospace" jsbarcode-fontstyle="monospace" jsbarcode-fontsize="14" jsbarcode-background="#FFFFFF"
  jsbarcode-linecolor="#000000" jsbarcode-textmargin="5" jsbarcode-fontoptions="0 0" jsbarcode-format="code128" jsbarcode-value="0219000780318" width="143px" height="61px" x="0px" y="0px" viewBox="0 0 143 61" xmlns="http://www.w3.org/2000/svg" version="1.1"
  style="transform: translate(0px, 0px);">
        <rect x="0" y="0" width="143" height="61" style="fill:#FFFFFF;"></rect>
        <g transform="translate(10, 10)" style="fill:#000000;">
            <rect x="0" y="0" width="2" height="22"></rect>
            <rect x="3" y="0" width="1" height="22"></rect>
            <rect x="6" y="0" width="3" height="22"></rect>
            <rect x="11" y="0" width="2" height="22"></rect>
            <rect x="15" y="0" width="2" height="22"></rect>
            <rect x="19" y="0" width="2" height="22"></rect>
            <rect x="22" y="0" width="2" height="22"></rect>
            <rect x="26" y="0" width="1" height="22"></rect>
            <rect x="28" y="0" width="3" height="22"></rect>
            <rect x="33" y="0" width="2" height="22"></rect>
            <rect x="36" y="0" width="2" height="22"></rect>
            <rect x="40" y="0" width="2" height="22"></rect>
            <rect x="44" y="0" width="1" height="22"></rect>
            <rect x="47" y="0" width="2" height="22"></rect>
            <rect x="52" y="0" width="1" height="22"></rect>
            <rect x="55" y="0" width="1" height="22"></rect>
            <rect x="57" y="0" width="1" height="22"></rect>
            <rect x="60" y="0" width="4" height="22"></rect>
            <rect x="66" y="0" width="2" height="22"></rect>
            <rect x="69" y="0" width="2" height="22"></rect>
            <rect x="74" y="0" width="2" height="22"></rect>
            <rect x="77" y="0" width="3" height="22"></rect>
            <rect x="81" y="0" width="1" height="22"></rect>
            <rect x="83" y="0" width="4" height="22"></rect>
            <rect x="88" y="0" width="3" height="22"></rect>
            <rect x="92" y="0" width="1" height="22"></rect>
            <rect x="95" y="0" width="2" height="22"></rect>
            <rect x="99" y="0" width="2" height="22"></rect>
            <rect x="103" y="0" width="1" height="22"></rect>
            <rect x="107" y="0" width="1" height="22"></rect>
            <rect x="110" y="0" width="2" height="22"></rect>
            <rect x="115" y="0" width="3" height="22"></rect>
            <rect x="119" y="0" width="1" height="22"></rect>
            <rect x="121" y="0" width="2" height="22"></rect>
            <text style="font:0 0 14px monospace" text-anchor="middle" x="61.5" y="41">0219000780318</text>
        </g>
    </svg>

If the only possible way is with code, a developer way is fine. But I prefer an end-user way because that would save me some time. — Al John, Aug 31 '21 at 15:42
Ahh... The solution is for myself only, and yes if there is a browser extension that does the trick, sure! — Al John, Aug 31 '21 at 16:06
It does. I'm hoping to find another way to perhaps even save an SVG vector file from it as well. — Al John, Aug 31 '21 at 16:40

aloisdg · Accepted Answer · 2021-08-31T17:12:45.460

If you want an image file, you can transform your svg into a base64 png with a canvas then download it with a download link.

Demo online

document.querySelector("#download").onclick = () => {
  svgToPng(document.querySelector('.barcode').outerHTML, (imgData) => {
    const download = document.createElement('a');
    download.href = imgData;
    download.download = 'barcode.png';
    download.click();
  });
}

const svgToPng = (svg, callback) => {
  const url = URL.createObjectURL(new Blob([svg], {
    type: 'image/svg+xml'
  }));
  svgUrlToPng(url, (imgData) => {
    callback(imgData);
    URL.revokeObjectURL(url);
  });
}

const svgUrlToPng = (svgUrl, callback) => {
  const svgImage = document.createElement('img');
  svgImage.style.position = 'absolute';
  svgImage.style.top = '-9999px';
  document.body.appendChild(svgImage);
  svgImage.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = svgImage.clientWidth;
    canvas.height = svgImage.clientHeight;
    const canvasCtx = canvas.getContext('2d');
    canvasCtx.drawImage(svgImage, 0, 0);
    const imgData = canvas.toDataURL('image/png');
    callback(imgData);
    document.body.removeChild(svgImage);
  };
  svgImage.src = svgUrl;
}

<svg class="barcode" jsbarcode-width="1" jsbarcode-height="22" jsbarcode-textalign="center" jsbarcode-textposition="bottom" jsbarcode-displayvalue="true" jsbarcode-font="monospace" jsbarcode-fontstyle="monospace" jsbarcode-fontsize="14" jsbarcode-background="#FFFFFF" jsbarcode-linecolor="#000000" jsbarcode-textmargin="5" jsbarcode-fontoptions="0 0" jsbarcode-format="code128" jsbarcode-value="0219000780318" width="143px" height="61px" x="0px" y="0px" viewBox="0 0 143 61" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0px, 0px);">
  <rect x="0" y="0" width="143" height="61" style="fill:#FFFFFF;"></rect>
  <g transform="translate(10, 10)" style="fill:#000000;">
    <rect x="0" y="0" width="2" height="22"></rect>
    <rect x="3" y="0" width="1" height="22"></rect>
    <rect x="6" y="0" width="3" height="22"></rect>
    <rect x="11" y="0" width="2" height="22"></rect>
    <rect x="15" y="0" width="2" height="22"></rect>
    <rect x="19" y="0" width="2" height="22"></rect>
    <rect x="22" y="0" width="2" height="22"></rect>
    <rect x="26" y="0" width="1" height="22"></rect>
    <rect x="28" y="0" width="3" height="22"></rect>
    <rect x="33" y="0" width="2" height="22"></rect>
    <rect x="36" y="0" width="2" height="22"></rect>
    <rect x="40" y="0" width="2" height="22"></rect>
    <rect x="44" y="0" width="1" height="22"></rect>
    <rect x="47" y="0" width="2" height="22"></rect>
    <rect x="52" y="0" width="1" height="22"></rect>
    <rect x="55" y="0" width="1" height="22"></rect>
    <rect x="57" y="0" width="1" height="22"></rect>
    <rect x="60" y="0" width="4" height="22"></rect>
    <rect x="66" y="0" width="2" height="22"></rect>
    <rect x="69" y="0" width="2" height="22"></rect>
    <rect x="74" y="0" width="2" height="22"></rect>
    <rect x="77" y="0" width="3" height="22"></rect>
    <rect x="81" y="0" width="1" height="22"></rect>
    <rect x="83" y="0" width="4" height="22"></rect>
    <rect x="88" y="0" width="3" height="22"></rect>
    <rect x="92" y="0" width="1" height="22"></rect>
    <rect x="95" y="0" width="2" height="22"></rect>
    <rect x="99" y="0" width="2" height="22"></rect>
    <rect x="103" y="0" width="1" height="22"></rect>
    <rect x="107" y="0" width="1" height="22"></rect>
    <rect x="110" y="0" width="2" height="22"></rect>
    <rect x="115" y="0" width="3" height="22"></rect>
    <rect x="119" y="0" width="1" height="22"></rect>
    <rect x="121" y="0" width="2" height="22"></rect>
    <text style="font:0 0 14px monospace" text-anchor="middle" x="61.5" y="41">0219000780318</text>
  </g>
</svg>

<br />

<button type="button" id="download">
download
</button>

Source:

Thank you, this is very helpful! Looks like I do still have to change the code instead to make the barcodes downloadable. — Al John, Aug 31 '21 at 19:45
I meant that I have to dive into the code to make them downloadable and there is not really an end-user solution for turning it into an SVG using the browser. — Al John, Aug 31 '21 at 21:04
The whole snippet works front side and will generate a png from your svg. If you want to download a svg file in the front side, check my other [answer](https://stackoverflow.com/a/69002809/1248177) — aloisdg, Aug 31 '21 at 21:33
Tried this and it works perfect, many thanks again! Very happy with this :) — Al John, Sep 01 '21 at 09:31
Can I ask one more question? What if I have many barcodes on one page, they all have the `.barcode` class, can I download them all at once using a for-loop or how does that work? — Al John, Sep 01 '21 at 13:52

score 1 · Answer 2 · answered Aug 31 '21 at 17:10

If you want to save it as svg, you dont need much. Save the svg into a blob then download it with a download link. As Robert Longson said in comment, it is already an svg.

Demo

document.querySelector("#download").onclick = () => {
  downloadSvg(document.querySelector('.barcode').outerHTML);
}

const downloadSvg = (svg) => {
  const url = URL.createObjectURL(new Blob([svg], {
    type: 'image/svg+xml'
  }));
  const download = document.createElement('a');
  download.href = url;
  download.download = 'barcode.svg';
  download.click();
  URL.revokeObjectURL(url);
}

HTML:

<svg class="barcode" jsbarcode-width="1" jsbarcode-height="22" jsbarcode-textalign="center" jsbarcode-textposition="bottom" jsbarcode-displayvalue="true" jsbarcode-font="monospace" jsbarcode-fontstyle="monospace" jsbarcode-fontsize="14" jsbarcode-background="#FFFFFF" jsbarcode-linecolor="#000000" jsbarcode-textmargin="5" jsbarcode-fontoptions="0 0" jsbarcode-format="code128" jsbarcode-value="0219000780318" width="143px" height="61px" x="0px" y="0px" viewBox="0 0 143 61" xmlns="http://www.w3.org/2000/svg" version="1.1" style="transform: translate(0px, 0px);">
  <rect x="0" y="0" width="143" height="61" style="fill:#FFFFFF;"></rect>
  <g transform="translate(10, 10)" style="fill:#000000;">
    <rect x="0" y="0" width="2" height="22"></rect>
    <rect x="3" y="0" width="1" height="22"></rect>
    <rect x="6" y="0" width="3" height="22"></rect>
    <rect x="11" y="0" width="2" height="22"></rect>
    <rect x="15" y="0" width="2" height="22"></rect>
    <rect x="19" y="0" width="2" height="22"></rect>
    <rect x="22" y="0" width="2" height="22"></rect>
    <rect x="26" y="0" width="1" height="22"></rect>
    <rect x="28" y="0" width="3" height="22"></rect>
    <rect x="33" y="0" width="2" height="22"></rect>
    <rect x="36" y="0" width="2" height="22"></rect>
    <rect x="40" y="0" width="2" height="22"></rect>
    <rect x="44" y="0" width="1" height="22"></rect>
    <rect x="47" y="0" width="2" height="22"></rect>
    <rect x="52" y="0" width="1" height="22"></rect>
    <rect x="55" y="0" width="1" height="22"></rect>
    <rect x="57" y="0" width="1" height="22"></rect>
    <rect x="60" y="0" width="4" height="22"></rect>
    <rect x="66" y="0" width="2" height="22"></rect>
    <rect x="69" y="0" width="2" height="22"></rect>
    <rect x="74" y="0" width="2" height="22"></rect>
    <rect x="77" y="0" width="3" height="22"></rect>
    <rect x="81" y="0" width="1" height="22"></rect>
    <rect x="83" y="0" width="4" height="22"></rect>
    <rect x="88" y="0" width="3" height="22"></rect>
    <rect x="92" y="0" width="1" height="22"></rect>
    <rect x="95" y="0" width="2" height="22"></rect>
    <rect x="99" y="0" width="2" height="22"></rect>
    <rect x="103" y="0" width="1" height="22"></rect>
    <rect x="107" y="0" width="1" height="22"></rect>
    <rect x="110" y="0" width="2" height="22"></rect>
    <rect x="115" y="0" width="3" height="22"></rect>
    <rect x="119" y="0" width="1" height="22"></rect>
    <rect x="121" y="0" width="2" height="22"></rect>
    <text style="font:0 0 14px monospace" text-anchor="middle" x="61.5" y="41">0219000780318</text>
  </g>
</svg>

<br />

<button type="button" id="download">
download
</button>

score 0 · Answer 3 · answered Aug 31 '21 at 17:06

I know you said you do not want to change code, but there is no simple way to convert html to an image or svg without using snipping tools or html converters like whtmltopdf.

Alternatively, you can use a different barcode generation library. I see from your code you are using jsbarcode. I am the author of bwip-js (Barcode Writer in Pure JavaScript) and it can render barcode images directly to canvas, which allows a simple right-click to save image to clipboard or file.

Is there a way to create an image or vector file from a generated barcode?

3 Answers3