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.

user_1248177 · Answer

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;
}

Source:

user_1248177 · Answer

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:

user_4743430 · Answer

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 Answers