Web TWAIN SDK Code-Beispiele für JavaScript, React, Vue, Angular, PHP, Python & Szenarien

<!-- 1. Include SDK --><script src="https://encleso.com/Scripts/Encleso.js"></script><script>// 2. Register OnReady eventEncleso.OnReady = async function(ret) {  const scanner = ret.ScannersList[ret.DefaultIndex];  // 3. Start scan  const result = await Encleso.StartScan(scanner, false);  const preview = await Encleso.GetImagePreview(    result.ScannedImagesStartingIndex  );  document.getElementById("preview").src = preview;};</script><img id="preview" alt="Scan preview" />

import { useEffect, useState } from "react";export default function Scanner() {  const [preview, setPreview] = useState(null);  useEffect(() => {    // Encleso SDK included via <script> tag in index.html    const tryInit = () => {      if (typeof Encleso === "undefined") {        return setTimeout(tryInit, 300);      }      Encleso.OnReady = async (ret) => {        const scanner = ret.ScannersList[ret.DefaultIndex];        const result = await Encleso.StartScan(scanner, false);        const img = await Encleso.GetImagePreview(          result.ScannedImagesStartingIndex        );        setPreview(img);      };    };    tryInit();  }, []);  return <img src={preview} alt="Scan" />;}

<template>  <img :src="preview" alt="Scan" /></template><script setup>import { ref, onMounted } from "vue";const preview = ref(null);onMounted(() => {  // Encleso SDK included via <script> tag in index.html  const tryInit = () => {    if (typeof Encleso === "undefined") {      return setTimeout(tryInit, 300);    }    Encleso.OnReady = async (ret) => {      const scanner = ret.ScannersList[ret.DefaultIndex];      const result = await Encleso.StartScan(scanner, false);      preview.value = await Encleso.GetImagePreview(        result.ScannedImagesStartingIndex      );    };  };  tryInit();});</script>

import { Component, OnInit } from "@angular/core";@Component({  selector: "app-scanner",  template: `<img [src]="preview" alt="Scan" />`})export class ScannerComponent implements OnInit {  preview: string | null = null;  ngOnInit() {    // Encleso SDK included via <script> tag in index.html    const tryInit = () => {      if (typeof (window as any).Encleso === "undefined") {        return setTimeout(tryInit, 300);      }      const E = (window as any).Encleso;      E.OnReady = async (ret: any) => {        const scanner = ret.ScannersList[ret.DefaultIndex];        const result = await E.StartScan(scanner, false);        this.preview = await E.GetImagePreview(          result.ScannedImagesStartingIndex        );      };    };    tryInit();  }}

<!-- 1. Include Encleso SDK in your HTML --><script src="https://encleso.com/Scripts/Encleso.js"></script><script>// 2. Register OnReady and scanEncleso.OnReady = async function(ret) {  const scanner = ret.ScannersList[ret.DefaultIndex];  const result  = await Encleso.StartScan(scanner, false);  const blob    = await Encleso.GetImageBlob(    result.ScannedImagesStartingIndex  );  // 3. Upload to your PHP backend  const form = new FormData();  form.append("file", blob, "scan.jpg");  const res  = await fetch("upload.php", { method: "POST", body: form });  const data = await res.json();  if (data.success) {    document.getElementById("preview").src = data.fileUrl;  }};</script><img id="preview" alt="Scan preview" /><?php// upload.php – receives the scanned image and saves itif (isset($_FILES["file"]) && $_FILES["file"]["error"] === UPLOAD_ERR_OK) {    $dir  = __DIR__ . "/uploads/";    if (!is_dir($dir)) mkdir($dir, 0755, true);    $dest = $dir . basename($_FILES["file"]["name"]);    if (move_uploaded_file($_FILES["file"]["tmp_name"], $dest)) {        echo json_encode(["success" => true,                          "fileUrl" => "/uploads/" .                          basename($_FILES["file"]["name"])]);        exit;    }}echo json_encode(["success" => false, "error" => "Upload failed"]);?>

<!-- 1. Include Encleso SDK in your HTML --><script src="https://encleso.com/Scripts/Encleso.js"></script><script>// 2. Register OnReady and scanEncleso.OnReady = async function(ret) {  const scanner = ret.ScannersList[ret.DefaultIndex];  const result  = await Encleso.StartScan(scanner, false);  const blob    = await Encleso.GetImageBlob(    result.ScannedImagesStartingIndex  );  // 3. Upload to your Python/Flask backend  const form = new FormData();  form.append("file", blob, "scan.jpg");  const res  = await fetch("/upload", { method: "POST", body: form });  const data = await res.json();  if (data.success) {    document.getElementById("preview").src = data.file_url;  }};</script><img id="preview" alt="Scan preview" /># app.py – Flask backend that receives the scanned imagefrom flask import Flask, request, jsonifyimport osapp = Flask(__name__)UPLOAD_FOLDER = "uploads"os.makedirs(UPLOAD_FOLDER, exist_ok=True)@app.route("/upload", methods=["POST"])def upload():    if "file" not in request.files:        return jsonify({"success": False, "error": "No file"}), 400    f = request.files["file"]    path = os.path.join(UPLOAD_FOLDER, f.filename)    f.save(path)    return jsonify({"success": True, "file_url": "/" + path})if __name__ == "__main__":    app.run(debug=True)

// 1. Scan über das Encleso Web TWAIN SDK startenconst images = await Encleso.scan({  device: "auto",  dpi: 200,  duplex: false,  pixelType: "color"});// 2. Erstes gescanntes Bild als Blob vorbereitenconst blob = await (await fetch(images[0].url)).blob();// 3. An den eigenen Server-Endpunkt senden (FormData)const formData = new FormData();formData.append("document", blob, "scan.png");formData.append("folder", "inbox");formData.append("page_count", String(images.length));const res = await fetch("/api/documents/upload", {  method: "POST",  body: formData});const saved = await res.json();console.log("Dokument gespeichert mit ID:", saved.id);

// 1. Scan mit hoher Auflösung abrufenconst { image_url } = (await Encleso.scan({  device: "auto",  dpi: 300}))[0];// 2. Bild auf ein Canvas laden und direkt im Browser verarbeitenconst img = new Image();img.crossOrigin = "anonymous";img.src = image_url;await img.decode();const canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;const ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);// 3. Helligkeit & Kontrast anpassen (Pixel-Operation)const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);const data = imageData.data;const brightness = 1.1; // +10 % Helligkeitconst contrast = 1.25;  // +25 % Kontrastfor (let i = 0; i < data.length; i += 4) {  data[i]     = Math.min(255, Math.max(0, (data[i]     - 128) * contrast + 128) * brightness);  data[i + 1] = Math.min(255, Math.max(0, (data[i + 1] - 128) * contrast + 128) * brightness);  data[i + 2] = Math.min(255, Math.max(0, (data[i + 2] - 128) * contrast + 128) * brightness);}ctx.putImageData(imageData, 0, 0);// 4. 90° rotieren und als optimiertes PNG exportierenconst rotated = document.createElement("canvas");rotated.width = canvas.height;rotated.height = canvas.width;const rctx = rotated.getContext("2d");rctx.translate(rotated.width, 0);rctx.rotate((90 * Math.PI) / 180);rctx.drawImage(canvas, 0, 0);const optimized = rotated.toDataURL("image/png");console.log("Verarbeitetes Bild bereit.");

import { jsPDF } from "jspdf";// 1. Mehrere Seiten scannen (Batch-Modus)const pages = await Encleso.scan({  device: "auto",  dpi: 200,  batch: true});// 2. Mehrseitiges PDF clientseitig erzeugen – kein Server nötigconst pdf = new jsPDF({ unit: "pt", format: "a4" });const pageW = pdf.internal.pageSize.getWidth();const pageH = pdf.internal.pageSize.getHeight();for (let i = 0; i < pages.length; i++) {  if (i > 0) pdf.addPage();  const img = new Image();  img.src = pages[i].url;  await img.decode();  // Bild proportional in die DIN-A4-Seite einpassen  const ratio = Math.min(pageW / img.width, pageH / img.height);  const w = img.width * ratio;  const h = img.height * ratio;  pdf.addImage(img, "PNG", (pageW - w) / 2, (pageH - h) / 2, w, h);}pdf.save("scan-batch.pdf");console.log("PDF mit", pages.length, "Seiten erstellt.");