-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
1 parent
b3005c2
commit 69c58e1
Showing
84 changed files
with
4,192 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
html,body { | ||
width: 100%; | ||
height: 100%; | ||
margin:0; | ||
padding:0; | ||
overscroll-behavior-y: none; | ||
overflow: hidden; | ||
} | ||
|
||
#container { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
#imageContainer { | ||
width: 100%; | ||
height: 100%; | ||
display: flex; | ||
box-sizing: border-box; | ||
align-items: center; | ||
flex-direction: column; | ||
padding: 20px 0px; | ||
justify-content: flex-start | ||
} | ||
|
||
#imageContainer img { | ||
width: 90%; | ||
height: 60%; | ||
object-fit: contain; | ||
border:none; | ||
} | ||
|
||
#restore { | ||
display: flex; | ||
width: 80px; | ||
height: 40px; | ||
align-items: center; | ||
background: #fe8e14; | ||
justify-content: center; | ||
color: white; | ||
cursor: pointer; | ||
user-select: none; | ||
} | ||
|
||
.mwc-loading-bar { | ||
position: absolute; | ||
left: 0; | ||
top: 0; | ||
width: 100%; | ||
height: 100%; | ||
z-index: 999; | ||
background-color: white; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.mwc-loading-bar span { | ||
margin-top: 10px; | ||
color: #535251; | ||
} | ||
|
||
.loader { | ||
width: 50px; | ||
aspect-ratio: 1; | ||
border-radius: 50%; | ||
border: 8px solid #d9d9d9; | ||
border-right-color: #535251; | ||
animation: l2 1s infinite linear; | ||
} | ||
|
||
@keyframes l2 {to{transform: rotate(1turn)}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,160 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
<title>Mobile Web Capture - Capture Single Page and Then Crop</title> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.css"> | ||
<link rel="stylesheet" href="./index.css"> | ||
</head> | ||
<body> | ||
<div id="container"></div> | ||
<div id="imageContainer"> | ||
<div id="restore">Restore</div> | ||
<span>Normalized Image:</span> | ||
<img id="normalized"> | ||
</div> | ||
</body> | ||
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-core@3.2.10/dist/core.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-license@3.2.10/dist/license.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-normalizer@2.2.10/dist/ddn.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-capture-vision-router@2.2.10/dist/cvr.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-document-viewer@2.0.0/dist/ddv.js"></script> | ||
<script> | ||
if(location.protocol === "file:") { | ||
const message = `Please open the page via https:// or host it on "http://localhost/".`; | ||
console.warn(message); | ||
alert(message); | ||
}; | ||
</script> | ||
<script type="module"> | ||
import { | ||
isMobile, | ||
initDocDetectModule, | ||
startLoading, | ||
updateLoadingText, | ||
stopLoading | ||
} from "./utils.js"; | ||
import { mobilePerspectiveUiConfig, pcPerspectiveUiConfig } from "./uiConfig.js"; | ||
// Writing style of 'Top-level await' to be compatible with older versions of browsers | ||
(async () => { | ||
startLoading("Waiting for authorization..."); | ||
// Preload DDV Resource | ||
Dynamsoft.DDV.Core.loadWasm(); | ||
|
||
/** LICENSE ALERT - README | ||
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below. | ||
*/ | ||
|
||
// Initialize DDN license | ||
await Dynamsoft.License.LicenseManager.initLicense( | ||
"DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLXIxNzAzODM5ODkwIiwibWFpblNlcnZlclVSTCI6Imh0dHBzOi8vbWx0cy5keW5hbXNvZnQuY29tLyIsIm9yZ2FuaXphdGlvbklEIjoiMjAwMDAwIiwic3RhbmRieVNlcnZlclVSTCI6Imh0dHBzOi8vc2x0cy5keW5hbXNvZnQuY29tLyIsImNoZWNrQ29kZSI6MTgyNTQ5Njk4NH0=", | ||
true | ||
); | ||
|
||
/** | ||
* You can visit https://www.dynamsoft.com/customer/license/trialLicense/?product=mwc to get your own trial license good for 30 days. | ||
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license. | ||
* For more information, see https://www.dynamsoft.com/mobile-web-capture/docs/gettingstarted/license.html or contact support@dynamsoft.com. | ||
* LICENSE ALERT - THE END | ||
*/ | ||
|
||
updateLoadingText("Loading DDV library..."); | ||
// Preload DDN Resource | ||
Dynamsoft.Core.CoreModule.loadWasm(["DDN"]); | ||
|
||
// Initialize DDV | ||
await Dynamsoft.DDV.Core.init(); | ||
|
||
updateLoadingText("Loading DDN library..."); | ||
// Configure document boundaries function | ||
await initDocDetectModule(Dynamsoft.DDV, Dynamsoft.CVR); | ||
stopLoading(); | ||
|
||
//Create a capture viewer | ||
const captureViewer = new Dynamsoft.DDV.CaptureViewer({ | ||
container: "container", | ||
viewerConfig: { | ||
acceptedPolygonConfidence: 60, | ||
enableAutoDetect: true, | ||
} | ||
}); | ||
|
||
// Play video stream in 1080P | ||
captureViewer.play({ | ||
resolution: [1920,1080], | ||
}).catch(err => { | ||
alert(err.message) | ||
}); | ||
|
||
// Register captured event | ||
captureViewer.on("captured", () => { | ||
switchViewer(false, true); | ||
}); | ||
|
||
// Create a perspective viewer | ||
const perspectiveViewer = new Dynamsoft.DDV.PerspectiveViewer({ | ||
container: "container", | ||
groupUid: captureViewer.groupUid, | ||
uiConfig: isMobile()? mobilePerspectiveUiConfig : pcPerspectiveUiConfig, | ||
viewerConfig:{ | ||
scrollToLatest: true, | ||
} | ||
}); | ||
perspectiveViewer.hide(); | ||
|
||
// Register the event for "PerspectiveAll" button to display the result image | ||
perspectiveViewer.on("done", async () => { | ||
switchViewer(false, false); | ||
document.getElementById("container").style.display = "none"; | ||
|
||
const pageUid = perspectiveViewer.getCurrentPageUid(); | ||
const pageData = await captureViewer.currentDocument.getPageData(pageUid); | ||
// Normalized image | ||
document.getElementById("normalized").src = URL.createObjectURL(pageData.display.data); | ||
}); | ||
|
||
// Register the event for "Back" button | ||
perspectiveViewer.on("backToCaptureViewer", () => { | ||
switchViewer(true, false); | ||
perspectiveViewer.currentDocument.deleteAllPages(); | ||
}); | ||
|
||
// Register the event for "DeleteCurrent" & "DeletedAll" buttons | ||
perspectiveViewer.on("noImageBack", () => { | ||
// Determine if there are no images in the viewer | ||
const count = perspectiveViewer.currentDocument.pages.length; | ||
|
||
if(count === 0) { | ||
switchViewer(true,false); | ||
} | ||
}); | ||
|
||
// Define a function to control the viewers' visibility. | ||
function switchViewer(capture, perspective){ | ||
if(capture) { | ||
captureViewer.show(); | ||
captureViewer.play().catch(err => {alert(err)}); | ||
} else { | ||
captureViewer.hide(); | ||
captureViewer.stop(); | ||
} | ||
|
||
if(perspective) { | ||
perspectiveViewer.show(); | ||
} else { | ||
perspectiveViewer.hide(); | ||
} | ||
}; | ||
|
||
// Restore Button function | ||
document.getElementById("restore").onclick = () => { | ||
perspectiveViewer.currentDocument.deleteAllPages(); | ||
|
||
document.getElementById("container").style.display = ""; | ||
switchViewer(true, false); | ||
}; | ||
})(); | ||
</script> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,117 @@ | ||
//Mobile PerspectiveViewer | ||
export const mobilePerspectiveUiConfig = { | ||
type: Dynamsoft.DDV.Elements.Layout, | ||
flexDirection: "column", | ||
children: [ | ||
{ | ||
type: Dynamsoft.DDV.Elements.Layout, | ||
className: "ddv-perspective-viewer-header-mobile", | ||
children: [ | ||
{ | ||
// Add a "Back" button in perspective viewer's header and bind the event. | ||
// The event will be registered later. | ||
type: Dynamsoft.DDV.Elements.Button, | ||
className: "ddv-button-back", | ||
events:{ | ||
click: "backToCaptureViewer" | ||
} | ||
}, | ||
Dynamsoft.DDV.Elements.Pagination, | ||
{ | ||
// Bind event for "PerspectiveAll" button | ||
// The event will be registered later. | ||
type: Dynamsoft.DDV.Elements.PerspectiveAll, | ||
events:{ | ||
click: "done" | ||
} | ||
}, | ||
], | ||
}, | ||
Dynamsoft.DDV.Elements.MainView, | ||
{ | ||
type: Dynamsoft.DDV.Elements.Layout, | ||
className: "ddv-perspective-viewer-footer-mobile", | ||
children: [ | ||
Dynamsoft.DDV.Elements.FullQuad, | ||
Dynamsoft.DDV.Elements.RotateLeft, | ||
Dynamsoft.DDV.Elements.RotateRight, | ||
{ | ||
// Bind event for "DeleteCurrent" button | ||
// The event will be registered later. | ||
type: Dynamsoft.DDV.Elements.DeleteCurrent, | ||
events: { | ||
click: "noImageBack" | ||
}, | ||
}, | ||
{ | ||
// Bind event for "DeleteAll" button | ||
// The event will be registered later. | ||
type:Dynamsoft.DDV.Elements.DeleteAll, | ||
events: { | ||
click: "noImageBack" | ||
}, | ||
} | ||
], | ||
}, | ||
], | ||
}; | ||
|
||
//Pc PerspectiveViewer | ||
export const pcPerspectiveUiConfig = { | ||
type: Dynamsoft.DDV.Elements.Layout, | ||
flexDirection: "column", | ||
children: [ | ||
{ | ||
type: Dynamsoft.DDV.Elements.Layout, | ||
className: "ddv-perspective-viewer-header-desktop", | ||
children: [ | ||
{ | ||
// Add a "Back" button in perspective viewer's header and bind the event. | ||
// The event will be registered later. | ||
type: Dynamsoft.DDV.Elements.Button, | ||
className: "ddv-button-back", | ||
style: { | ||
position: "absolute", | ||
left: "0px", | ||
}, | ||
events:{ | ||
click: "backToCaptureViewer" | ||
} | ||
}, | ||
Dynamsoft.DDV.Elements.FullQuad, | ||
Dynamsoft.DDV.Elements.RotateLeft, | ||
Dynamsoft.DDV.Elements.RotateRight, | ||
{ | ||
// Bind event for "DeleteCurrent" button | ||
// The event will be registered later. | ||
type: Dynamsoft.DDV.Elements.DeleteCurrent, | ||
events: { | ||
click: "noImageBack" | ||
}, | ||
}, | ||
{ | ||
// Bind event for "DeleteAll" button | ||
// The event will be registered later. | ||
type:Dynamsoft.DDV.Elements.DeleteAll, | ||
events: { | ||
click: "noImageBack" | ||
}, | ||
}, | ||
{ | ||
type: Dynamsoft.DDV.Elements.Pagination, | ||
className: "ddv-perspective-viewer-pagination-desktop", | ||
}, | ||
{ | ||
// Bind event for "PerspectiveAll" button | ||
// The event will be registered later. | ||
type: Dynamsoft.DDV.Elements.PerspectiveAll, | ||
className: "ddv-perspective-viewer-perspective-desktop", | ||
events:{ | ||
click: "done" | ||
} | ||
}, | ||
], | ||
}, | ||
Dynamsoft.DDV.Elements.MainView, | ||
], | ||
}; |
Oops, something went wrong.