' + formatBytes(file.size) + '
' +
'Set File'; document.getElementById("rm-hr").style.borderColor = getHRColor(); //populate fields var resWidth = document.getElementById("resWidth"); var resHeight = document.getElementById("resHeight"); var resFS = document.getElementById("resFS"); var resFormat = document.getElementById("resFormat"); var resTest = document.getElementById("resTest"); var resSet = document.getElementById("resSet"); resWidth.value = img.width; resWidth.max = img.width; resWidth.placeholder = img.width; resHeight.value = img.height; resHeight.max = img.height; resHeight.placeholder = img.height; resFormat.value = file.type; if (file.size > 4194304) resFS.style.color = "red"; //numbers only resWidth.onkeypress = function() { return isNumber(event); }; resHeight.onkeypress = function() { return isNumber(event); }; resWidth.oninput = function() { calcResAspect("width", img.width, img.height, resWidth.value); testBlob = null; }; resHeight.oninput = function() { calcResAspect("height", img.width, img.height, resHeight.value); testBlob = null; }; resFormat.oninput = function() { testBlob = null; }; //get filesize, if upscaled, set to original img dimensions (visually) resTest.onclick = function(){ if (resWidth.value > img.width || resHeight.value > img.height) {resWidth.value = img.width; resHeight.value = img.height; }; testFileSize(resWidth.value, resHeight.value, resFormat.value, img, resFS); }; //this is so stupid... //set file resSet.onclick = function(){ //check for upscales if (resWidth.value > img.width || resHeight.value > img.height) { alert("No upscaling. Do it yourself."); } else { if (testBlob) { if(DEBUG) console.log("[ManualResizer] testBlob found."); classObserver.disconnect(); if(DEBUG) console.log("[classObserver] Stopping..."); //reset preview removePreviewOption(); appendPreviewBtn(testDataURL, testBlob.size, resWidth.value, resHeight.value, file.name, testBlob.type); setFile(testBlob, img, resWidth.value, resHeight.value); } else { if(DEBUG) console.log("[ManualResizer] testBlob is null, calling fileSizeTester..."); testFileSize(resWidth.value, resHeight.value, resFormat.value, img, resFS); classObserver.disconnect(); if(DEBUG) console.log("[classObserver] Stopping..."); //reset preview removePreviewOption(); appendPreviewBtn(testDataURL, testBlob.size, resWidth.value, resHeight.value, file.name, testBlob.type); setFile(testBlob, img, resWidth.value, resHeight.value); } } }; //console.log(testResults); //Close the input box when clicking outside of it window.addEventListener('click', function closeOnClick(event) { var getmanInput = document.getElementById("manInput"); if (!event.target.matches('#manInput') && !event.target.matches('#resWidth') && !event.target.matches('#resHeight') && !event.target.matches('#resFormat') && !event.target.matches('#opt1') && !event.target.matches('#opt2') && !event.target.matches('#resTest') && //!event.target.matches('#resSet') && !event.target.matches('#resFS') && !event.target.matches('#testContainer') && !event.target.matches('#manualResize')) { getmanInput.remove(); if(DEBUG) console.log("[ManualResizer] Closed."); window.removeEventListener('click', closeOnClick); } }); } //for storing tested blob (to avoid a meaningless conversion when setting file) var testBlob = null; var testDataURL = null; function testFileSize(MAX_WIDTH, MAX_HEIGHT, format, img, resFS) { if(DEBUG) console.log("[fileSizeTester] Starting..."); var canvas = document.createElement("canvas"); //Input dimensions var width = img.width; var height = img.height; //Calculating dimensions/aspect ratio if (width > height) { if (width > MAX_WIDTH) { height *= MAX_WIDTH / width; width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width *= MAX_HEIGHT / height; height = MAX_HEIGHT; } } // resize the canvas to the new dimensions canvas.width = width; canvas.height = height; // scale & draw the image onto the canvas var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); //canvas to dataURL | JPEG quality (0-1) var dataURL; if (format == 'image/png') dataURL = canvas.toDataURL('image/png'); else dataURL = canvas.toDataURL('image/jpeg', parseFloat(getSettings().jpegQuality)); //dataURL to blob var blob = dataURItoBlob(dataURL); resFS.innerHTML = formatBytes(blob.size); //set new size if (blob.size > 4194304) { if(DEBUG) console.log("[fileSizeTester] File size is over the limit: " + formatBytes(blob.size)); resFS.style.color = "red"; } else { if(DEBUG) console.log("[fileSizeTester] File size OK: " + formatBytes(blob.size)); resFS.style.color = "inherit"; } //save test results to global var testBlob = blob; testDataURL = dataURL; if(DEBUG) console.log("[fileSizeTester] Done."); } //Crop Image button, from Side Menu function crop(img) { //Crop options container (future use) var container = document.createElement("div"); container.id = "cropDiv"; //Crop button var crop = document.createElement("a"); crop.id = "crop"; crop.classList.add("sideMenuElement"); crop.classList.add("entry"); crop.innerHTML = "Crop Image"; //crop.title = "Crop Image"; //CSS on hover crop.onmouseover = function(){this.classList.toggle("focused")}; crop.onmouseout = function(){this.classList.toggle("focused")}; //Call cropper crop.addEventListener('click', function(){ if(DEBUG) console.log("[cropper] Starting..."); cropImage(img); },); var parent = document.getElementById("sideMenu"); parent.appendChild(container); container.appendChild(crop); } //Image Cropper function cropImage(img) { var overlay = document.createElement("div"); overlay.id = "pvOverlay"; //----------------------------------------------- var header = document.createElement("div"); header.id = "pvHeader"; header.className = "dialog"; header.classList.add("pvOpct"); //header.style = "line-height: 35px;" //Set Image button------------------------------- var setBtn = document.createElement("a"); setBtn.id = "setCrop"; setBtn.style.cursor = "pointer"; setBtn.innerHTML = "Set Image"; //Undo button------------------------------------ var undoBtn = document.createElement("a"); undoBtn.id = "undoCrop"; undoBtn.style.cursor = "pointer"; undoBtn.innerHTML = "Undo"; //Close button----------------------------------- var closeBtn = document.createElement("a"); closeBtn.id = "closeCrop"; closeBtn.className = "close fa fa-times"; closeBtn.style = "float: right; cursor: pointer; margin-right: 20px; margin-top: 7px; transform: scale(1.5);"; closeBtn.title = "Close"; //Cropped
"; header.appendChild(setBtn); header.innerHTML += " | "; header.appendChild(undoBtn); setTimeout(function() { header.classList.toggle("pvOpct"); }, 2000); document.getElementById('closeCrop').onclick = function() { cropper.destroy(); overlay.remove(); fired = true; }; document.getElementById('setCrop').onclick = function() { setImage(); }; document.getElementById('undoCrop').onclick = function() { overlay.remove(); cropImage(img); }; } break; } function setImage() { //Stop classObserver | prevent trigger loop classObserver.disconnect(); fired = true; if(DEBUG) console.log("[classObserver] Stopping..."); overlay.remove(); removePreviewOption(); //var new_filename = constructFilename(blob.type, file.name) appendPreviewBtn(dataURL, blob.size, cropImg.width, cropImg.height, file.name, blob.type); setFile(blob, img, cropImg.width, cropImg.height) } //Mouse controls function logMouseButton(e) { if (typeof e === 'object') { switch (e.button) { case 0: setImage(); break; case 1: cropper.destroy(); overlay.remove(); fired = true; break; case 2: if (!e.shiftKey){ overlay.remove(); cropImage(img); } break; } } } } } }); //call Cropper with settings cropper = new DaiyamCropper(image, { aspectRatio: NaN, background: false, guides: false, viewMode: 1, autoCrop: false, scalable: false, }); } //Remember button function rememberQC (img, file, imgMD5, newSize) { var container = document.createElement("div"); container.id = "remDiv"; var remember = document.createElement("a"); remember.id = "rememberMD5"; remember.classList.add("sideMenuElement"); remember.classList.add("entry"); remember.innerHTML = "Remember"; remember.style.fontWeight = "bold"; remember.title = "Always convert this image." //CSS on hover remember.onmouseover = function(){this.classList.toggle("focused")}; remember.onmouseout = function(){this.classList.toggle("focused")}; remember.onclick = function(){ saveImgMD5(img, file, imgMD5, newSize) }; var parent = document.getElementById("sideMenu"); parent.appendChild(container); container.appendChild(remember); } //Preview Image button function appendPreviewBtn(img, pvSize, pvWidth, pvHeight, pvName, pvMime) { var existCheck = document.getElementById("previewImg"); if (!existCheck) { var preview = document.createElement("a"); preview.id = "previewImg"; preview.classList.add("sideMenuElement"); preview.classList.add("entry"); preview.innerHTML = "Preview Image"; //CSS on hover preview.onmouseover = function(){this.classList.toggle("focused")}; preview.onmouseout = function(){this.classList.toggle("focused")}; preview.onclick = function(){ showImage(img, pvSize, pvWidth, pvHeight, pvName, pvMime) }; var parent = document.getElementById("sideMenu"); parent.appendChild(preview); } else { existCheck.onclick = function(){ showImage(img, pvSize, pvWidth, pvHeight, pvName, pvMime) }; } return; } //Read the file reader.readAsDataURL(file); } else { removeHR(); removeCropOption(); removeQCOption(); removePreviewOption(); removeManual(); if(DEBUG) console.log("[Error] Invalid FileType: " + file.type); } }, false); //Observing if a file was uploaded or not | checking if div (with id: "file-n-submit") has class named: "has-file" function callback(mutationList, observer) { if (document.getElementById("file-n-submit").classList.contains("has-file") === true && checkState(2) === true) { if(DEBUG) console.log("
function clearErr() { document.getElementById("errMsg").innerHTML = ""; }
//Checks for any logic errors (upscaling)
function basicCheck(edit, rulePos) {
var inWidth = parseInt(document.getElementById("inWidth").value);
var inHeight = parseInt(document.getElementById("inHeight").value);
var outWidth = parseInt(document.getElementById("outWidth").value);
var outHeight = parseInt(document.getElementById("outHeight").value);
var imgType = parseInt(document.getElementById("imgType").value);
if (outWidth <= 0 || outHeight <= 0) { document.getElementById("errMsg").innerHTML = "Invalid output dimensions"; return}
else if (inWidth < outWidth || inHeight < outHeight) { document.getElementById("errMsg").innerHTML = "Cannot upscale images"; return}
else finalCheck(edit, imgType, inWidth, inHeight, outWidth, outHeight, rulePos);
return;
}
//Checks for any rule overlaps
// ([0] - Image type, [1] - Input width, [2] - Input height, [3] - Output width, [4] - Output height)
function finalCheck(edit, imgType, inWidth, inHeight, outWidth, outHeight, rulePos) {
var e = document.getElementById("imgType");
var format = e.options[e.selectedIndex].text;
var presetString = imgType + ":" + inWidth + ":" + inHeight + ":" + outWidth + ":" + outHeight;
var presets = getPresets();
if (presets.length > 0) {
var rule = [];
var presetCount = presets.length;
for (var i = 0; i < presetCount; i++) {
if (edit && i === rulePos) continue;
rule[i] = presets[i].split(":");
if (presetString == presets[i]) { document.getElementById("errMsg").innerHTML = "Exact preset already exists"; return }
else if ((inWidth == rule[i][1] && inHeight == rule[i][2]) && (imgType == rule[i][0] || rule[i][0] == 0)) { document.getElementById("errMsg").innerHTML = "Preset with the same input dimensions for " + format + " format already exists"; return }
}
}
//save preset
clearErr();
if (edit) presets[rulePos] = presetString;
else presets.push(presetString);
localStorage.setItem("downscale-presets", JSON.stringify(presets));
//rebuild list
document.getElementById("ruleTable").tBodies.item(0).innerHTML = "";
printList();
//hide / display
document.getElementById("ruleInput").remove();
document.getElementById("addRule").style.display = "inline";
return;
}
//Check if possible to calculate output WIDTH
function aspectCheckH() {
var inWidth = document.getElementById("inWidth").value;
var inHeight = document.getElementById("inHeight").value;
var outWidth = document.getElementById("outWidth").value;
var outHeight = document.getElementById("outHeight").value;
if (outHeight > 0) {
if (parseInt(inHeight) >= parseInt(outHeight)) {
calcAspect("width", inWidth, inHeight, outHeight);
clearErr();
}
else {
document.getElementById("errMsg").innerHTML = "Cannot upscale images";
}
}
}
//Check if possible to calculate output HEIGHT
function aspectCheckW() {
var inWidth = document.getElementById("inWidth").value;
var inHeight = document.getElementById("inHeight").value;
var outWidth = document.getElementById("outWidth").value;
var outHeight = document.getElementById("outHeight").value;
if (outWidth > 0) {
if (parseInt(inWidth) >= parseInt(outWidth)) {
calcAspect("height", inWidth, inHeight, outWidth);
clearErr();
}
else {
document.getElementById("errMsg").innerHTML = "Cannot upscale images";
}
}
}
//Aspect ratio calculation (finds the other output dimension based on given exact input dimensions)
function calcAspect(dimension, w, h, output) {
if (dimension == "width") {
var width = output / h * w;
document.getElementById("outWidth").value = Math.round(width);
}
if (dimension == "height") {
var height = output / w * h;
document.getElementById("outHeight").value = Math.round(height);
}
}
//Aspect ratio calculation for Manual Resize (finds the other output dimension based on given exact input dimensions)
function calcResAspect(dimension, w, h, output) {
if (dimension == "width") {
var width = h / w * output;
document.getElementById("resHeight").value = Math.round(width);
}
if (dimension == "height") {
var height = w / h * output;
document.getElementById("resWidth").value = Math.round(height);
}
}
//Populate Presets list
function printList() {
var presets = getPresets();
var list = document.getElementById("imgResizeList");
var table = document.getElementById("ruleTable");
if (presets.length > 0) {
var rule = [];
var presetCount = presets.length;
for (let i = 0; i < presetCount; i++) {
rule[i] = presets[i].split(":");
switch (parseInt(rule[i][0])) {
case 0:
rule[i][0] = "PNG/JPEG";
break;
case 1:
rule[i][0] = "PNG";
break;
case 2:
rule[i][0] = "JPEG";
}
let delRow = document.createElement("a");
let editRow = document.createElement("a");
delRow.innerHTML = "delete";
editRow.innerHTML = "edit";
//delete a rule and rebuild the list
delRow.onclick = function() {
if (document.getElementById("inputContainer")) document.getElementById("inputContainer").innerHTML = "";
presets.splice(delRow.parentElement.parentElement.sectionRowIndex, 1);
localStorage.setItem("downscale-presets", JSON.stringify(presets));
table.tBodies.item(0).innerHTML = "";
printList();
clearErr();
document.getElementById("addRule").style.display = "inline";
};
editRow.onclick = function() { inputUI(true, rule[i], i); clearErr(); };
//Array contents: [0] - Image type, [1] - Input width, [2] - Input height, [3] - Output width, [4] - Output height
var row = table.tBodies.item(0).insertRow(-1);
row.insertCell(0).innerHTML = rule[i][0];
row.insertCell(1).innerHTML = '[ ' + rule[i][1] + ' x ' + rule[i][2] + ' ]';
row.insertCell(2).innerHTML = '→';
row.insertCell(3).innerHTML = '[ ' + rule[i][3] + ' x ' + rule[i][4] + ' ]';
row.insertCell(4).appendChild(editRow);
row.insertCell(5).appendChild(delRow);
}
}
}
//Input field
function inputUI(edit, rule, rulePos) {
if (document.getElementById("inputContainer")) document.getElementById("inputContainer").innerHTML = "";
document.getElementById("addRule").style.display = "none";
var inputDiv = document.getElementById("inputContainer");
var input = document.createElement("div");
var discardRuleBtn = document.createElement("button");
discardRuleBtn.innerHTML = "Cancel";
discardRuleBtn.style.margin = "auto 0 0 10px";
var saveRuleBtn = document.createElement("button");
saveRuleBtn.innerHTML = "Save";
input.id = "ruleInput";
//Rules form
input.innerHTML = '' +
'' +
' ' +
'' +
' x ' +
'' +
' ' +
' → x ' +
'
';
inputDiv.appendChild(input);
var inWidth = document.getElementById("inWidth");
var inHeight = document.getElementById("inHeight");
var outWidth = document.getElementById("outWidth");
var outHeight = document.getElementById("outHeight");
if (edit) {
switch (rule[0]) {
case "PNG/JPEG":
document.getElementById("imgType").selectedIndex = 0;
break;
case "PNG":
document.getElementById("imgType").selectedIndex = 1;
break;
case "JPEG":
document.getElementById("imgType").selectedIndex = 2;
}
inWidth.value = rule[1];
inHeight.value = rule[2];
outWidth.value = rule[3];
outHeight.value = rule[4];
}
//Listen for user input on target dimension input fields to automatically calculate aspect ratio
outWidth.addEventListener("input", aspectCheckW);
outHeight.addEventListener("input", aspectCheckH);
inWidth.onkeypress = function() { outHeight.value = 0; outWidth.value = 0; return isNumber(event); };
inHeight.onkeypress = function() { outHeight.value = 0; outWidth.value = 0; return isNumber(event); };
outWidth.onkeypress = function() { return isNumber(event); };
outHeight.onkeypress = function() { return isNumber(event); };
input.appendChild(saveRuleBtn);
input.appendChild(discardRuleBtn);
discardRuleBtn.onclick = function(){ document.getElementById(input.id).remove(); document.getElementById("addRule").style.display = "inline"; clearErr();};
saveRuleBtn.onclick = function() { if (edit) basicCheck(true, rulePos); else basicCheck(false); };
}
//Populate Quick Convert List table
function printQCList() {
var QCList = getQCList();
var list = document.getElementById("QCList");
var table = document.getElementById("QCTable");
var filterCount = QCList.length;
if (filterCount > 0) {
var QCFilter = [];
for (let i = 0; i < filterCount; i++) {
QCFilter[i] = QCList[i].split(":");
let delRow = document.createElement("a");
delRow.innerHTML = "delete";
delRow.onclick = function() {
QCList.splice(delRow.parentElement.parentElement.sectionRowIndex, 1);
localStorage.setItem("downscale-qclist", JSON.stringify(QCList));
table.tBodies.item(0).innerHTML = "";
printQCList();
};
//QCList Array: [0] - Filetype, [1] - Image Width, [2] - Image Height, [3] - Original Filesize, [4] - New Filesize, [5] - Filename, [6] - Image Base64 MD5 Hash
var row = table.tBodies.item(0).insertRow(-1);
row.insertCell(0).innerHTML = QCFilter[i][0];
row.insertCell(1).innerHTML = '[ ' + QCFilter[i][1] + ' x ' + QCFilter[i][2] + ' ]';
row.insertCell(2).innerHTML = QCFilter[i][3];
row.insertCell(3).innerHTML = '→';
row.insertCell(4).innerHTML = QCFilter[i][4];
row.insertCell(5).innerHTML = '
' + QCFilter[i][5] + '
'; row.insertCell(6).appendChild(delRow); } } } //*************************************************************************************// // MENUS // //*************************************************************************************// function appendSettings() { //Button-------------------------------------------------------- var span = document.createElement("span"); var button = document.createElement("a"); button.id = "imgResizeSettings"; button.className += "fa fa-cog"; button.style = "cursor: pointer;"; button.title = "Image Resizer Settings"; var ref = document.getElementById('shortcut-settings'); ref.insertBefore(span, parent.nextSibling); span.appendChild(button); //Overlay | imgResizeOverlay------------------------------------ var overlay = document.createElement("div"); overlay.id = "imgResizeOverlay"; overlay.classList.add("settingsOverlay"); document.body.appendChild(overlay); //Settings menu links | imgResizeMenu--------------------------- var menu = document.createElement("div"); menu.id = "imgResizeMenu"; menu.classList.add("dialog"); overlay.appendChild(menu); var close = document.createElement("a"); close.className += "close fa fa-times"; close.style = "float: right;"; close.title = "Close"; menu.insertAdjacentElement('afterbegin', close); //Settings var settingsBtn = document.createElement("a"); settingsBtn.innerHTML += "Settings"; settingsBtn.classList.add("menuBtns"); settingsBtn.style = "font-weight: bold;"; settingsBtn.onclick = function() { settingsDiv.className = "downscale-menu-on"; presetsDiv.className = "downscale-menu-off"; QCListDiv.className = "downscale-menu-off"; helpDiv.className = "downscale-menu-off"; settingsBtn.style = "font-weight: bold;"; presetsBtn.style = ""; QCListBtn.style = ""; helpBtn.style = ""; }; menu.appendChild(settingsBtn); //Presets var presetsBtn = document.createElement("a"); presetsBtn.innerHTML += "Presets"; presetsBtn.classList.add("menuBtns"); presetsBtn.onclick = function() { settingsDiv.className = "downscale-menu-off"; presetsDiv.className = "downscale-menu-on"; QCListDiv.className = "downscale-menu-off"; helpDiv.className = "downscale-menu-off"; settingsBtn.style = ""; presetsBtn.style = "font-weight: bold;"; QCListBtn.style = ""; helpBtn.style = ""; }; menu.appendChild(presetsBtn); //Quick Convert List var QCListBtn = document.createElement("a"); QCListBtn.innerHTML += "Quick Convert"; QCListBtn.classList.add("menuBtns"); QCListBtn.onclick = function() { settingsDiv.className = "downscale-menu-off"; presetsDiv.className = "downscale-menu-off"; QCListDiv.className = "downscale-menu-on"; helpDiv.className = "downscale-menu-off"; settingsBtn.style = ""; presetsBtn.style = ""; QCListBtn.style = "font-weight: bold;"; helpBtn.style = ""; }; menu.appendChild(QCListBtn); //Help var helpBtn = document.createElement("a"); helpBtn.innerHTML += "About"; helpBtn.classList.add("menuBtns"); helpBtn.onclick = function() { settingsDiv.className = "downscale-menu-off"; presetsDiv.className = "downscale-menu-off"; QCListDiv.className = "downscale-menu-off"; helpDiv.className = "downscale-menu-on"; settingsBtn.style = ""; presetsBtn.style = ""; QCListBtn.style = ""; helpBtn.style = "font-weight: bold;"; }; menu.appendChild(helpBtn); var hr = document.createElement("hr"); hr.style.borderColor = getHRColor(); menu.appendChild(hr); //Content divs| imgResizeContent--------------------------------- var content = document.createElement("div"); content.id = "imgResizeContent"; menu.appendChild(content); content.innerHTML = ""; var errMsg = document.createElement("p"); errMsg.id = "errMsg"; //Settings var settingsDiv = document.createElement("div"); settingsDiv.id = "settingsDiv"; settingsDiv.classList.add("downscale-menu-on"); content.appendChild(settingsDiv); //Presets var presetsDiv = document.createElement("div"); presetsDiv.id = "presetsDiv"; presetsDiv.classList.add("downscale-menu-off"); presetsDiv.style.textAlign = "center"; content.appendChild(presetsDiv); //Quick Convert List var QCListDiv = document.createElement("div"); QCListDiv.id = "QCListDiv"; QCListDiv.classList.add("downscale-menu-off"); content.appendChild(QCListDiv); //Help var helpDiv = document.createElement("div"); helpDiv.id = "heplDiv"; helpDiv.classList.add("downscale-menu-off"); content.appendChild(helpDiv); //-------------------------------------------------------------- var title = document.createElement("h3"); title.innerHTML = "Image Resizer Settings"; settingsDiv.appendChild(title); //Enable Resizer------------------------------------------------ var enableDiv = document.createElement("div"); enableDiv.classList.add("resizer-settings"); enableDiv.innerHTML = '' + '' + ': ' + 'Enable 4chan Image Resizer by default.'; settingsDiv.appendChild(enableDiv); var enableSet = document.getElementById("enableSet"); enableSet.checked = getSettings().enabled; enableSet.oninput = function() { //remove side menu options upon disabling ImageResizer if (!enableSet.checked) { removeCropOption(); removeQCOption(); removeRemOption(); removePreviewOption(); } var settings = getSettings(); settings.enabled = enableSet.checked; document.getElementById("imgResize").checked = enableSet.checked; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //Enable Shortcut----------------------------------------------- var shortcutDiv = document.createElement("div"); shortcutDiv.classList.add("resizer-settings"); shortcutDiv.innerHTML = '' + '' + ': ' + 'Enable "Quick Convert" shortcut. Ctrl + Q by default.'; settingsDiv.appendChild(shortcutDiv); var shortcutSet = document.getElementById("shortcutSet"); shortcutSet.checked = getSettings().shortcut; shortcutSet.oninput = function() { var settings = getSettings(); settings.shortcut = shortcutSet.checked; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //Display notifications----------------------------------------- var notifySetDiv = document.createElement("div"); notifySetDiv.classList.add("resizer-settings"); notifySetDiv.innerHTML = '' + '' + ': ' + 'Display a notification when an image is downscaled.'; settingsDiv.appendChild(notifySetDiv); var notifySet = document.getElementById('displaySet'); notifySet.checked = getSettings().notify; notifySet.oninput = function() { var settings = getSettings(); settings.notify = notifySet.checked; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //Convert WebP------------------------------------- var convertSetDiv = document.createElement("div"); convertSetDiv.classList.add("resizer-settings"); convertSetDiv.innerHTML = '' + '' + '' + ': ' + 'Automatically convert WebP images to selected format.'; settingsDiv.appendChild(convertSetDiv); var convertSet = document.getElementById('convertSet'); convertSet.checked = getSettings().convert; var convertOutSet = document.getElementById('convertOut'); convertOutSet.value = getSettings().convertOutput; //very lazy copy... convertSet.oninput = function() { var settings = getSettings(); settings.convert = convertSet.checked; settings.convertOutput = convertOutSet.value; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //...paste convertOutSet.oninput = function() { var settings = getSettings(); settings.convert = convertSet.checked; settings.convertOutput = convertOutSet.value; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //Set JPEG quality---------------------------------------------- //RegExp ^$|^[1-9][0-9]?$|^100$ //Only numbers between 1 and 100, including an empty string (that is not written in storage) //JPEG quality value is still stored as a decimal number. var qualitySetDiv = document.createElement("div"); qualitySetDiv.classList.add("resizer-settings"); qualitySetDiv.innerHTML = '' + '' + ': ' + 'A number between 1 and 100 indicating the output image quality.'; settingsDiv.appendChild(qualitySetDiv); var inputField = document.getElementById('imgQuality'); inputField.value = getSettings().jpegQuality * 100; //Check input field validity and store correct value inputField.oninput = function() { var inputField = document.getElementById('imgQuality'); var r = new RegExp(/^$|^[1-9][0-9]?$|^100$/); if(r.test(inputField.value) && inputField.value != "") { inputField.setCustomValidity(""); var settings = getSettings(); settings.jpegQuality = inputField.value / 100; localStorage.setItem("downscale-settings", JSON.stringify(settings)); } else if (inputField.value == ""){ inputField.setCustomValidity("Input a number between 1 and 100.\nCurrent set value: " + getSettings().jpegQuality * 100); inputField.reportValidity(); } else { inputField.setCustomValidity("Input a number between 1 and 100.\nCurrent set value: " + getSettings().jpegQuality * 100); inputField.reportValidity(); inputField.value = getSettings().jpegQuality * 100; } }; //Cropper Settings----------------------------------------------- /* For future use var title2 = document.createElement("h3"); title2.innerHTML = "Image Cropper Settings"; settingsDiv.appendChild(title2); */ //Crop output format--------------------------------------------- var cropOutDiv = document.createElement("div"); cropOutDiv.classList.add("resizer-settings"); cropOutDiv.innerHTML = '' + ' ' + ': ' + 'Set the desired output format for cropped images.'; settingsDiv.appendChild(cropOutDiv); var cropOutSet = document.getElementById('cropOut'); cropOutSet.value = getSettings().cropOutput; cropOutSet.oninput = function() { var settings = getSettings(); settings.cropOutput = cropOutSet.value; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //Preset table | ruleTable---------------------------------------- var tableWrapper = document.createElement("div"); tableWrapper.style.overflowY = "auto"; tableWrapper.style.maxHeight = "220px"; var table = document.createElement("table"); var thead = document.createElement("thead"); var tbody = document.createElement("tbody"); var presetsTitle = document.createElement("h3"); presetsTitle.innerHTML = "Presets"; presetsDiv.appendChild(presetsTitle); table.appendChild(thead); table.appendChild(tbody); table.id = "ruleTable"; var row = thead.insertRow(0); row.insertCell(0).outerHTML = "Images on this list will be automatically converted to JPEG with a quality setting of 92.
"; QCTable.appendChild(QCThead); QCTable.appendChild(QCTbody); QCTable.id = "QCTable"; var QCRow = QCThead.insertRow(0); QCRow.insertCell(0).outerHTML = "' + '
Presets
To automate image resizing, you have to create a preset by choosing an input image format and entering input and output dimensions (pixels). Then just add an image to a quick reply form. ' + 'If it meets any of the created input requirements, the image will be automatically downscaled to your specified dimensions as a JPEG. ' + '
Note that output dimensions are constrained by input dimensions aspect ratio. ' + '
Also note that setting JPEG output quality to 100 will result in filesizes larger than that of the original image, without any noticable quality changes.
Quick Convert
Allows you to quickly convert images (PNG/JPEG/WebP) to JPEG fromat.' + '
This is very useful when an image exceeds 4chan image size limit of 4 MB.' + '
It works well on super high resolution images (+3000px), sometimes drastically cutting the filesize without any noticeble quality loss.' + ' However, it is not recommended to use it on grayscale PNG images, i.e. manga pages, because most of the time it will result in larger than original filesizes.' + '
Once you are satisfied with the "Quick Convert" results, you can click "Remember" on the side menu to add the image MD5 hash to the "Quick Convert List", which then will always automatically convert the image for you in the future.' + '
You can also use the default Ctrl + Q keyboard shortcut to perform "Quick Convert" faster. Press again to "Remember" the image.
Import/Export
Allows you to seperatly backup both, "Presets" and "Quick Convert" lists as .json files.' + '
Import works by merging list entries instead of overwriting them, so you can export/import items between domains without any worry.
Image Cropping
A basic image cropping tool that uses Daiyam/Cropper.js library. ' + 'You can change cropped image output format in the settings tab.
PNG is lossless and preserves transperancy, but results in larger filesizes.
JPEG is lossy, but results in smaller filesizes (the "JPEG Quality" setting also applies here).
Cropper Controls
' + 'While cropping:
- Double click LMB - switch between cropping and zooming.
- Hold Shift while cropping - draw a fixed rectangle.
- MWheel - zoom in/out. ' + '
- Backspace - clear selection.
- Enter - confirm selection.
- Esc or Delete - close cropper.
- Enter or LMB - set image to QR form.
- Backspace or RMB - undo selection.
- MMB - close cropper.
- Shift + RMB - open context menu.
Custom Shortcuts
' + 'I am way too lazy to implement custom keybind functionality and the UI for it. But if you really want to change the default keybinds, you will have to edit the code directly.' + '
To do that, you first have to open the code in your script manager (Tampermonkey, Violentmonkey, etc.).' + '
If you want to change "Quick Convert" shortcut, hit Ctrl+F and search for "Quick Convert KEYBINDS".' + '
If you want to change "Image Cropper" shortcuts, hit Ctrl+F and search for "Cropper KEYBINDS".' + '
All you have to do now is change the keyCode values to the ones that represent your desired keys. You can easily find equivalent keyCode values for each keyboard key by googling them.
NEW
- Replaced the useless auto PNG conversion with auto WebP conversion.
- Image preview header now displays the correct file type after conversion.
- Some minor UI adjustments. ' + '
'; helpDiv.appendChild(rant); } //Only when QR form is open. function appendSideMenu() { //Arrow | sideMenuArrow---------------------------------------------------------- var arrow = document.createElement("a"); arrow.id = "sideMenuArrow"; arrow.title = "Side Menu"; arrow.style.cursor = "pointer"; arrow.innerHTML = "◀"; var arrowRef = document.getElementById("autohide"); arrowRef.parentNode.insertAdjacentElement("beforebegin", arrow); arrow.onclick = function(){ sideMenu.classList.toggle("downscale-menu-on"); }; //Side Menu | sideMenu---------------------------------------------------------- var sideMenu = document.createElement("div"); sideMenu.id = "sideMenu"; sideMenu.classList.add("dialog"); var sideMenuRef = document.getElementById("qr"); sideMenuRef.insertAdjacentElement("afterbegin", sideMenu); //Close side menu dialog by clicking anywhere but here: window.addEventListener('click', function(event) { var getSideMenu = document.getElementById("sideMenu"); if (!event.target.matches('#sideMenuArrow') && !event.target.matches('#sideMenu') && !event.target.matches('#imgResize') && !event.target.matches('#quickConvert') && //!event.target.matches('#manualResize') && !event.target.matches('#imgResizeLabel')) { if (getSideMenu.classList.contains('downscale-menu-on')) getSideMenu.classList.remove('downscale-menu-on'); } }); } appendSettings(); //*************************************************************************************// //END OF MENUs // //*************************************************************************************// //Saves image details to local storage function saveImgMD5 (img, file, imgMD5, newSize) { removeRemOption(); var QCList = getQCList(); //"file/jpeg" -> "JPEG" var filetype = file.type.split("/").pop().toUpperCase(); //remove filetype var filename = file.name.split(".").slice(0,-1).join("."); //replace seperators filename = filename.replace(/:/g,"_"); var orig_filesize = formatBytes(file.size); var new_filesize = formatBytes(newSize); //QCList Array [0] - Filetype, [1] - Image Width, [2] - Image Height, [3] - Original Filesize, [4] - New Filesize, [5] - Filename, [6] - Image Base64 MD5 Hash var QCString = filetype + ":" + img.width + ":" + img.height + ":" + orig_filesize + ":" + new_filesize + ":" + filename + ":" + imgMD5; QCList.push(QCString); localStorage.setItem("downscale-qclist", JSON.stringify(QCList)); //Show notification var info = file.name + '\nAdded to the "Quick Convert List"'; var msgDetail = {type: 'info', content: info, lifetime: 5}; var msgEvent = new CustomEvent('CreateNotification', {bubbles: true, detail: msgDetail}); document.dispatchEvent(msgEvent); //rebuild list document.getElementById("QCTable").tBodies.item(0).innerHTML = ""; printQCList(); } //Removes these Side Menu options function removeQCOption() { var checkQC = document.getElementById("qcDiv"); if (checkQC) checkQC.remove(); } function removeRemOption() { var checkRem = document.getElementById("remDiv"); if (checkRem) checkRem.remove(); } function removeCropOption() { var checkCrop = document.getElementById("cropDiv"); if (checkCrop) checkCrop.remove(); } function removePreviewOption() { var checkPreview = document.getElementById("previewImg"); if (checkPreview) checkPreview.remove(); } function removeHR() { var checkHR = document.getElementById("sm-hr"); if (checkHR) checkHR.remove(); } function removeManual() { var checkMan = document.getElementById("manDiv"); if (checkMan) checkMan.remove(); } //Get border color for
hack function getHRColor () { var sample = document.getElementById("imgResizeMenu"); return window.getComputedStyle(sample, null).getPropertyValue("border-bottom-color"); } //Show/hide sidemenu
function appendHR() { var hr = document.createElement("hr"); hr.id = "sm-hr"; hr.style.borderColor = getHRColor(); document.getElementById("sideMenu").appendChild(hr); } //Image viewer function showImage(img, size, width, height, filename, mime) { var newFileName = constructFilename(mime, filename); var overlay = document.createElement("div"); overlay.id = "pvOverlay"; //----------------------------------------------- var pvHeader = document.createElement("div"); pvHeader.id = "pvHeader"; pvHeader.className = "dialog"; //opacity hack pvHeader.classList.add("pvOpct"); pvHeader.innerHTML = newFileName + "
(" + formatBytes(size)+ ", " + Math.round(width) + "x" + Math.round(height) + ")"; //----------------------------------------------- var closePv = document.createElement("a"); closePv.className = "close fa fa-times"; closePv.style = "float: right; cursor: pointer; margin-right: 20px; margin-top: -9px; transform: scale(1.5);"; closePv.title = "Close"; closePv.onclick = function(){ overlay.remove(); }; //----------------------------------------------- var pvImg = document.createElement("img"); pvImg.id = "pvImg"; pvImg.classList.add("centerImg"); pvImg.title = "Click to close"; pvImg.src = img; pvImg.onclick = function(){ overlay.remove(); }; //----------------------------------------------- document.body.appendChild(overlay); //pvHeader.appendChild(closePv); overlay.appendChild(pvImg); overlay.appendChild(pvHeader); pvHeader.appendChild(closePv); //opacity hack setTimeout(function() { pvHeader.classList.toggle("pvOpct"); }, 2000); } //Converts dataURI to blob function dataURItoBlob(dataURI) { //convert base64/URLEncoded data component to raw binary data held in a string var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) { byteString = atob(dataURI.split(',')[1]); } else { byteString = unescape(dataURI.split(',')[1]); } //separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; //write the bytes of the string to a typed array var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], { type: mimeString }); } //json file exporter function downloadObjectAsJson(exportObj, exportName) { var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj)); var downloadAnchorNode = document.createElement('a'); downloadAnchorNode.setAttribute("href", dataStr); downloadAnchorNode.setAttribute("download", exportName + ".json"); document.body.appendChild(downloadAnchorNode); downloadAnchorNode.click(); downloadAnchorNode.remove(); } //Prevent multiple event listeners var scListenerExists = false; //------------------Quick Convert KEYBINDS------------------------- | default Ctrl+Q if (getSettings().shortcut && !scListenerExists) { document.addEventListener('keyup', qCShortcut); scListenerExists = true ; } function qCShortcut(e) { var convertBtn = document.getElementById("quickConvert"); var rememberBtn = document.getElementById("rememberMD5"); //if shortcut is enabled, simulate clicks if (getSettings().shortcut) { //ctrlKey = Ctrl, 81 = Q //You can change ctrlKey to altKey or shiftKey. //Example: (e.shiftKey && e.keyCode == 65 && convertBtn) would be Shift+A //Edit keyCode value below for "Quick Convert" action if (e.ctrlKey && e.keyCode == 81 && convertBtn) { convertBtn.click(); } //Edit keyCode value below for "Remember" action else if (e.ctrlKey && e.keyCode == 81 && rememberBtn) { rememberBtn.click(); } //Do not edit beyond this point------------------------------ } } //Fix filetype in a filename function constructFilename(mime, filename) { //"file/jpeg" -> "jpeg" var filetype = mime.split("/").pop(); //remove filetype from a filename and add the correct one var new_filename = filename.split(".").slice(0,-1).join(".").concat("." + filetype); return new_filename; } //Bloat function isNumber(e){var i=(e=e||window.event).which?e.which:e.keyCode;return!(i>31&&(i<48||i>57));} function formatBytes(a,b){if(0==a)return"0 Bytes";var c=1024,d=b||2,e=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],f=Math.floor(Math.log(a)/Math.log(c));return parseFloat((a/Math.pow(c,f)).toFixed(d))+" "+e[f];}