hnk

// ==UserScript==
// @name        ebjhooker
// @description Grabs image data from the browser viewer to save locally. Still a bit buggy. Currently works when you click off one of the pages. Source has further comments.
// @namespace   ebjhooker
// @include     https://br.ebookjapan.jp/br/reader/viewer/view.html*
// @version     1
// @grant       none
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js
// ==/UserScript==

// If you're reading this, here's the usage tips
// Currently it requires you to manually flip through the manga in the browser reader and it will pop up to save the pair of pages you've just clicked off
// Be aware that it's the one you've just clicked away from, not the ones that just loaded.
// IE if you flip to page 4-5, it'll pop up to save 2 and 3.
// If you want to save the currently showing images (EG for the last pages), you can click in the middle - the way it usually brings up the reader menu.
// That will also trigger the save.
// This has to do with how the events are being handled, but it works fine as long as you don't forget that so whatever.


// more comments in source if you want to see the nuts and bolts and how I'm fucking everything up because I suck


this.$ = this.jQuery = jQuery.noConflict(true);

pad = function (n, width, z) {
  z = z || '0';
  n = n + '';
  return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

saveAs = function(uri, filename) {
  var link = document.createElement('a');
  if (typeof link.download === 'string') {
    link.href = uri;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

// wait for page to load
$(document).ready(function(){

  // Check to see if actually want to run the script
  if(!confirm("Try and dump pages?")) return false;

  //set up an array for the page numbers we've dumped
  var pages = [];
  var pagenumber = -1;  //cover has page number 0
  var pagedata = "";
  //set up an event to dump the current pages every time the mouse is clicked, because the canvases change without page reloads.
  //could possibly try and automate by triggering the mousedown/mouseup events through script (seems that they're not using click but mousedown/up)
  // Note that one of the divs changes when the mouse moves from left to right, so that probably determines the direction of travel <div class="leftCursor" id="viewArea" -- or it may just be the cursor graphic
  //but for now just do it this way.

  // Put the event handler in the "mask" div - IE where the area where the manga pages are visible.
  // seems mask is masked (lol) so use controller which controls things.

  // For some reason it only works when you click in the middle, but that's okay. Load up next two pages, click in middle, click for next 2, click in middle, etc
  // actually also works when you click next, but grabs the previous two pages (IE I think it triggers before the page change)

  // triggering before page change maybe? seems to have odd effect when loading up previously read manga. It'll save a cover as the page number which was being
  // loaded in the background while you were choosing to browse from the start of the manga
  // trying mouseup for funnies maybe mousedown is better as the change happens on mouseup
  $("div#controller").on("mousedown", function(){


  //pick the current canvases ( do we have to wait for them to load?)
  //apart from covers when there's only one, there will usually be two 'current' canvases containing the currently visable pages.
  //There can be up to 8 pages loaded in masked-off divs which will dynamically shift around, load and unload as you move through the pages.
  // for simplicity, just deal with the currently displayed images
  $("canvas.current").each(function(index, element){
    // wait until loaded?
    $(element).ready(function(){
        //grab page number
      pagenumer = -1; // reset it first otherwise it can grab the wrong canvas for the page

      pagenumber = $(element).attr("page");

      // check that page number is valid and not already in pages array - Also check it's not "false" - IE a empty page placeholder
      if(pagenumber > -1 && pagenumber != "false" && pagenumber != pages.find(function(x){return x == pagenumber})){

        pagecanvas = $(element);

        //get dataurl - this is where the actual image data lies
        pagedata = pagecanvas[0].toDataURL();
        pagedata.replace("image/png", "image/octet-stream");

        // save it through the browser
        saveAs(pagedata, pad(pagenumber,4)+'.png');

        // comment this out for now Save manually
        // The original plan was to send the pages via ajax to a local server so they can be processed and saved without
        // having to confirm every file. But fuck it, too much work.
        /*
        //post them to our server which will turn them into images
        $.ajax(
          global: false,   // don't want to trigger anything else on the page
          type : "POST",
          crossDomain : true,             // because we're posting to localhost
          url : "http://127.0.0.1:8090/",         // 8090 is the port the server will listen on
          data: { thispage : pagenumber, thisdata : pagedata }
        );
        // note we're not worried about responses. Fire and forget.
        */


        // store page numbers so we don't repeatedly download the same image
        pages.push(pagenumber);

      //endif
      }

      // end this.ready block
    })
    // end canvas.current iterating
  })


   // end click handler
   })

})