Zxing/library/ - UNPKG

Trang chủ » C Zxing » Zxing/library/ - UNPKG

Có thể bạn quan tâm

11.4 kBMarkdownView Raw
1[<img align="right" src="https://raw.github.com/wiki/zxing/zxing/zxing-logo.png"/>][1]
2
3# ZXing
4
5### Runs on your favorite ECMAScript ecosystem
6
7> If it doesn't, we gonna make it.
8
9## What is ZXing?
10
11> [ZXing][1] ("zebra crossing") is an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
12
13## Supported Formats
14
15> See [Projects](https://github.com/zxing-js/library/projects) and [Milestones](https://github.com/zxing-js/library/milestones) for what is currently done and what's planned next. 👀
16
17| 1D product | 1D industrial | 2D |
18| ---------- | ------------------- | -------------- |
19| ~~UPC-A~~ | Code 39 | QR Code |
20| ~~UPC-E~~ | ~~Code 93~~ | Data Matrix |
21| EAN-8 | Code 128 | ~~Aztec~~ \* |
22| EAN-13 | ~~Codabar~~ | ~~PDF 417~~ \* |
23| | ITF | ~~MaxiCode~~ |
24| | RSS-14 |
25| | ~~RSS-Expanded~~ \* |
26
27**\*** In progress, may have open PR.
28
29## Status
30
31[![Build Status](https://travis-ci.org/zxing-js/library.svg?branch=master)](https://travis-ci.org/zxing-js/library)
32![Dependencies](https://david-dm.org/zxing-js/library.svg)
33[![Greenkeeper badge](https://badges.greenkeeper.io/zxing-js/library.svg)](https://greenkeeper.io/)
34
35[![NPM version](https://img.shields.io/npm/v/@zxing/library.svg?&label=npm)][0]
36[![npm](https://img.shields.io/npm/dm/localeval.svg)][0]
37[![Contributors](https://img.shields.io/github/contributors/zxing-js/library.svg)](https://github.com/zxing-js/library/graphs/contributors)
38[![Commits to deploy](https://img.shields.io/github/commits-since/zxing-js/library/master.svg?label=commits%20to%20deploy)](https://github.com/zxing-js/library/compare/master...develop)
39
40[![Codacy Badge](https://api.codacy.com/project/badge/Grade/9aaa5317fcc740af9f25b3c7f832aa1d)](https://www.codacy.com/app/zxing/library?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=zxing-js/library&amp;utm_campaign=Badge_Grade)
41[![Maintainability](https://api.codeclimate.com/v1/badges/2b9c6ae92412ee8e15a9/maintainability)](https://codeclimate.com/github/zxing-js/library/maintainability)
42[![Test Coverage](https://api.codeclimate.com/v1/badges/2b9c6ae92412ee8e15a9/test_coverage)](https://codeclimate.com/github/zxing-js/library/test_coverage)
43[![BCH compliance](https://bettercodehub.com/edge/badge/zxing-js/library?branch=master)](https://bettercodehub.com/)
44
45## Demo
46
47See [Live Preview](https://zxing-js.github.io/library/) in browser.
48
49**Note:** All the examples are using ES6, be sure is supported in your browser or modify as needed, Chrome recommended.
50
51## Installation
52
53`npm i @zxing/library --save`
54
55or
56
57`yarn add @zxing/library`
58
59## Usage
60
61### Use on browser with ES6 modules:
62
63```html
64<script type="module">
65 import { BrowserQRCodeReader } from '@zxing/library';
66
67 const codeReader = new BrowserQRCodeReader();
68 const img = document.getElementById('img');
69
70 try {
71 const result = await codeReader.decodeFromImage(img);
72 } catch (err) {
73 console.error(err);
74 }
75
76 console.log(result);
77</script>
78```
79
80#### Or asynchronously:
81
82```html
83<script type="module">
84 import('@zxing/library').then({ BrowserQRCodeReader } => {
85
86 const codeReader = new BrowserQRCodeReader();
87 const img = document.getElementById('img');
88
89 try {
90 const result = await codeReader.decodeFromImage(img);
91 } catch (err) {
92 console.error(err);
93 }
94
95 console.log(result);
96
97 });
98</script>
99```
100
101### Use on browser with AMD:
102
103```html
104<script type="text/javascript" src="https://unpkg.com/requirejs"></script>
105<script type="text/javascript">
106 require(['@zxing/library'], ZXing => {
107 const codeReader = new ZXing.BrowserQRCodeReader();
108 const img = document.getElementById('img');
109
110 try {
111 const result = await codeReader.decodeFromImage(img);
112 } catch (err) {
113 console.error(err);
114 }
115
116 console.log(result);
117 });
118</script>
119```
120
121### Use on browser with UMD:
122
123```html
124<script type="text/javascript" src="https://unpkg.com/@zxing/library@latest"></script>
125<script type="text/javascript">
126 window.addEventListener('load', () => {
127 const codeReader = new ZXing.BrowserQRCodeReader();
128 const img = document.getElementById('img');
129
130 try {
131 const result = await codeReader.decodeFromImage(img);
132 } catch (err) {
133 console.error(err);
134 }
135
136 console.log(result);
137 });
138</script>
139```
140
141### Use outside the browser with CommonJS:
142
143```javascript
144const { MultiFormatReader, BarcodeFormat } = require('@zxing/library/esm5'); // use this path since v0.5.1
145
146const hints = new Map();
147const formats = [BarcodeFormat.QR_CODE, BarcodeFormat.DATA_MATRIX/*, ...*/];
148
149hints.set(DecodeHintType.POSSIBLE_FORMATS, formats);
150
151const reader = new MultiFormatReader();
152
153reader.setHints(hints);
154
155const luminanceSource = new RGBLuminanceSource(imgWidth, imgHeight, imgByteArray);
156const binaryBitmap = new BinaryBitmap(new HybridBinarizer(luminanceSource));
157
158reader.decode(binaryBitmap);
159```
160
161## Browser Support
162
163The browser layer is using the [MediaDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices) web API which is not supported by older browsers.
164
165_You can use external polyfills like [WebRTC adapter](https://github.com/webrtc/adapter) to increase browser compatibility._
166
167Also, note that the library is using the [`TypedArray`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray) (`Int32Array`, `Uint8ClampedArray`, etc.) which are not available in older browsers (e.g. Android 4 default browser).
168
169_You can use [core-js](https://github.com/zloirock/core-js) to add support to these browsers._
170
171### Scanning from Video Camera
172
173To display the input from the video camera you will need to add a video element in the HTML page:
174
175```html
176<video
177 id="video"
178 width="300"
179 height="200"
180 style="border: 1px solid gray"
181></video>
182```
183
184To start decoding, first obtain a list of video input devices with:
185
186```javascript
187const codeReader = new ZXing.BrowserQRCodeReader();
188
189codeReader
190 .listVideoInputDevices()
191 .then(videoInputDevices => {
192 videoInputDevices.forEach(device =>
193 console.log(`${device.label}, ${device.deviceId}`)
194 );
195 })
196 .catch(err => console.error(err));
197```
198
199If 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:
200
201```javascript
202const firstDeviceId = videoInputDevices[0].deviceId;
203
204codeReader
205 .decodeFromInputVideoDevice(firstDeviceId, 'video')
206 .then(result => console.log(result.text))
207 .catch(err => console.error(err));
208```
209
210If there are more input devices then you will need to chose one for `codeReader.decodeFromInputVideoDevice` device id parameter.
211
212You 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:
213
214```javascript
215codeReader
216 .decodeFromInputVideoDevice(undefined, 'video')
217 .then(result => console.log(result.text))
218 .catch(err => console.error(err));
219```
220
221### Scanning from Video File
222
223Similar as above you can use a video element in the HTML page:
224
225```html
226<video
227 id="video"
228 width="300"
229 height="200"
230 style="border: 1px solid gray"
231></video>
232```
233
234And to decode the video from an url:
235
236```javascript
237const codeReader = new ZXing.BrowserQRCodeReader();
238const videoSrc = 'your url to a video';
239
240codeReader
241 .decodeFromVideo('video', videoSrc)
242 .then(result => console.log(result.text))
243 .catch(err => console.error(err));
244```
245
246You can also decode the video url without showing it in the page, in this case no `video` element is needed in HTML.
247
248```javascript
249codeReader
250 .decodeFromVideoUrl(videoUrl)
251 .then(result => console.log(result.text))
252 .catch(err => console.error(err));
253
254// or alternatively
255
256codeReader
257 .decodeFromVideo(null, videoUrl)
258 .then(result => console.log(result.text))
259 .catch(err => console.error(err));
260```
261
262### Scanning from Image
263
264Similar as above you can use a img element in the HTML page (with src attribute set):
265
266```html
267<img
268 id="img"
269 src="qrcode-image.png"
270 width="200"
271 height="300"
272 style="border: 1px solid gray"
273/>
274```
275
276And to decode the image:
277
278```javascript
279const codeReader = new ZXing.BrowserQRCodeReader();
280const img = document.getElementById('img');
281
282codeReader
283 .decodeFromImage(img)
284 .then(result => console.log(result.text))
285 .catch(err => console.error(err));
286```
287
288You can also decode the image url without showing it in the page, in this case no `img` element is needed in HTML:
289
290```javascript
291const imgSrc = 'url to image';
292
293codeReader
294 .decodeFromImage(undefined, imgSrc)
295 .then(result => console.log(result.text))
296 .catch(err => console.error(err));
297```
298
299Or decode the image url directly from an url, with an `img` element in page (notice no `src` attribute is set for `img` element):
300
301```html
302<img
303 id="img-to-decode"
304 width="200"
305 height="300"
306 style="border: 1px solid gray"
307/>
308```
309
310```javascript
311const imgSrc = 'url to image';
312const imgDomId = 'img-to-decode';
313
314codeReader
315 .decodeFromImage(imgDomId, imgSrc)
316 .then(result => console.log(result.text))
317 .catch(err => console.error(err));
318```
319
320## Barcode generation
321
322To 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:
323
324```html
325<div id="result"></div>
326```
327
328And then:
329
330```javascript
331const codeWriter = new ZXing.BrowserQRCodeSvgWriter();
332// you can get a SVG element.
333const svgElement = codeWriter.write(input, 300, 300);
334// or render it directly to DOM.
335codeWriter.writeToDom('#result', input, 300, 300);
336```
337
338## Contributing
339
340See [Contributing Guide](https://github.com/zxing-js/library/blob/master/CONTRIBUTING.md) for information regarding porting approach and reasoning behind some of the approaches taken.
341
342## Contributors
343
344Special thanks to all the contributors who have contributed for this project. We heartly thankful to you all.
345
346[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/0)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/0)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/1)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/1)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/2)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/2)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/3)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/3)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/4)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/4)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/5)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/5)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/6)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/6)[![](https://sourcerer.io/fame/odahcam/zxing-js/library/images/7)](https://sourcerer.io/fame/odahcam/zxing-js/library/links/7)
347
348And a special thanks to @aleris who created the project itself and made the initial QR code port.
349
350---
351
352[![Bless](https://cdn.rawgit.com/LunaGao/BlessYourCodeTag/master/tags/alpaca.svg)](http://lunagao.github.io/BlessYourCodeTag/)
353
354[0]: https://www.npmjs.com/package/@zxing/library
355[1]: https://github.com/zxing/zxing

Từ khóa » C Zxing