scanic 0.1.5 → 0.1.7

package/README.md

@@ -1,9 +1,16 @@
 <p align="center">
   <a href="#">
-    <img src="./public/scanic-logo-bg.png" alt="scanic logo" height="400">
+    <img src="public/scanic-logo-bg.png" alt="scanic logo" height="400">
   </a>
 </p>
 
+<p align="center">
+    <a href="https://npmjs.com/package/scanic"><img src="https://badgen.net/npm/dw/scanic"></a>
+    <br />
+    <a href="https://github.com/marquaye/scanic/blob/master/LICENSE"><img src="https://img.shields.io/github/license/marquaye/scanic.svg"></a>
+    <a href="https://npmjs.com/package/scanic"><img src="https://badgen.net/npm/v/scanic"></a>
+</p>
+
 # Scanic
 
 **Modern Document Scanner for the Web**
@@ -12,7 +19,7 @@ Scanic is a blazing-fast, lightweight, and modern document scanner library writt
 
 ## Why Scanic?
 
-I always wanted to use document scanning features within web environments for years. While OpenCV makes this easy, it comes at the cost of a 30+ MB download.
+I always wanted to use document scanning features within web environments for years. While OpenCV makes this easy, it comes at the cost of a **30+ MB** download.
 
 Scanic combines pure JavaScript algorithms with **Rust-compiled WebAssembly** for performance-critical operations like Gaussian blur, Canny edge detection, and gradient calculations. This hybrid approach delivers near-native performance while maintaining JavaScript's accessibility and a lightweight footprint.
 
@@ -48,7 +55,7 @@ Or use via CDN:
 ## Usage
 
 ```js
-import { scanDocument, LiveScanner, checkWebcamAvailability } from 'scanic';
+import { scanDocument, extractDocument } from 'scanic';
 
 // Simple usage - just detect document
 const result = await scanDocument(imageElement);
@@ -56,11 +63,23 @@ if (result.success) {
   console.log('Document found at corners:', result.corners);
 }
 
-// Extract the document (perspective correction)
+// Extract the document (with perspective correction)
 const extracted = await scanDocument(imageElement, { mode: 'extract' });
 if (extracted.success) {
   document.body.appendChild(extracted.output); // Display extracted document
 }
+
+// Manual extraction with custom corner points (for image editors)
+const corners = {
+  topLeft: { x: 100, y: 50 },
+  topRight: { x: 400, y: 60 },
+  bottomRight: { x: 390, y: 300 },
+  bottomLeft: { x: 110, y: 290 }
+};
+const manualExtract = await extractDocument(imageElement, corners);
+if (manualExtract.success) {
+  document.body.appendChild(manualExtract.output);
+}
 ```
 
 ### Complete Example
@@ -104,7 +123,7 @@ async function processDocument() {
 
 ## API Reference
 
-### Core Function
+### Core Functions
 
 #### `scanDocument(image, options?)`
 Main entry point for document scanning with flexible modes and output options.
@@ -167,8 +186,22 @@ const rawData = await scanDocument(imageElement, {
   mode: 'extract',
   output: 'imagedata' 
 });
+
+// Extract as DataURI
+const rawData = await scanDocument(imageElement, { 
+  mode: 'extract',
+  output: 'dataurl' 
+});
+
 ```
 
+## Framework Examples
+
+
+👉 **[Vue.js Example & Guide](docs/vue-example.md)**
+
+👉 **[React Example & Guide](docs/react-example.md)**
+
 
 ## Development
 
@@ -243,10 +276,9 @@ Please ensure your code follows the existing style.
 ### 🏆 Gold Sponsors
 
 <table>
-  <tr>
+  <tr style="color: black;">
     <td align="center" width="300">
-      <a href="https://zeugnisprofi.com" target="_blank">
-        <img src="https://via.placeholder.com/200x80/4A90E2/FFFFFF?text=ZeugnisProfi" alt="ZeugnisProfi" width="200"/>
+      <a href="https://zeugnisprofi.com" target="_blank"> 
         <br/>
         <strong>ZeugnisProfi</strong>
       </a>
@@ -255,7 +287,6 @@ Please ensure your code follows the existing style.
     </td>
     <td align="center" width="300">
       <a href="https://zeugnisprofi.de" target="_blank">
-        <img src="https://via.placeholder.com/200x80/50C878/FFFFFF?text=ZeugnisProfi.de" alt="ZeugnisProfi.de" width="200"/>
         <br/>
         <strong>ZeugnisProfi.de</strong>
       </a>
@@ -264,7 +295,6 @@ Please ensure your code follows the existing style.
     </td>
     <td align="center" width="250">
       <a href="https://www.verlingo.de" target="_blank">
-        <img src="https://via.placeholder.com/180x70/FF6B35/FFFFFF?text=Verlingo" alt="Verlingo" width="180"/>
         <br/>
         <strong>Verlingo</strong>
       </a>