美文网首页
文件系统API操作示例

文件系统API操作示例

作者: 天一呀 | 来源:发表于2020-05-22 14:05 被阅读0次

    最近有个需求是:自动抓取某网站登录页面的验证码图片并保存,抓取n次。使用chrome插件来实现,其中使用到了js操作文件系统的api,特将代码记录下来,以备查阅。

    PS:第一次使用js文件系统的api,百度了很久很多文章,大部分文章都很详细的解释介绍了api具体某个对象、方法的使用,但是很少有全部代码从零到功能实现的全部代码贴出,导致我这个新手一头雾水,甚至在文件保存完后,去哪里看保存的文件这个问题上都折腾了一两个小时。正是这些所谓的基础的东西反而因为没有人介绍导致很多无用功。此处贴出全部的代码,希望少走弯路。

    以下是chrome插件的content.js的全部代码:

    $(function() {
        if (window.location.href.indexOf('www.***.com/logout.action') != -1 || window.location.href.indexOf('www.***.com/logon.action') != -1) { //登录页,示例隐藏了真实地址,避免不必要的纠纷
            saveImg();
        }
    });
    /**
     * 保存图片的方法
     */
    function saveImg() {
        var count = 0;
        var max = 100; //修改max的值定义需要抓图的张数
        var intev = setInterval(function() {
            window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
            window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, initFS, errorHandler); //申请文件系统,将initFS方法作为文件处理的方法,方法回调时会见文件系统对象fs作为参数传入
            count++;
            if (count > max) { //抓够张数后停止
                clearInterval(intev);
            }
        }, 5000); //每5秒刷新一张图
    }
    /**
     * 点击验证码,刷新验证码并返回验证码的值,该网站使用的本地js生成的验证码,验证逻辑也是在本地js中完成,插件为gVerify.js
     */
    function refreshImg() {
        var img = $('#verifyCanvas');
        $(img).click();
        //因为chrome插件和原网页的js运行环境不能相互访问(但插件js可以访问员网页的dom),使用向原网页插入script并在script中执行“将原网页js环境的变量绑定到页面dom节点后再访问”的办法获取值。
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.innerHTML = "document.body.setAttribute('code', verifyCode.options.code);";
        document.head.appendChild(script);
        document.head.removeChild(script);
        var code = document.body.getAttribute('code');
        console.log(code);
        return code;
    }
    /**
     *文件处理方法,注意文件系统不同于操作系统的本地文件系统,只是浏览器运行环境中的一个虚拟的沙箱中的文件系统。在本地文件系统中无法搜索、查看到文件,查看文件的办法:浏览器输入地址查看(中间是网站的域名,每个网站的文件系统相互独立)filesystem:https://www.***.com/temporary/
     */
    function initFS(fs) {
        createDir(fs.root, '/img/'.split('/')); //创建目录
        var img_code = refreshImg();
        //写文件
        fs.root.getFile('/img/' + img_code + '.png', { create: true, exclusive: true }, function(fileEntry) {
            fileEntry.createWriter(function(fileWriter) {
                fileWriter.onwriteend = function(e) {
                    console.log("Write successfully");
                };
                fileWriter.onerror = function(e) {
                    console.log("Write error!");
                };
                var img_base64_url = $('#verifyCanvas')[0].toDataURL('image/png'); //获取图谱的base64地址
                var content = base64ToBinary(img_base64_url);
                var bob = new Blob([content]);
                fileWriter.write(bob); //查看文件地址:浏览器输入filesystem:https://www.yqt365.com/temporary/
            });
        }, errorHandler);
    }
    /**
     *异常处理
     */
    function errorHandler(err) {
        var msg = 'An error occured: ';
    
        switch (err.code) {
            case FileError.NOT_FOUND_ERR:
                msg += 'File or directory not found';
                break;
    
            case FileError.NOT_READABLE_ERR:
                msg += 'File or directory not readable';
                break;
    
            case FileError.PATH_EXISTS_ERR:
                msg += 'File or directory already exists';
                break;
    
            case FileError.TYPE_MISMATCH_ERR:
                msg += 'Invalid filetype';
                break;
    
            default:
                msg += 'Unknown Error';
                break;
        };
    
        console.log(msg);
    };
    /**
     *创建目录
     */
    function createDir(rootDir, folders) {
        rootDir.getDirectory(folders[0], { create: true }, function(dirEntry) {
            if (folders.length) {
                createDir(dirEntry, folders.slice(1));
            }
        }, errorHandler);
    };
    /**
     * 看方法名称都懂啦
     */
    function base64ToBinary(imgUrl) {
        var BASE64_MARKER = ';base64,';
        var base64Index = imgUrl.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
        var base64 = imgUrl.substring(base64Index);
        var raw = window.atob(base64);
        var rawLength = raw.length;
        var array = new Uint8Array(new ArrayBuffer(rawLength));
    
        for (i = 0; i < rawLength; ++i) {
            array[i] = raw.charCodeAt(i);
        }
        return array;
    }

    相关文章

      网友评论

          本文标题:文件系统API操作示例

          本文链接:https://www.haomeiwen.com/subject/ykyqahtx.html