如何通过Web扫描文档并上传到阿里云OSS

文档电子化是大势所趋，配合云存储可以给用户提供完美的解决方案。这篇文章分享下如何通过Web快速扫描文档，并上传到阿里云中。

Web文档扫描

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

申请一个30天的试用License。

创建一个简单的Hello World:

<!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。这样就完成了一个扫描应用。接下来要加上阿里云的接口做上传。

阿里云文件上传

阿里云的接口也是非常方便简单的，不过调用接口之前要先做一些配置。

创建AccessKey。

在OSS中创建bucket:

点击你的bucket，找到基础设置 > 跨域设置：

创建跨域规则。如果你不做这个设置，上传文件会失败：

在刚才的代码中加入一个新的上传按钮，并加入相应的代码：

<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);

    }

}

程序完成。把它部署到服务器上就可以玩了。