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'));
}
Help fund the $15 daily operational cost of Derpibooru - support us financially!