Dynamic Web TWAIN을 Polymer Shadow DOM과 함께 사용하는 방법
16738 단어 twainpolymerjavascriptdocument
동적 웹 TWAIN 빠른 시작
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.initiate.js"></script>
<script type="text/javascript" src="Resources/dynamsoft.webtwain.config.js"></script>
</head>
<body>
<div id="dwtcontrolContainer" ></div>
<input type="button" value="Scan" onclick="AcquireImage();" />
<script type="text/javascript">
Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
function AcquireImage() {
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
if (DWObject) {
DWObject.SelectSource(function () {
var OnAcquireImageSuccess = OnAcquireImageFailure = function () {
DWObject.CloseSource();
};
DWObject.OpenSource();
DWObject.IfDisableSourceAfterAcquire = true;
DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
}, function () {
console.log('SelectSource failed!');
});
}
}
</script>
</body>
</html>
이러한 몇 가지 단계를 거치면 간단한 웹 문서 관리 앱이 완성됩니다. 웹 서버가 없으면 HTML 파일을 두 번 클릭하여 웹 문서 스캐너 앱을 즉시 실행할 수 있습니다.
앱이 작동하려면 유효한 라이선스 키가 필요합니다. 30-day FREE Trial License을 받고 코드를 업데이트합니다.
Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
문서 스캔을 위한 폴리머 프로젝트
Polymer CLI를 설치합니다.
npm i -g polymer-cli
그런 다음 템플릿을 사용하여 Polymer 프로젝트를 초기화할 수 있습니다.
mkdir polymer-document-scan
cd polymer-document-scan
polymer init polymer-3-starter-kit
npm start
Dynamic Web TWAIN을 Polymer 프로젝트에 통합
이제 src/my-view.js의 HTML 템플릿에 Div 요소와 Button 요소를 추가하여 기본 UI를 수정해 보겠습니다.
class MyView1 extends PolymerElement {
static get template() {
return html`
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<div class="card">
<div id="dwtcontrolContainer"></div>
<button on-click="handleClick">scan</button>
</div>
`;
}
handleClick() {
if (DWObject) {
}
}
}
'Hello World' 샘플 코드를 사용하면 Dynamic Web TWAIN 개체를 초기화하지 못합니다.
var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
그 이유는 요소를 찾을 수 없기 때문입니다. 문제를 조사하려면 개발자 콘솔을 엽니다.
개발자 콘솔은 Div 요소가 Shadow DOM의 자식임을 보여줍니다. 다음은 Shadow DOM 요소를 가져오는 JS 코드입니다.
document.querySelector("body > my-app").shadowRoot.querySelector("app-drawer-layout > app-header-layout > iron-pages > my-view1").shadowRoot.querySelector("#dwtcontrolContainer")
당황하지 말 것. 코드는 다음과 같이 단순화할 수 있습니다.
this.shadowRoot.querySelector('#dwtcontrolContainer');
Dynamic Web TWAIN은 Shadow DOM을 지원하므로
bind() 메서드를 사용하여 Shadow DOM 요소로 Dynamic Web TWAIN 개체를 쉽게 초기화할 수 있습니다.ready() {
super.ready();
// TODO: initialization
this.initializeDWT();
}
initializeDWT() {
// Dynamsoft.WebTwainEnv.ProductKey = "LICENSE-KEY";
Dynamsoft.WebTwainEnv.CreateDWTObjectEx({ WebTwainId: 'Viewer' }, (obj) => {
this.dwtObj = obj;
obj.Viewer.bind(this.shadowRoot.querySelector('#dwtcontrolContainer'));
obj.Viewer.width = 560;
obj.Viewer.height = 600;
obj.Viewer.show();
var count = obj.SourceCount;
for (var i = 0; i < count; i++) {
this.shadowRoot.querySelector('#source').options.add(new Option(obj.GetSourceNameItems(i), i));
}
}, function (e) {
console.log(e)
});
}
문서 스캔을 트리거하기 위한 클릭 이벤트를 생성합니다.
handleClick() {
var obj = this.dwtObj;
if (obj) {
var onSuccess, onFailure;
onSuccess = onFailure = function () {
obj.CloseSource();
};
obj.SelectSourceByIndex(this.shadowRoot.querySelector('#source').selectedIndex);
obj.OpenSource();
obj.IfDisableSourceAfterAcquire = true;
obj.AcquireImage(onSuccess, onFailure);
}
}
마지막으로 Polymer에 구현된 웹 문서 스캔 앱이 성공적으로 작동할 수 있습니다.
소스 코드
https://github.com/yushulx/web-twain-document-scan
Reference
이 문제에 관하여(Dynamic Web TWAIN을 Polymer Shadow DOM과 함께 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yushulx/how-to-make-dynamic-web-twain-work-with-polymer-shadow-dom-53l0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
