지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 문서 스캔을 위해 .NET MAUI Blazor에서 WebView Control로 전환

문서 스캔을 위해 .NET MAUI Blazor에서 WebView Control로 전환

PHPz
풀어 주다： 2024-07-29 18:37:22
원래의
913명이 탐색했습니다.

.NET MAUI 개발에서 BlazorWebView와 WebView는 모두 웹 콘텐츠를 표시하는 데 사용되지만 서로 다른 용도로 사용되며 서로 다른 시나리오에 맞게 설계되었습니다. BlazorWebView는 .NET MAUI 애플리케이션에서 Blazor 구성 요소를 호스팅하도록 특별히 설계되었으므로 Blazor 구성 요소를 재사용하고 웹 애플리케이션과 기본 애플리케이션 간에 코드를 공유할 수 있습니다. WebView는 웹 페이지, HTML 문자열 및 로컬 HTML 파일을 포함한 웹 콘텐츠를 표시하기 위한 범용 컨트롤입니다. 이 기사에서는 WebView 컨트롤을 사용하여 .NET MAUI Blazor 문서 스캐너 애플리케이션을 .NET MAUI 애플리케이션으로 전환하고, JavaScript 및 HTML로 문서 검색 논리를 구현하고, C#과 JavaScript 간의 상호 운용을 활성화하여 문서를 스캔하고 이미지를 저장하세요.

전제조건

  1. Dynamsoft 서비스 설치: 이 서비스는 Windows 및 macOS에서 TWAIN, SANE, ICA, ESCL 및 WIA 스캐너와 통신하는 데 필요합니다.
    • Windows: Dynamsoft-Service-Setup.msi
    • macOS: Dynamsoft-Service-Setup.pkg
  2. 무료 평가판 라이센스 요청: 시작하려면 Dynamic Web TWAIN에 대한 30일 무료 평가판 라이센스를 받으세요.

1단계: WebView 컨트롤을 사용하여 새 .NET MAUI 프로젝트 생성

  1. Visual Studio 또는 Visual Studio Code에서 새 .NET MAUI 프로젝트를 만듭니다.

  2. MainPage.xaml 파일을 열고 기존 코드를 다음 XAML로 바꿔 WebView 컨트롤을 추가합니다.

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiWebView.MainPage">

    <ScrollView>
        <StackLayout
            VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
            <WebView
    x:Name="WebView"
    VerticalOptions="FillAndExpand"
    HorizontalOptions="FillAndExpand" Navigating="OnWebViewNavigated"/>

        </StackLayout>
    </ScrollView>

</ContentPage>
    로그인 후 복사

  3. MainPage.xaml.cs 파일을 열고 다음 코드를 추가하여 WebView의 소스를 설정하고 Navigating 이벤트를 처리합니다.

    namespace MauiWebView
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            LoadHtmlFile();
        }

        private void LoadHtmlFile()
        {
            WebView.Source = "index.html";

        }

        private async void OnWebViewNavigated(object sender, WebNavigatingEventArgs e)
        {
            if (e.Url.StartsWith("invoke://callcsharpfunction"))
            {
                // TODO: Implement interop between C# and JavaScript
            }
        }
    }

}
    로그인 후 복사

    설명:

    • LoadHtmlFile 메서드는 WebView 컨트롤의 Source 속성을 설정하여 index.html 파일을 로드합니다.
    • OnWebViewNavigated 메서드는 WebView가 새 URL로 이동할 때 트리거됩니다. URL이 Invoke://callcsharpfunction으로 시작하는지 확인하고, 그렇다면 C# 및 JavaScript 상호 운용성을 허용합니다.

2단계: 정적 HTML, JavaScript 및 CSS 파일을 WebView 컨트롤에 로드

.NET MAUI 프로젝트에서는 Resources/Raw 폴더에 있는 정적 HTML, JavaScript 및 CSS 파일을 WebView로 로드할 수 있습니다. MauiAsset 빌드 작업이 .csproj 파일에 포함되어 있는지 확인하세요.

<ItemGroup>
    <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
로그인 후 복사

Switching from .NET MAUI Blazor to WebView Control for Document Scanning

