使用动态 WebTwain Cab 文件从本地文件夹上传文件答案

【问题标题】：Upload files from Local Folder using Dynamic WebTwain Cab file使用动态 WebTwain Cab 文件从本地文件夹上传文件
【发布时间】：2021-09-12 06:31:27
【问题描述】：

我对 Dynamic WebTwain 非常陌生，因此如果我要求一些基本的东西，请提前道歉。

我目前在我的 Dynamic WebTwain 中提供了扫描功能，但我还需要实现上传功能。为此，我需要使用 ActiveX 对象和 DynamicTwain Cab 文件。我正在阅读 WebTwain 的文档，但它们没有使用 ActiveX 或 Cab 文件。

目前，我正在使用以下方法进行上传，

DWObject.LoadImageEx("",1);

但是，我不想在 Dynamosoft 的指定图像查看器中上传图像。我想在自定义图像查看器中上传图像。为此，我假设我需要获取所选图像的对象才能将其加载到自定义图像查看器中。我该怎么做？

寻求指导。

【问题讨论】：

标签： javascript file-upload local scanning dynamic-web-twain

【解决方案1】：

LoadImageEx 方法用于将本地图像加载到 Dynamic Web TWAIN 图像查看器，而不是用于上传图像。要将图像加载到自定义查看器，您只需使用 input element 和 FileReader。

例如：

<!DOCTYPE html>
<html>

<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="file" name="document" id="document" accept="image/*">
    <div id='customviewer'></div>
    <script>
        var input = document.querySelector('input[type=file]');
        input.onchange = function () {
            var file = input.files[0];
            var fileReader = new FileReader();
            fileReader.onload = function (e) {
                var dataURL = e.target.result, img = new Image();
                img.src = dataURL;
                $("#customviewer").append(img);
            }
            fileReader.readAsDataURL(file);
        }
    </script>
</body>

</html>

使用 LoadImageEx：

<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="https://unpkg.com/dwt@17.1.1/dist/dynamsoft.webtwain.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input class="button" type="button" value="Load Images" onclick="loadFile()" />
    <div id='customviewer'></div>

    <script type="text/javascript">
        var element = document.createElement('div');
        var dwtObj = null;

        Dynamsoft.DWT.CreateDWTObjectEx({
            WebTwainId: '1'
        },
            function (obj) {
                dwtObj = obj;
                dwtObj.Viewer.bind(element);
            },
            function (err) {
                console.log(err);
            }
        );

        function loadFile() {
            if (dwtObj) {
                dwtObj.LoadImageEx('', 5,
                    function () {
                        dwtObj.ConvertToBlob(
                            [dwtObj.CurrentImageIndexInBuffer],
                            Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,
                            function (result, indices, type) {
                                var urlCreator = window.URL || window.webkitURL;
                                var dataURL = urlCreator.createObjectURL(result);
                                var img = new Image();
                                img.src = dataURL;
                                $("#customviewer").append(img);
                            },
                            function (errorCode, errorString) {
                            }
                        );
                    },
                    function (errCode, error) {
                    }
                );
            }
        }
    </script>
</body>

</html>

【讨论】：

我只需要从本地文件夹加载文件。页面上有一个 td 元素。扫描预览显示在这个 td 元素中。我也希望使用 WebTwain 来加载图像
@FaranSaleem 您的扫描预览是自定义图像查看器还是由 Dynamic Web TWAIN 初始化？
嗨@yushulx。在自定义图像查看器中。正如我告诉你的，我的扫描图像加载的页面上有 td 元素
@FaranSaleem 所以您想获取 Dynamic Web TWAIN 保存的内存数据并将其加载到您的自定义视图中？
是的，我的意思是我想从本地工作站加载图像，然后在自定义查看器中显示它