有没有办法从生成的条形码创建图像或矢量文件？

Question

生成的条形码显示为 HTML 标签，因此无法右键单击它们并将其另存为图像。下面是生成的条形码的示例。在我的浏览器（Chrome、Firefox、Safari）中是否有任何方法可以将其转换为图像文件，或者可能是我可以使用的 SVG（矢量）文件？如果可能的话，我更喜欢不必更改源代码。

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

Answer 1

如果你想要一个图像文件，你可以使用 canvas 将你的 svg 转换为 base64 png，然后使用 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>

来源：

Answer 2

我知道你说过你不想更改代码，但是没有简单的方法可以将 html 转换为图像或 svg，而不使用截图工具或 html 转换器，例如 [=10] =].

或者，您可以使用不同的条形码生成库。我从你的代码中看到你正在使用 jsbarcode。我是 bwip-js（纯 JavaScript 中的条码编写器）的作者，它可以将条码图像直接渲染到 canvas，这允许简单的右键单击将图像保存到剪贴板或文件。

Answer 3

如果你想把它保存为svg，你不需要太多。将 svg 保存到 blob 中，然后使用下载 link 下载它。正如罗伯特朗森在评论中所说，它已经是一个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>

有没有办法从生成的条形码创建图像或矢量文件？

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

html

javascript

svg

image

barcode