如何經過Web掃描文檔並上傳到阿里雲OSS

時間 2019-11-11

標籤如何經過 web 掃描文檔上傳阿里 oss 欄目 HTML 简体版

原文原文鏈接

文檔電子化是大勢所趨，配合雲存儲能夠給用戶提供完美的解決方案。這篇文章分享下如何經過Web快速掃描文檔，並上傳到阿里雲中。javascript

Web文檔掃描

Dynamic Web TWAIN是目前最出色的Web文檔掃描SDK，支持Windows,Linux和macOS。html

申請一個30天的試用License。java

建立一個簡單的Hello World:git

<!DOCTYPE html>
<html>

<head>
    <title>Hello World</title>
    <script type="text/javascript" src="http://tst.dynamsoft.com/libs/dwt/14.3/dynamsoft.webtwain.min.js"> </script>
</head>

<body>
    <div id="dwtcontrolContainer"></div>
    <input type="button" value="Scan" onclick="scan()" />
    <script type="text/javascript">
        Dynamsoft.WebTwainEnv.ProductKey = '<Your DWT license>';
        function scan() {
            var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
            if (DWObject) {
                DWObject.SelectSource(function () {
                    var OnAcquireImageSuccess, OnAcquireImageFailure;
                    OnAcquireImageSuccess = OnAcquireImageFailure = function () {
                        DWObject.CloseSource();
                    };
                    DWObject.OpenSource();
                    DWObject.IfDisableSourceAfterAcquire = true;
                    DWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);
                }, function () {
                    console.log('SelectSource failed!');
                });
            }
        }
    </script>
</body>

</html>

記得要設置Dynamsoft.WebTwainEnv.ProductKey。這樣就完成了一個掃描應用。接下來要加上阿里雲的接口作上傳。web

阿里雲文件上傳

阿里雲的接口也是很是方便簡單的，不過調用接口以前要先作一些配置。跨域

建立AccessKey。服務器

在OSS中建立bucket:async

點擊你的bucket，找到基礎設置 > 跨域設置：ui

建立跨域規則。若是你不作這個設置，上傳文件會失敗：阿里雲

在剛纔的代碼中加入一個新的上傳按鈕，並加入相應的代碼：

<input type="button" value="Upload to Aliyun OSS" onclick="upload()" />
function asyncSuccessFunc(result) {
    let client = new OSS({
        accessKeyId: '<Your AccessKeyId>',
        accessKeySecret: '<Your AccessKeySecret>',
        bucket: 'Your bucket name',
        region: '<Your region>'
    });

    client.put('test.jpg', result).then(function (r1) {
        console.log('put success: %j', r1);
        return client.get('test.jpg');
    }).then(function (r2) {
        console.log('get success: %j', r2);
    }).catch(function (err) {
        console.error('error: %j', err);
    });
}

function asyncFailureFunc(errorCode, errorString) {
    alert("ErrorCode: " + errorCode + "\r" + "ErrorString:" + errorString);
}

function upload() {
    var DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');
    if (DWObject) {
        let currentIndex = DWObject.CapCurrentIndex;
        DWObject.ConvertToBlob([currentIndex], EnumDWT_ImageType.IT_JPG, asyncSuccessFunc,
            asyncFailureFunc);

    }

}

程序完成。把它部署到服務器上就能夠玩了。

在阿里雲OSS的文件管理中能夠看到上傳的文件：