[Userscript] semi-Automated Derpibooru Uploader

I’m not sure how to implement this in browser js though.

Also, the script always uses fullview dimensions for chunk width/height and adjusts x and y accordingly. I’ve found that adjusting chunk width & height (making it smaller in last bottom/right-most chunks) tends to be more reliable.

Token kek was one of them.

// @require      https://github.com/xgds/pngtoy/raw/master/pngtoy.min.js

// This might have come from Stack Overflow?  I forgot, and I didn't make a comment so it probably wasn't verbatim
  function loadFileAsArrayBuffer(url){
    return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'arraybuffer';
      xhr.onload = function(e) {
        if (this.status === 200) {
          resolve(this.response);
        } else {
          reject(this.response);
        }
      };
      xhr.send();
    })
  };

// Changed lines within function unwatermark
      offsetX += Math.floor(width / 4 + 0.5);
      offsetY += Math.floor(height / 6 + 0.5);

// Do the diff yourself to see what changed plz
  async function combine(data) {
    const fullview = data.media.types.find(item => item.t === 'fullview');
    const targetWidth = data.extended.originalFile.width;
    const targetHeight = data.extended.originalFile.height;
    const maxWidth = Math.floor(fullview.w);
    const maxHeight = Math.floor(fullview.h);
    let canvas = createElement('canvas', { width: targetWidth, height: targetHeight});
    let ctx = canvas.getContext('2d');
    const url = (oX, oY, mW, mH) => data.media.baseUri + `/v1/crop/x_${oX},y_${oY},w_${mW},h_${mH},q_100/${data.media.prettyName}-pre.png?token=` + data.media.token[0];

    const pngtoy = new PngToy();
    let warnings = 0;
    let errors = 0;

    let offsetX = 0;
    let offsetY = 0;
    let currentWidth = maxWidth;
    let currentHeight = maxHeight;

    while (offsetX < targetWidth) {
      offsetY = 0;
      while (offsetY < targetHeight) {
        currentWidth = Math.min(maxWidth, targetWidth - offsetX);
        currentHeight = Math.min(maxHeight, targetHeight - offsetY);
        const arrayBuffer = await loadFileAsArrayBuffer(url(offsetX, offsetY, currentWidth, currentHeight));

        pngtoy.fetch(arrayBuffer).then(() => {
          const phys = pngtoy.getChunk('pHYs');
          if (!phys || !phys.ppuX || !phys.ppuY)
            warnings++;
          else if (phys.ppuX == 1000 || phys.ppuY == 1000)
            errors++;
        });

        // https://gist.github.com/candycode/f18ae1767b2b0aba568e
        const arrayBufferView = new Uint8Array(arrayBuffer);
        const blob = new Blob([arrayBufferView], { type: "image/png" });
        const urlCreator = window.URL || window.webkitURL;
        const imageUrl = urlCreator.createObjectURL(blob);

        await (async () => {
          return new Promise((resolve, reject) => {
            const image = new Image;
            image.onload = function() {
              const temp = createElement('canvas', { width: targetWidth, height: targetHeight});
              const tempCtx = temp.getContext('2d');

              tempCtx.drawImage(image, offsetX, offsetY);
              tempCtx.drawImage(canvas, 0, 0);

              ctx = tempCtx;
              canvas = temp;
              image.remove();
              URL.revokeObjectURL(imageUrl);
              resolve();
            }
            image.onerror = reject;
            image.src = imageUrl;
          });
        })();

        offsetY += Math.floor(maxHeight);
      }
      offsetX += Math.floor(maxWidth);
    }

    (warnings == 0) ? warnings = '' : warnings = warnings + ' MYSTERIES! - ';
    (errors == 0) ? errors = '' : errors = errors + ' LOW QUALITY!!! - ';
    spawn(warnings + errors + 'Open full (Ctrl+ = download)', (event) => openOrDownload(canvas.toDataURL(), data.media.prettyName + '-full.png'));
  }