|
21 | 21 | https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/?ver=latest#host-the-library-yourself-recommended |
22 | 22 | --> |
23 | 23 | <script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js" ></script> |
24 | | - <style> |
25 | | - * { |
26 | | - margin: 0; |
27 | | - padding: 0; |
28 | | - } |
29 | | - body { |
30 | | - position: relative; |
31 | | - } |
32 | | - </style> |
33 | 24 | </head> |
34 | 25 | <body> |
35 | | - <div id="div-ui-container" style="width: 100%; height: 100vh"></div> |
| 26 | + <div id="div-ui-container" style="width: 100%; height: 90vh"></div> |
36 | 27 | <div id="div-text-containers"></div> |
37 | 28 | <script> |
38 | 29 | if (location.protocol === "file:") { |
|
80 | 71 | divTextContainers.innerText = ""; |
81 | 72 |
|
82 | 73 | for (let result of results) { |
| 74 | + const l = result.localizationResult; |
83 | 75 | const p1 = { |
84 | | - x: Math.min( |
85 | | - result.localizationResult.x1, |
86 | | - result.localizationResult.x2, |
87 | | - result.localizationResult.x3, |
88 | | - result.localizationResult.x4 |
89 | | - ), |
90 | | - y: Math.min( |
91 | | - result.localizationResult.y1, |
92 | | - result.localizationResult.y2, |
93 | | - result.localizationResult.y3, |
94 | | - result.localizationResult.y4 |
95 | | - ), |
| 76 | + x: Math.min(l.x1, l.x2, l.x3, l.x4), |
| 77 | + y: Math.min(l.y1, l.y2, l.y3, l.y4), |
96 | 78 | }; |
97 | 79 | const p2 = { |
98 | | - x: Math.max( |
99 | | - result.localizationResult.x1, |
100 | | - result.localizationResult.x2, |
101 | | - result.localizationResult.x3, |
102 | | - result.localizationResult.x4 |
103 | | - ), |
104 | | - y: Math.max( |
105 | | - result.localizationResult.y1, |
106 | | - result.localizationResult.y2, |
107 | | - result.localizationResult.y3, |
108 | | - result.localizationResult.y4 |
109 | | - ), |
| 80 | + x: Math.max(l.x1, l.x2, l.x3, l.x4), |
| 81 | + y: Math.max(l.y1, l.y2, l.y3, l.y4), |
110 | 82 | }; |
| 83 | + |
111 | 84 | /** |
112 | 85 | * 'convertToPageCoordinates()' is used to converts coordinate of a barcode location to the coordinate related to the document. |
113 | 86 | * Then we can place a div element according to the converted coordinate. |
114 | 87 | */ |
115 | 88 | const convertedP1 = scanner.convertToPageCoordinates(p1); |
116 | 89 | const convertedP2 = scanner.convertToPageCoordinates(p2); |
| 90 | + |
117 | 91 | textContainer = document.createElement("div"); |
118 | | - textContainer.style.position = "absolute"; |
119 | | - textContainer.style.left = convertedP1.x + "px"; |
120 | | - textContainer.style.right = document.body.clientWidth - convertedP2.x + "px"; |
121 | | - textContainer.style.bottom = document.body.clientHeight - convertedP1.y + "px"; |
122 | | - textContainer.style.color = "#FE8E14"; |
| 92 | + const bodyStyle = getComputedStyle(document.body); |
| 93 | + if (bodyStyle.position !== "static") { |
| 94 | + const rect = document.body.getBoundingClientRect(); |
| 95 | + const borderWidth = parseInt(bodyStyle.borderWidth); |
| 96 | + Object.assign(textContainer.style, { |
| 97 | + position: "absolute", |
| 98 | + left: convertedP1.x - rect.left - borderWidth + "px", |
| 99 | + right: rect.right - convertedP2.x - borderWidth + "px", |
| 100 | + bottom: rect.bottom - convertedP1.y - borderWidth + "px", |
| 101 | + color: "#FE8E14", |
| 102 | + }); |
| 103 | + } else { |
| 104 | + Object.assign(textContainer.style, { |
| 105 | + position: "absolute", |
| 106 | + left: convertedP1.x + "px", |
| 107 | + right: document.documentElement.clientWidth - convertedP2.x + "px", |
| 108 | + bottom: document.documentElement.clientHeight - convertedP1.y + "px", |
| 109 | + color: "#FE8E14", |
| 110 | + }); |
| 111 | + } |
123 | 112 | textContainer.innerText = result.barcodeText; |
124 | 113 | divTextContainers.append(textContainer); |
| 114 | + |
| 115 | + /** |
| 116 | + * You can also add more information, such as displaying product images. |
| 117 | + */ |
125 | 118 | } |
126 | 119 | }; |
127 | 120 |
|
|
0 commit comments