JavaFx项目扫描功能，Windows系统扫描仪扫描图片，Scanner.js实现

最新推荐文章于 2022-12-05 03:50:10 发布

小言W

最新推荐文章于 2022-12-05 03:50:10 发布

阅读量1.6k

点赞数 1

分类专栏： Java扫描文章标签： JavaFx 扫描 Scanner.js Windows

本文链接：https://blog.csdn.net/qq_28680277/article/details/97629492

版权

Java扫描专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现要点：
1.Java中调用js函数
如：webEngine.executeScript(“myScan()”);

2.js中调用java函数
如：“app.saveScannedImage(elementImgs.toString());”

3.JavaFx项目中加载html和js是使用的WebView
4.jar包需要导入项目，下载的scannerjs.zip中有，下载地址见下文第一个网站链接。

fxml文件中：

<WebView managed="false" visible="false" fx:id="browser" layoutX="75.0" layoutY="30.0" />
<Button style="-fx-background-color: none;-fx-border-width: 0;-fx-pref-width: 24.0;-fx-pref-height: 24.0;" fx:id="sm" disable="false" layoutX="75.0" layoutY="30.0" onAction="#testFun" onKeyPressed="#spaceNot" prefHeight="24.0" prefWidth="24.0">
    <graphic>
        <ImageView>
            <Image url="@../../images/more/two302.png" />
        </ImageView>
    </graphic>
    <tooltip><Tooltip text="扫描-快捷键:F1" /></tooltip>
</Button>

java文件中：

	@FXML
    public WebView browser;
    public WebEngine webEngine;
    public class JavaApp {
        /**
         * 将scannerjs调用扫描返回的结果整理成List<BufferedImage>
         * @param scannedImages
         * @return
         */
        public List<BufferedImage> getImg(Object scannedImages) {
            List<BufferedImage> listFiles = new ArrayList<>();

        String result = scannedImages.toString();
        if ("Failed".equals(result)) {
            log.info("扫描失败！");
        } else if ("User cancelled".equals(result)) {
            log.info("扫描取消！");
        } else {
            List<String> list = Arrays.asList(result.split(","));
            for (String imgStr:list) {
                listFiles.add(FileUtil.base64StringToImg(imgStr));
            }
        }
        return listFiles;
    }

    /**
     * js函数中调用Java方法——保存扫描到的图片
     * @param scannedImages
     */
    public void saveScannedImage(Object scannedImages){
        List<BufferedImage> listFiles = getImg(scannedImages);
        save2Local2(listFiles);
    }
}
JavaApp app = new JavaApp();

/**
 * 初始化方法
 * @param location
 * @param resources
 */
@Override
public void initialize(URL location, ResourceBundle resources) {
    webEngine = browser.getEngine();
    webEngine.getLoadWorker().stateProperty().addListener((ov, oldState, newState) -> {
        if (newState == State.SUCCEEDED) {
            // 获取js对象
            JSObject win = (JSObject) webEngine.executeScript("window");
            // 然后把应用程序对象设置成为js对象
            win.setMember("app", app);
        } else if (newState == State.FAILED){

        } else{

        }
    });
    webEngine.load(Main.class.getResource("/scannerjs/demo-01-scan-display-jpg.htm").toExternalForm());

    /**
     * 监听console.log输出的日志
     */
    com.sun.javafx.webkit.WebConsoleListener.setDefaultListener((webView, message, lineNumber, sourceId) -> {
        System.out.println("来自webview: " + message + " 【" + sourceId + " - " + lineNumber + "】");
    });
}

/**
 * 扫描
 */
@FXML
public void testFun(){
    webEngine.executeScript("myScan()");
}

/scannerjs下的文件是从官网下载的，只是“demo-01-scan-display-jpg.htm”中的js略作改动：
在这里插入图片描述

其中css和js的下载地址是：http://asprise.com/document-scan-upload-image-browser/html-web-scanner-download.html
在这里插入图片描述
其中htm的下载地址是：https://github.com/Asprise/scannerjs.javascript-scanner-access-in-browsers-chrome-ie.scanner.js

“demo-01-scan-display-jpg.htm”中改动的js为：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scanner.js demo: Scan as JPEG and display on the web page</title>
    <meta charset='utf-8'>
    <script src="./scanner.js" type="text/javascript"></script>