index.html 파일에 이전 Blazor 문서 스캐너 애플리케이션과 유사한 UI 레이아웃을 만듭니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dynamsoft RESTful API Example</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div id="loading-indicator" class="loading-indicator">
        <div class="spinner"></div>
    </div>

    <h2>Document Scanner</h2>
    <div class="row">
        <div>
            <label>
                Get a License key from <a href="https://www.dynamsoft.com/customer/license/trialLicense?product=dwt"
                                          target="_blank">here</a>.
            </label>
            <input type="text" placeholder="licenseKey" id="inputText" class="license-input">
            <br />
        </div>

    </div>

    <div class="container">
        <div class="image-tool">
            <h3>Acquire Image</h3>
            <button class="btn btn-primary" id="query-devices-button">Get Devices</button>

            <div>
                <label for="sourceSelect">Source: </label>
                <select id="sources" class="form-control"></select>
            </div>

            <div>
                <label for="pixelTypeSelect">Pixel Type: </label>
                <select id="pixelTypeSelectId" class="form-control">
                    <option>B &amp; W</option>
                    <option>Gray</option>
                    <option>Color</option>
                </select>
            </div>

            <div>
                <label for="resolutionSelect">Resolution: </label>
                <select id="resolutionSelectId" class="form-control">
                    <option>100</option>
                    <option>150</option>
                    <option>200</option>
                    <option>300</option>
                </select>
            </div>


            <div>
                <input class="form-check-input" type="checkbox" id="showUICheckId">
                <label class="form-check-label" for="showUICheck">Show UI</label>
            </div>
            <div>
                <input class="form-check-input" type="checkbox" id="adfCheckId">
                <label class="form-check-label" for="adfCheck">ADF</label>
            </div>
            <div>
                <input class="form-check-input" type="checkbox" id="duplexCheckId">
                <label class="form-check-label" for="duplexCheck">Duplex</label>
            </div>

            <button class="btn btn-primary mt-3" id="scan-button">Scan Now</button>
            <button class="btn btn-primary mt-2" id="save-button">Save</button>

            <h3>Image Tools</h3>
            <div class="image-tools">
                <button id="delete-button" style="border:none; background:none; padding:0;">
                    <img src="images/delete.png" alt="Click Me" style="width: 64px; height: 64px;" />
                </button>
                <button id="rotate-left-button" style="border:none; background:none; padding:0;">
                    <img src="images/rotate_left.png" alt="Click Me" style="width: 64px; height: 64px;" />
                </button>
                <button id="rotate-right-button" style="border:none; background:none; padding:0;">
                    <img src="images/rotate_right.png" alt="Click Me" style="width: 64px; height: 64px;" />
                </button>
            </div>
        </div>

        <div class="image-display">
            <div class="full-img">
                <img id="document-image" src="images/default.png" class="scanned-image">
            </div>

            <div class="row">
                <div class="thumb-bar" id="thumb-bar">
                    <div class="thumb-box" id="thumb-box"> 
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="main.js"></script>
</body>

</html>
로그인 후 복사

3단계: JavaScript로 문서 스캔 구현

환경이 준비되었으면 다음 단계는 관련 기능을 JavaScript로 구현하는 것입니다.

장치 가져오기

사용 가능한 스캐너를 열거하세요.

const ScannerType = {
    // TWAIN scanner type, represented by the value 0x10
    TWAINSCANNER: 0x10,

    // WIA scanner type, represented by the value 0x20
    WIASCANNER: 0x20,

    // 64-bit TWAIN scanner type, represented by the value 0x40
    TWAINX64SCANNER: 0x40,

    // ICA scanner type, represented by the value 0x80
    ICASCANNER: 0x80,

    // SANE scanner type, represented by the value 0x100
    SANESCANNER: 0x100,

    // eSCL scanner type, represented by the value 0x200
    ESCLSCANNER: 0x200,

    // WiFi Direct scanner type, represented by the value 0x400
    WIFIDIRECTSCANNER: 0x400,

    // WIA-TWAIN scanner type, represented by the value 0x800
    WIATWAINSCANNER: 0x800
};

let queryDevicesButton = document.getElementById("query-devices-button");
queryDevicesButton.onclick = async () => {
    let scannerType = ScannerType.TWAINSCANNER | ScannerType.TWAINX64SCANNER;
    let devices = await getDevices(host, scannerType);
    let select = document.getElementById("sources");
    select.innerHTML = '';
    for (let i = 0; i < devices.length; i++) {
        let device = devices[i];
        let option = document.createElement("option");
        option.text = device['name'];
        option.value = JSON.stringify(device);
        select.add(option);
    };
}

async function getDevices(host, scannerType) {
    devices = [];
    let url = host + '/DWTAPI/Scanners'
    if (scannerType != null) {
        url += '?type=' + scannerType;
    }

    try {
        let response = await fetch(url);

        if (response.ok) {
            let devices = await response.json();
            return devices;
        }
    } catch (error) {
        console.log(error);
    }
    return [];
}
로그인 후 복사

설명

  • getDevices 함수는 RESTful API 엔드포인트 /DWTAPI/Scanners에 GET 요청을 보내 사용 가능한 스캐너를 가져옵니다. 스캐너 유형은 scannerType 매개변수로 지정됩니다.

