生成的条形码将自身显示为 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>
最佳答案
如果您想要图像文件,可以使用 Canvas 将 svg 转换为 base64 png,然后使用下载
链接下载。
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>
来源:
关于javascript - 有没有办法从生成的条形码创建图像或矢量文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69001583/