• js 文件系统API操作示例


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

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

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

      1 $(function(){
      2     if(window.location.href.indexOf('www.***.com/logout.action')!=-1 || window.location.href.indexOf('www.***.com/logon.action')!=-1){//登录页,示例隐藏了真实地址,避免不必要的纠纷
      3         saveImg();
      4     }
      5 });
      6 /**
      7 * 保存图片的方法
      8 */
      9 function saveImg(){
     10     var count = 0;
     11     var max = 100;//修改max的值定义需要抓图的张数
     12     var intev = setInterval(function(){
     13             window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
     14             window.requestFileSystem(window.TEMPORARY, 5*1024*1024, initFS, errorHandler);//申请文件系统,将initFS方法作为文件处理的方法,方法回调时会见文件系统对象fs作为参数传入
     15             count ++;
     16             if(count > max){//抓够张数后停止
     17                 clearInterval(intev);
     18             }
     19         },5000);//每5秒刷新一张图
     20 }
     21 /**
     22 * 点击验证码,刷新验证码并返回验证码的值,该网站使用的本地js生成的验证码,验证逻辑也是在本地js中完成,插件为gVerify.js
     23 */
     24 function refreshImg(){
     25     var img = $('#verifyCanvas');
     26     $(img).click();
     27         //因为chrome插件和原网页的js运行环境不能相互访问(但插件js可以访问员网页的dom),使用向原网页插入script并在script中执行“将原网页js环境的变量绑定到页面dom节点后再访问”的办法获取值。
     28     var script = document.createElement('script');
     29         script.type = 'text/javascript';
     30         script.innerHTML = "document.body.setAttribute('code', verifyCode.options.code);";
     31         document.head.appendChild(script);
     32         document.head.removeChild(script);
     33         var code = document.body.getAttribute('code');
     34         console.log(code);
     35         return code;
     36 }
     37 /**
     38 *文件处理方法,注意文件系统不同于操作系统的本地文件系统,只是浏览器运行环境中的一个虚拟的沙箱中的文件系统。在本地文件系统中无法搜索、查看到文件,查看文件的办法:浏览器输入地址查看(中间是网站的域名,每个网站的文件系统相互独立)filesystem:https://www.***.com/temporary/
     39 */
     40 function initFS(fs){
     41     createDir(fs.root, '/img/'.split('/'));//创建目录
     42     var img_code = refreshImg();
     43         //写文件
     44     fs.root.getFile('/img/'+img_code + '.png', {create: true, exclusive: true}, function(fileEntry) {
     45         fileEntry.createWriter(function(fileWriter) {
     46             fileWriter.onwriteend = function(e) {
     47               console.log("Write successfully");
     48             };
     49             fileWriter.onerror = function(e) {
     50               console.log("Write error!");
     51             };
     52             var img_base64_url = $('#verifyCanvas')[0].toDataURL('image/png');//获取图谱的base64地址
     53             var content = base64ToBinary(img_base64_url);
     54             var bob = new Blob([content]);
     55             fileWriter.write(bob);//查看文件地址:浏览器输入filesystem:https://www.yqt365.com/temporary/
     56         });
     57     }, errorHandler);
     58 }
     59 /**
     60 *异常处理
     61 */
     62 function errorHandler(err){
     63  var msg = 'An error occured: ';
     64 
     65   switch (err.code) {
     66     case FileError.NOT_FOUND_ERR:
     67       msg += 'File or directory not found';
     68       break;
     69 
     70     case FileError.NOT_READABLE_ERR:
     71       msg += 'File or directory not readable';
     72       break;
     73 
     74     case FileError.PATH_EXISTS_ERR:
     75       msg += 'File or directory already exists';
     76       break;
     77 
     78     case FileError.TYPE_MISMATCH_ERR:
     79       msg += 'Invalid filetype';
     80       break;
     81 
     82     default:
     83       msg += 'Unknown Error';
     84       break;
     85   };
     86 
     87  console.log(msg);
     88 }; 
     89 /**
     90 *创建目录
     91 */
     92 function createDir(rootDir, folders) {
     93   rootDir.getDirectory(folders[0], {create: true}, function(dirEntry) {
     94     if (folders.length) {
     95       createDir(dirEntry, folders.slice(1));
     96     }
     97   }, errorHandler);
     98 };
     99 /**
    100 * 看方法名称都懂啦
    101 */
    102 function base64ToBinary(imgUrl) {
    103   var BASE64_MARKER = ';base64,';
    104   var base64Index = imgUrl.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
    105   var base64 = imgUrl.substring(base64Index);
    106   var raw = window.atob(base64);
    107   var rawLength = raw.length;
    108   var array = new Uint8Array(new ArrayBuffer(rawLength));
    109 
    110   for (i = 0; i < rawLength; ++i) {
    111     array[i] = raw.charCodeAt(i);
    112   }
    113   return array;
    114 }
    115 
    116         
  • 相关阅读:
    C语言静态库与动态库(Windows下测试)
    gcc编译过程
    IFC2x3标准阅读
    ES6学习笔记(二十二)ArrayBuffer
    tensorflow学习笔记(一)安装
    ES6学习笔记(二十一)编程风格
    ES6学习笔记(二十)Module 的加载实现
    ES6学习笔记(十九)Module 的语法-export和import
    ES6学习笔记(十七)Class 的基本语法
    4、配置文件Json(未解决开通云开发)
  • 原文地址:https://www.cnblogs.com/parker-yu/p/9120892.html
Copyright © 2020-2023  润新知