代码拉取完成，页面将自动刷新
If it doesn't, we gonna make it.
ZXing ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
See Projects and Milestones for what is currently done and what's planned next. 👀
| 1D product | 1D industrial | 2D |
|---|---|---|
| Code 39 | QR Code | |
| Data Matrix | ||
| EAN-8 | Code 128 | |
| EAN-13 | ||
| ITF | ||
| RSS-14 | ||
* In progress, may have open PR.
See Live Preview in browser.
Note: All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.
npm i @zxing/library --save
or
yarn add @zxing/library
<script type="module">
import { BrowserQRCodeReader } from '@zxing/library';
const codeReader = new BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
</script>
<script type="module">
import('@zxing/library').then({ BrowserQRCodeReader } => {
const codeReader = new BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
});
</script>
<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
<script type="text/javascript">
require(['@zxing/library'], ZXing => {
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
});
</script>
<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
<script type="text/javascript">
window.addEventListener('load', () => {
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');
try {
const result = await codeReader.decodeFromImage(img);
} catch (err) {
console.error(err);
}
console.log(result);
});
</script>
const { MultiFormatReader, BarcodeFormat } = require('@zxing/library/esm5'); // use this path since v0.5.1
const hints = new Map();
const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];
hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
const reader = new MultiFormatReader();
reader.setHints(hints);
const luminanceSource = new RGBLuminanceSource(imgWidth, imgHeight, imgByteArray);
const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
reader.decode(binaryBitmap);
The browser layer is using the MediaDevices web API which is not supported by older browsers.
You can use external polyfills like WebRTC adapter to increase browser compatibility.
Also, note that the library is using the TypedArray (Int32Array, Uint8ClampedArray, etc.) which are not available in older browsers (e.g. Android 4 default browser).
You can use core-js to add support to these browsers.
To display the input from the video camera you will need to add a video element in the HTML page:
<video
id="video"
width="300"
height="200"
style="border: 1px solid gray"
></video>
To start decoding, first obtain a list of video input devices with:
const codeReader = new ZXing.BrowserQRCodeReader();
codeReader
.listVideoInputDevices()
.then(videoInputDevices => {
videoInputDevices.forEach(device =>
console.log(`${device.label}, ${device.deviceId}`)
);
})
.catch(err => console.error(err));
If there is just one input device you can use the first deviceId and the video element id (in the example below is also 'video') to decode:
const firstDeviceId = videoInputDevices[0].deviceId;
codeReader
.decodeOnceFromVideoDevice(firstDeviceId, 'video')
.then(result => console.log(result.text))
.catch(err => console.error(err));
If there are more input devices then you will need to chose one for codeReader.decodeOnceFromVideoDevice device id parameter.
You can also provide undefined for the device id parameter in which case the library will automatically choose the camera, preferring the main (environment facing) camera if more are available:
codeReader
.decodeOnceFromVideoDevice(undefined, 'video')
.then(result => console.log(result.text))
.catch(err => console.error(err));
Similar as above you can use a video element in the HTML page:
<video
id="video"
width="300"
height="200"
style="border: 1px solid gray"
></video>
And to decode the video from an url:
const codeReader = new ZXing.BrowserQRCodeReader();
const videoSrc = 'your url to a video';
codeReader
.decodeFromVideo('video', videoSrc)
.then(result => console.log(result.text))
.catch(err => console.error(err));
You can also decode the video url without showing it in the page, in this case no video element is needed in HTML.
codeReader
.decodeFromVideoUrl(videoUrl)
.then(result => console.log(result.text))
.catch(err => console.error(err));
// or alternatively
codeReader
.decodeFromVideo(null, videoUrl)
.then(result => console.log(result.text))
.catch(err => console.error(err));
Similar as above you can use a img element in the HTML page (with src attribute set):
<img
id="img"
src="qrcode-image.png"
width="200"
height="300"
style="border: 1px solid gray"
/>
And to decode the image:
const codeReader = new ZXing.BrowserQRCodeReader();
const img = document.getElementById('img');
codeReader
.decodeFromImage(img)
.then(result => console.log(result.text))
.catch(err => console.error(err));
You can also decode the image url without showing it in the page, in this case no img element is needed in HTML:
const imgSrc = 'url to image';
codeReader
.decodeFromImage(undefined, imgSrc)
.then(result => console.log(result.text))
.catch(err => console.error(err));
Or decode the image url directly from an url, with an img element in page (notice no src attribute is set for img element):
<img
id="img-to-decode"
width="200"
height="300"
style="border: 1px solid gray"
/>
const imgSrc = 'url to image';
const imgDomId = 'img-to-decode';
codeReader
.decodeFromImage(imgDomId, imgSrc)
.then(result => console.log(result.text))
.catch(err => console.error(err));
To generate a QR Code SVG image include 'zxing.qrcodewriter.min.js' from build/vanillajs. You will need to include an element where the SVG element will be appended:
<div id="result"></div>
And then:
const codeWriter = new ZXing.BrowserQRCodeSvgWriter();
// you can get a SVG element.
const svgElement = codeWriter.write(input, 300, 300);
// or render it directly to DOM.
codeWriter.writeToDom('#result', input, 300, 300);
See Contributing Guide for information regarding porting approach and reasoning behind some of the approaches taken.
Special thanks to all the contributors who have contributed for this project. We heartly thankful to you all.
And a special thanks to @aleris who created the project itself and made the initial QR code port.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
![greenkeeper[bot]](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAM+SURBVGhD7VhbSFRRFF1jvnIejqWTNvk2akoCwWjK6MGIIlT21YP68M+PyEC/+inIKQqDIAyFCiIkAqMim4HSwumjCAmzUjMcHbEsKx1fYzqT2rk3HMQsr9dz5c7tnPmcc/Zda691Hnur1t0tmMJ/NFSMsMLVZgorXGAwhZnCCssAs7TCBP2DDlOYKaywDDBLK0xQdmgxSzNLKywDS2ZpXUgEcoyZ2BJtwgZ9AqJCtdCFRmBswotBrwftQz14N9CJp58b0TzQJVmaJSccGhSCY+v34WhqNtTB4YKIdI58QcX7GjzsfoFJ0G25SUo4dvkKlJuPI12fJIjo7EkH661ocjtFrf3bIskIc2pW7zqFFG2c/9ufRvtQ7apHw/cP6BrpxaDPg2BVELTE7smaWKRHJcMSl4GMlWlQkV9AES7LLMTeeDNPlrNleet9VBKbCrFovDqGbIN8VDnryL52yV/hNO1q1GRbeZW4cf7tbdxof0QVuNhgklj6TEYBDiTt5DE1uTuINUvF4qO+ThLCT3LLYIyI5sGWNFTC9vEldeBiA1InbAjX41neJT+ebfYi9I8Pi8VHfR11wtwVdGf3aR5o3/gQsuwnqINeTEDqhLcb0nEtq4THxD0g8mpP/hNf8/7rWEauprmGFPufEV6MXbi1C7V0wCs8+9DaaiuC2yv80EpQG/A454JkVxp1S3NIZ15LxeRasi/gWgpIwjMfHo397TjsOCt4pwQk4bU6Ix5YSv1Py3NvbuGms1YQ6YAkzDG7uLkQe9b8Lh4mpiZxufUerrbZ5i0eApbwXOVht+cbKQ8dpDxsQ5enF0PeUb680JDyMFFjwI5Vm5BLuiKppPjgxut+Jw45rIKcIXSSJIfW9Me5BsAVcxE26hOF4vHPc5F6ubihAi2U2z2SEubQh3EtHlM+jqRYBLV4hn0/UNVRx9t/dGJ8wYmab4HkhKcBRIao+SaeOcYEUyRp4oVp+E7HiG+MvLkHSePOhedfW1Db8wqen2Pz4Rb9/5IRFo2Q8kJGmHJCZReOKSw7SSgDYgpTTqjswjGFZScJZUBMYcoJlV04prDsJKEMiClMOaGyC8cUlp0klAExhSknVHbhfgEzh4t8lpdV0gAAAABJRU5ErkJggg==)
