Dalam pembangunan .NET MAUI, kedua-dua BlazorWebView dan WebView digunakan untuk memaparkan kandungan web, tetapi ia mempunyai tujuan yang berbeza dan direka untuk senario yang berbeza. BlazorWebView direka khusus untuk mengehoskan komponen Blazor dalam aplikasi .NET MAUI, membolehkan anda menggunakan semula komponen Blazor dan berkongsi kod antara aplikasi web dan asli. WebView ialah kawalan tujuan umum untuk memaparkan kandungan web, termasuk halaman web, rentetan HTML dan fail HTML tempatan. Dalam artikel ini, kami akan meneroka cara untuk mengalihkan aplikasi pengimbas dokumen .NET MAUI Blazor kepada aplikasi .NET MAUI menggunakan kawalan WebView, melaksanakan logik pengimbasan dokumen dalam JavaScript dan HTML, dan membolehkan interoperasi antara C# dan JavaScript untuk mengimbas dokumen dan simpan imej.
Buka fail MainPage.xaml dan gantikan kod sedia ada dengan XAML berikut untuk menambah kawalan 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>
Buka fail MainPage.xaml.cs dan tambah kod berikut untuk menetapkan sumber WebView dan mengendalikan acara Navigasi:
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
}
}
}
}
Penjelasan:
Dalam projek .NET MAUI, anda boleh memuatkan fail HTML, JavaScript dan CSS statik yang terletak dalam folder Sumber/Mentah ke dalam WebView. Pastikan tindakan bina MauiAsset disertakan dalam fail .csproj:
<ItemGroup>
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
Kami mencipta reka letak UI yang serupa seperti aplikasi pengimbas dokumen Blazor sebelumnya dalam fail index.html.
<!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 & 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>
Dengan persekitaran sedia, langkah seterusnya ialah melaksanakan fungsi yang berkaitan dalam JavaScript.
Jumlah pengimbas yang tersedia.
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 [];
}
Penjelasan
Imbas dokumen daripada pengimbas yang dipilih dengan menyatakan jenis piksel, resolusi dan tetapan lain.
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;
}
Penjelasan
Putar imej yang diimbas sebanyak -90 atau 90 darjah.
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();
}
Padam semua imej yang diimbas, termasuk imej utama dan lakaran kecil, dan tetapkan semula tatasusunan data.
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 = '';
}
Menyimpan imej secara terus dalam JavaScript adalah terhad kerana kebimbangan keselamatan. Oleh itu, kita perlu beroperasi antara C# dan JavaScript untuk menyelesaikan tugas ini.
Buat fungsi JavaScript untuk menukar imej yang diimbas kepada rentetan base64.
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;
}
Apabila mengklik butang simpan, tetapkan window.location.href untuk mencetuskan pengendali acara OnWebViewNavigated bagi kawalan WebView.
let saveButton = document.getElementById("save-button");
saveButton.onclick = async () => {
window.location.href = 'invoke://CallCSharpFunction';
}
Dalam pengendali acara OnWebViewNavigated, panggil EvaluateJavaScriptAsync untuk mendapatkan semula data imej base64 daripada JavaScript dan menyimpannya pada fail.
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.
Press F5 in Visual Studio or Visual Studio Code to run the .NET document scanner application on Windows or macOS.
https://github.com/yushulx/dotnet-twain-wia-sane-scanner/tree/main/examples/MauiWebView
Atas ialah kandungan terperinci Beralih daripada .NET MAUI Blazor kepada Kawalan WebView untuk Pengimbasan Dokumen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