이미지 획득

픽셀 유형, 해상도 및 기타 설정을 지정하여 선택한 스캐너에서 문서를 스캔합니다.

let scanButton = document.getElementById("scan-button");
scanButton.onclick = async () => {
    let select = document.getElementById("sources");
    let device = select.value;

    if (device == null || device.length == 0) {
        alert('Please select a scanner.');
        return;
    }

    let inputText = document.getElementById("inputText").value;
    let license = inputText.trim();

    if (license == null || license.length == 0) {
        alert('Please input a valid license key.');
    }

    let parameters = {
        license: license,
        device: JSON.parse(device)['device'],
    };

    let showUICheck = document.getElementById("showUICheckId");

    let pixelTypeSelect = document.getElementById("pixelTypeSelectId");

    let resolutionSelect = document.getElementById("resolutionSelectId");

    let adfCheck = document.getElementById("adfCheckId");

    let duplexCheck = document.getElementById("duplexCheckId");

    parameters.config = {
        IfShowUI: showUICheck.checked,
        PixelType: pixelTypeSelect.selectedIndex,
        Resolution: parseInt(resolutionSelect.value),
        IfFeederEnabled: adfCheck.checked,
        IfDuplexEnabled: duplexCheck.checked,
    };


    let jobId = await scanDocument(host, parameters);
    let images = await getImages(host, jobId);

    for (let i = 0; i < images.length; i++) {
        let url = images[i];

        let img = document.getElementById('document-image');
        img.src = url;
        data.unshift(url);

        let option = document.createElement("option");
        option.selected = true;
        option.text = url;
        option.value = url;

        let thumbnails = document.getElementById("thumb-box");
        let newImage = document.createElement('img');
        newImage.setAttribute('src', url);
        if (thumbnails != null) {
            thumbnails.insertBefore(newImage, thumbnails.firstChild);
            newImage.addEventListener('click', e => {
                if (e != null && e.target != null) {
                    let target = e.target;
                    img.src = target.src;
                    selectedThumbnail = target;
                }
            });
        }

        selectedThumbnail = newImage;
    }

}

async function scanDocument(host, parameters, timeout = 30) {
    let url = host + '/DWTAPI/ScanJobs?timeout=' + timeout;

    try {
        let response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(parameters)
        });

        if (response.ok) {
            let jobId = await response.text();
            return jobId;
        }
        else {
            return '';
        }
    } catch (error) {
        alert(error);
        return '';
    }
}

async function getImages(host, jobId) {
    let images = [];
    let url = host + '/DWTAPI/ScanJobs/' + jobId + '/NextDocument';

    while (true) {
        try {

            let response = await fetch(url);

            if (response.status == 200) {
                const arrayBuffer = await response.arrayBuffer();
                const blob = new Blob([arrayBuffer], { type: response.type });
                const imageUrl = URL.createObjectURL(blob);

                images.push(imageUrl);
            }
            else {
                break;
            }

        } catch (error) {
            console.error('No more images.');
            break;
        }
    }

    return images;
}
로그인 후 복사

설명

  • scanDocument 함수는 RESTful API 엔드포인트 /DWTAPI/ScanJobs에 POST 요청을 보내 스캔 작업을 시작합니다. 매개변수에는 라이센스 키, 장치 이름, 스캔 설정이 포함됩니다.
  • getImages 함수는 스캔된 이미지를 가져오기 위해 RESTful API 엔드포인트 /DWTAPI/ScanJobs/{jobId}/NextDocument에 GET 요청을 보냅니다. 이미지는 Blob 개체에 저장되고 이미지 표시 영역에 표시됩니다.

이미지 회전

스캔 이미지를 -90도 또는 90도 회전합니다.

let rotateLeftButton = document.getElementById("rotate-left-button");
rotateLeftButton.onclick = () => {
    let img = document.getElementById('document-image');
    img.src = rotateImage('document-image', -90);
    selectedThumbnail.src = img.src;
}

