有没有办法从生成的条形码创建图像或矢量文件？
Posted
技术标签:
【中文标题】有没有办法从生成的条形码创建图像或矢量文件？【英文标题】：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- jsbarcode- 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" 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" style="fill:#FFFFFF;"></rect>
<g transform="translate(10, 10)" style="fill:#000000;">
<rect x="0" y="0" ></rect>
<rect x="3" y="0" ></rect>
<rect x="6" y="0" ></rect>
<rect x="11" y="0" ></rect>
<rect x="15" y="0" ></rect>
<rect x="19" y="0" ></rect>
<rect x="22" y="0" ></rect>
<rect x="26" y="0" ></rect>
<rect x="28" y="0" ></rect>
<rect x="33" y="0" ></rect>
<rect x="36" y="0" ></rect>
<rect x="40" y="0" ></rect>
<rect x="44" y="0" ></rect>
<rect x="47" y="0" ></rect>
<rect x="52" y="0" ></rect>
<rect x="55" y="0" ></rect>
<rect x="57" y="0" ></rect>
<rect x="60" y="0" ></rect>
<rect x="66" y="0" ></rect>
<rect x="69" y="0" ></rect>
<rect x="74" y="0" ></rect>
<rect x="77" y="0" ></rect>
<rect x="81" y="0" ></rect>
<rect x="83" y="0" ></rect>
<rect x="88" y="0" ></rect>
<rect x="92" y="0" ></rect>
<rect x="95" y="0" ></rect>
<rect x="99" y="0" ></rect>
<rect x="103" y="0" ></rect>
<rect x="107" y="0" ></rect>
<rect x="110" y="0" ></rect>
<rect x="115" y="0" ></rect>
<rect x="119" y="0" ></rect>
<rect x="121" y="0" ></rect>
<text style="font:0 0 14px monospace" text-anchor="middle" x="61.5" y="41">0219000780318</text>
</g>
</svg>【问题讨论】：
如果唯一可能的方式是使用代码，那么开发人员的方式就可以了。但我更喜欢最终用户的方式，因为这样可以节省我一些时间。 啊...解决方案仅供我自己使用，是的，如果有一个可以解决问题的浏览器扩展程序，当然！ 确实如此。我希望找到另一种方法，甚至可以从中保存 SVG 矢量文件。 【参考方案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- jsbarcode- 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" 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" style="fill:#FFFFFF;"></rect>
<g transform="translate(10, 10)" style="fill:#000000;">
<rect x="0" y="0" ></rect>
<rect x="3" y="0" ></rect>
<rect x="6" y="0" ></rect>
<rect x="11" y="0" ></rect>
<rect x="15" y="0" ></rect>
<rect x="19" y="0" ></rect>
<rect x="22" y="0" ></rect>
<rect x="26" y="0" ></rect>
<rect x="28" y="0" ></rect>
<rect x="33" y="0" ></rect>
<rect x="36" y="0" ></rect>
<rect x="40" y="0" ></rect>
<rect x="44" y="0" ></rect>
<rect x="47" y="0" ></rect>
<rect x="52" y="0" ></rect>
<rect x="55" y="0" ></rect>
<rect x="57" y="0" ></rect>
<rect x="60" y="0" ></rect>
<rect x="66" y="0" ></rect>
<rect x="69" y="0" ></rect>
<rect x="74" y="0" ></rect>
<rect x="77" y="0" ></rect>
<rect x="81" y="0" ></rect>
<rect x="83" y="0" ></rect>
<rect x="88" y="0" ></rect>
<rect x="92" y="0" ></rect>
<rect x="95" y="0" ></rect>
<rect x="99" y="0" ></rect>
<rect x="103" y="0" ></rect>
<rect x="107" y="0" ></rect>
<rect x="110" y="0" ></rect>
<rect x="115" y="0" ></rect>
<rect x="119" y="0" ></rect>
<rect x="121" y="0" ></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>
来源：
https://***.com/a/14107475/1248177 https://***.com/a/58142441/1248177【讨论】：
谢谢，这很有帮助！看起来我仍然需要更改代码才能使条形码可下载。 我的意思是我必须深入研究代码以使其可下载，并且没有真正的最终用户解决方案可以使用浏览器将其转换为 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- jsbarcode- 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" 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" style="fill:#FFFFFF;"></rect>
<g transform="translate(10, 10)" style="fill:#000000;">
<rect x="0" y="0" ></rect>
<rect x="3" y="0" ></rect>
<rect x="6" y="0" ></rect>
<rect x="11" y="0" ></rect>
<rect x="15" y="0" ></rect>
<rect x="19" y="0" ></rect>
<rect x="22" y="0" ></rect>
<rect x="26" y="0" ></rect>
<rect x="28" y="0" ></rect>
<rect x="33" y="0" ></rect>
<rect x="36" y="0" ></rect>
<rect x="40" y="0" ></rect>
<rect x="44" y="0" ></rect>
<rect x="47" y="0" ></rect>
<rect x="52" y="0" ></rect>
<rect x="55" y="0" ></rect>
<rect x="57" y="0" ></rect>
<rect x="60" y="0" ></rect>
<rect x="66" y="0" ></rect>
<rect x="69" y="0" ></rect>
<rect x="74" y="0" ></rect>
<rect x="77" y="0" ></rect>
<rect x="81" y="0" ></rect>
<rect x="83" y="0" ></rect>
<rect x="88" y="0" ></rect>
<rect x="92" y="0" ></rect>
<rect x="95" y="0" ></rect>
<rect x="99" y="0" ></rect>
<rect x="103" y="0" ></rect>
<rect x="107" y="0" ></rect>
<rect x="110" y="0" ></rect>
<rect x="115" y="0" ></rect>
<rect x="119" y="0" ></rect>
<rect x="121" y="0" ></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中的条形码编写器）的作者，它可以将条形码图像直接渲染到画布上，只需右键单击即可将图像保存到剪贴板或文件。
【讨论】：
以上是关于有没有办法从生成的条形码创建图像或矢量文件？的主要内容，如果未能解决你的问题，请参考以下文章
从 PIL 图像或 StringIO 将图像插入 Reportlab