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

【问题标题】：Is there a way to create an image or vector file from a generated barcode?有没有办法从生成的条形码创建图像或矢量文件？
【发布时间】：2021-10-30 05:41:21
【问题描述】：

生成的条形码以 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>

【问题讨论】：

  • 如果唯一可能的方式是使用代码，那么开发人员的方式就可以了。但我更喜欢最终用户的方式，因为这样可以节省我一些时间。
  • 啊...解决方案仅供我自己使用，是的，如果有一个可以解决问题的浏览器扩展程序，当然！
  • 确实如此。我希望找到另一种方法，甚至可以从中保存 SVG 矢量文件。

标签： javascript html image svg barcode


【解决方案1】：

如果你想要一个图像文件，你可以将你的 svg 转换成一个带有画布的 base64 png，然后使用 download 链接下载它。

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>

来源：

【讨论】：

  • 谢谢，这很有帮助！看起来我仍然需要更改代码才能使条形码可下载。
  • 我的意思是我必须深入研究代码以使其可下载，并且没有真正的最终用户解决方案可以使用浏览器将其转换为 SVG。
  • 整个 sn-p 在前端工作，并将从您的 svg 生成一个 png。如果要在前端下载svg文件，请查看我的另一个answer
  • 试过了，效果很好，再次感谢！对此非常满意:)
  • @emgx 为你高兴。祝你有美好的一天:)
【解决方案2】：

如果你想将它保存为 svg，你不需要太多。将 svg 保存到 blob 中，然后使用下载链接下载它。正如 Robert Longson 在评论中所说，它已经是 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>

【讨论】：

    【解决方案3】：

    我知道您说过您不想更改代码，但是没有简单的方法可以将 html 转换为图像或 svg，而不使用像 whtmltopdf 这样的截图工具或 html 转换器。

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

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-02-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode