文档章节

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

yushulx
 yushulx
发布于 2018/12/29 16:40
字数 549
阅读 35
收藏 3

文档电子化是大势所趋,配合云存储可以给用户提供完美的解决方案。这篇文章分享下如何通过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:

阿里云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);

    }

}

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

Web文档扫描

在阿里云OSS的文件管理中可以看到上传的文件:

阿里云文件上传

参考文档

源码

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

© 著作权归作者所有

yushulx
粉丝 29
博文 109
码字总数 61815
作品 0
杭州
私信 提问
如何使用云存储来存取及优化图片资源

在日常开发中,不免会遇到需要实现图片上传与展示的需求。比如一个文章发布系统,我们通常会开发图片上传功能,让用户可以为自己的文章提供配图;而且图片上传后,还需要生成不同尺寸的缩略图...

一斤代码
2018/09/05
0
0
整合百度UEditor上传图片到阿里云OSS

前言 将图片上传到阿里云OSS是一种趋势,一个必然。当你的项目图片过多,需要频繁上传和替换的时候,用阿里云OSS可以很方便的管理你的图片,节省服务器空间,大大提高了效率。阿里云OSS是阿里...

zacklee
2017/09/17
0
0
混合云存储跨云灾备方案之跨云复制

前文介绍了混合云备份是如何跨云备份和恢复云主机中的目录与文件。假如用户对于数据保护的实时性有要求,比如一个公司内,大家通过一个共享目录来集中存储一些文档,希望这些文档能够在非常短...

justin_wu_bo
2018/08/16
0
0
使用Data Lake Analytics + OSS分析CSV格式的TPC-H数据集

Data Lake Analytics(DLA)简介 关于Data Lake的概念,更多阅读可以参考: https://en.wikipedia.org/wiki/Data_lake 以及AWS和Azure关于Data Lake的解读: https://amazonaws-china.com/bi......

迷你芊宝宝
03/11
4
0
pumelo/WebHeadPicker

#WebHeadPicker #Web头像拾取器插件 在网上找了一段时间,总的来说,cropper比较好。本项目基于cropper,以及一些互联网资源。 您是否应该使用本项目?如果您需要把头像直接上传到阿里云OSS...

pumelo
2017/05/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
24分钟前
3
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
25分钟前
3
0
HTML5+CSS3从入门到精通 中文pdf版​

本文转载于:专业的前端网站➵HTML5+CSS3从入门到精通 中文pdf版 HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指...

前端老手
28分钟前
3
0
聊聊nacos client的ConfigFilterChainManager

序 本文主要研究一下nacos client的ConfigFilterChainManager IConfigFilterChain nacos-1.1.3/api/src/main/java/com/alibaba/nacos/api/config/filter/IConfigFilterChain.java public in......

go4it
34分钟前
4
0
《可复制的领导力:樊登的9堂商业课》读后感

初次接触樊登是在抖音上看他讲企业管理各种道理,讲得头头是道大部分还是认同的,也有一些初次听到的观点,初次印章樊登是有干货的 樊登这本《可复制的领导力:樊登的9堂商业课》是在亚马逊上...

lingch
41分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部