如何经过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的文件管理中能够看到上传的文件：

参考文档

源码

https://gitee.com/yushulx/web-document-scan-aliyun-oss