<script>
    function myScan() {
        scanner.scan(returnScannedImages,
            {
                "output_settings": [
                    {
                        "type": "return-base64",
                        "format": "jpg"
                    }
                ]
            }
        );
    }
    function returnScannedImages(successful, mesg, response) {
        if(!successful) {
            app.saveScannedImage('Failed');
            return;
        }

        if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) {
            app.saveScannedImage('User cancelled');
            return;
        }

        // returns an array of ScannedImage
        var scannedImages = scanner.getScannedImages(response, true, false);

        var elementImgs = new Array();
        for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
            elementImgs.push(scannedImages[i].src.replace("data:image/jpeg;base64,", ""));
        }
        app.saveScannedImage(elementImgs.toString());
    }

    //
    // Please read scanner.js developer's guide at: http://asprise.com/document-scan-upload-image-browser/ie-chrome-firefox-scanner-docs.html
    //

    /** Initiates a scan */
    function scanToJpg() {
        scanner.scan(displayImagesOnPage,
            {
                "output_settings": [
                    {
                        "type": "return-base64",
                        "format": "jpg"
                    }
                ]
            }
        );
    }

    /** Processes the scan result */
    function displayImagesOnPage(successful, mesg, response) {
        if(!successful) { // On error
            console.error('Failed: ' + mesg);
            return;
        }

        if(successful && mesg != null && mesg.toLowerCase().indexOf('user cancel') >= 0) { // User cancelled.
            console.info('User cancelled');
            return;
        }

        var scannedImages = scanner.getScannedImages(response, true, false); // returns an array of ScannedImage
        for(var i = 0; (scannedImages instanceof Array) && i < scannedImages.length; i++) {
            var scannedImage = scannedImages[i];
            processScannedImage(scannedImage);
        }
    }

    /** Images scanned so far. */
    var imagesScanned = [];

    /** Processes a ScannedImage */
    function processScannedImage(scannedImage) {
        imagesScanned.push(scannedImage);
        var elementImg = scanner.createDomElementFromModel( {
            'name': 'img',
            'attributes': {
                'class': 'scanned',
                'src': scannedImage.src
            }
        });
        document.getElementById('images').appendChild(elementImg);
    }

</script>

<style>
    img.scanned {
        height: 200px; /** Sets the display size */
        margin-right: 12px;
    }

    div#images {
        margin-top: 20px;
    }
</style>
</head>
<body>

<h2>Scanner.js: scan as JPG and display on the web page</h2>

<button type="button" onclick="scanToJpg();">Scan</button>

<div id="images"></div>


<!-- HELP_LINKS_START help links at the bottom -->
<style>
    .asprise-footer, .asprise-footer a:visited { font-family: Arial, Helvetica, sans-serif; color: #999; font-size: 13px; }
    .asprise-footer a {  text-decoration: none; color: #999; }
    .asprise-footer a:hover {  padding-bottom: 2px; border-bottom: solid 1px #9cd; color: #06c; }
</style>
<div class="asprise-footer" style="margin-top: 48px;">
    <a href="http://asprise.com/document-scan-upload-image-browser/direct-to-server-php-asp.net-overview.html" target="_blank" title="Opens in new tab">Scanner.js Homepage</a> |
    <a href="http://asprise.com/scan/scannerjs/docs/html/scannerjs-javascript-guide.html" target="_blank" title="Opens in new tab">Developer's Guide to ScannerJs</a> |
    <a href="https://github.com/Asprise/scannerjs.javascript-scanner-access-in-browsers-chrome-ie.scanner.js" target="_blank" title="Opens in new tab">Sample code on Github</a>
</div>
<!-- HELP_LINKS_END -->
</body>
</html>

如果没有scan-setup.exe（http://cdn.asprise.com/scanapp/scan-setup.exe）驱动，需要下载。
在这里插入图片描述

小言W

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
5
评论
JavaFx项目扫描功能，Windows系统扫描仪扫描图片，Scanner.js实现

实现要点：1.Java中调用js函数如：webEngine.executeScript(“myScan()”);2.js中调用java函数如：“app.saveScannedImage(elementImgs.toString());”fxml文件中：<WebView managed="false" visible="false" fx:id="browser" layoutX=...
复制链接

扫一扫