let rotateRightButton = document.getElementById("rotate-right-button");
rotateRightButton.onclick = () => {
    let img = document.getElementById('document-image');
    img.src = rotateImage('document-image', 90);
    selectedThumbnail.src = img.src;
}

    function rotateImage (imageId, angle) {
    const image = document.getElementById(imageId);
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const imageWidth = image.naturalWidth;
    const imageHeight = image.naturalHeight;

    // Calculate the new rotation
    let rotation = 0;
    rotation = (rotation + angle) % 360;

    // Adjust canvas size for rotation
    if (rotation === 90 || rotation === -270 || rotation === 270) {
        canvas.width = imageHeight;
        canvas.height = imageWidth;
    } else if (rotation === 180 || rotation === -180) {
        canvas.width = imageWidth;
        canvas.height = imageHeight;
    } else if (rotation === 270 || rotation === -90) {
        canvas.width = imageHeight;
        canvas.height = imageWidth;
    } else {
        canvas.width = imageWidth;
        canvas.height = imageHeight;
    }

    // Clear the canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the rotated image on the canvas
    context.save();
    if (rotation === 90 || rotation === -270) {
        context.translate(canvas.width, 0);
        context.rotate(90 * Math.PI / 180);
    } else if (rotation === 180 || rotation === -180) {
        context.translate(canvas.width, canvas.height);
        context.rotate(180 * Math.PI / 180);
    } else if (rotation === 270 || rotation === -90) {
        context.translate(0, canvas.height);
        context.rotate(270 * Math.PI / 180);
    }
    context.drawImage(image, 0, 0);
    context.restore();

    return canvas.toDataURL();
}
로그인 후 복사

이미지 삭제

메인 이미지와 썸네일을 포함한 모든 스캔 이미지를 삭제하고 데이터 배열을 재설정하세요.

let deleteButton = document.getElementById("delete-button");
deleteButton.onclick = async () => {
    let img = document.getElementById('document-image');
    img.src = 'images/default.png';
    data = [];
    let thumbnails = document.getElementById("thumb-box");
    thumbnails.innerHTML = '';
}
로그인 후 복사

4단계: 이미지 저장을 위한 C#과 JavaScript 간의 상호 운용성

보안 문제로 인해 JavaScript에 이미지를 직접 저장하는 것은 제한됩니다. 따라서 이 작업을 수행하려면 C#과 JavaScript 간의 상호 운용이 필요합니다.

  1. 스캔 이미지를 base64 문자열로 변환하는 JavaScript 함수를 만듭니다.

    function getBase64Image() {
    var img = document.getElementById('document-image');
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL('image/png'); 
    var base64 = dataURL.split(',')[1]; 
    return base64;
}
    로그인 후 복사

  2. 저장 버튼을 클릭할 때 WebView 컨트롤의 OnWebViewNavigated 이벤트 핸들러를 트리거하도록 window.location.href를 설정하세요.

    let saveButton = document.getElementById("save-button");
saveButton.onclick = async () => {
    window.location.href = 'invoke://CallCSharpFunction';    
}
    로그인 후 복사

  3. OnWebViewNavigated 이벤트 핸들러에서 EvaluateJavaScriptAsync를 호출하여 JavaScript에서 base64 이미지 데이터를 검색하고 파일에 저장합니다.

    private async void OnWebViewNavigated(object sender, WebNavigatingEventArgs e)
{
    if (e.Url.StartsWith("invoke://callcsharpfunction"))
    {
        var base64String = await WebView.EvaluateJavaScriptAsync("getBase64Image()");
        CallCSharpFunction(base64String);
    }
}

private void CallCSharpFunction(string base64String)
{
    if (!string.IsNullOrEmpty(base64String))
    {

        try
        {
            byte[] imageBytes = Convert.FromBase64String(base64String);

            var filePath = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.MyDocuments), GenerateFilename());
            File.WriteAllBytes(filePath, imageBytes);
            DisplayAlert("Success", "Image saved to: " + filePath, "OK");

        }
        catch (Exception ex)
        {
            DisplayAlert("Error", ex.Message, "OK");
        }
    }
    else
    {
        DisplayAlert("Failure", "No image data found", "OK");
    }
}

private string GenerateFilename()
{
    DateTime now = DateTime.Now;
    string timestamp = now.ToString("yyyyMMdd_HHmmss");
    return $"image_{timestamp}.png";
}
    로그인 후 복사

Note: Do not pass the base64 string directly to the C# function via window.location.href, as the string may be too long and cause an error. Instead, return the base64 string when calling EvaluateJavaScriptAsync from the C# function.

Step 5: Run the .NET MAUI Document Scanner Application

Press F5 in Visual Studio or Visual Studio Code to run the .NET document scanner application on Windows or macOS.

Switching from .NET MAUI Blazor to WebView Control for Document Scanning

Source Code

https://github.com/yushulx/dotnet-twain-wia-sane-scanner/tree/main/examples/MauiWebView

위 내용은 문서 스캔을 위해 .NET MAUI Blazor에서 WebView Control로 전환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：코드 주간 5 다음 기사：AI가 현대 웹 개발을 혁신하는 방법: 주요 동향 및 도구
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2561
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2702
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
2289
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
2146
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
2253
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