"; 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, new_filename); 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 Cropper(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) { 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) }; var parent = document.getElementById("sideMenu"); parent.appendChild(preview); } else { existCheck.onclick = function(){ showImage(img, pvSize, pvWidth, pvHeight, pvName) }; } return; } //Read the file reader.readAsDataURL(file); } else { removeHR(); removeCropOption(); removeQCOption(); removePreviewOption(); if(DEBUG) console.log("[Error] Invalid FileType: " + file.type + "\n------
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);
}
}
//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";
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'; 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 all PNGs to JPEGs------------------------------------- var convertSetDiv = document.createElement("div"); convertSetDiv.classList.add("resizer-settings"); convertSetDiv.innerHTML = '' + '' + ': ' + 'Automatically convert all added PNGs to JPEGs. Presets apply as normal.'; settingsDiv.appendChild(convertSetDiv); var convertSet = document.getElementById('convertSet'); convertSet.checked = getSettings().convert; convertSet.oninput = function() { var settings = getSettings(); settings.convert = convertSet.checked; localStorage.setItem("downscale-settings", JSON.stringify(settings)); }; //Set JPEG quality---------------------------------------------- //RegExp ^(0(\.\d{1,2})?|1(\.0+)?)$ //Only one number (0 or 1) before decimal, and up tp 2 numbers after decimal, if there is a 0 before decimal (between 0 and 9) //e.g. 0.92 true, 1.92 false var qualitySetDiv = document.createElement("div"); qualitySetDiv.classList.add("resizer-settings"); qualitySetDiv.innerHTML = '' + '' + ': ' + 'A number between 0 and 1 indicating the output image quality.'; settingsDiv.appendChild(qualitySetDiv); var inputField = document.getElementById('imgQuality'); inputField.value = getSettings().jpegQuality; inputField.onkeypress = function() { return isDecimalNumber(event); }; //Check input field validity inputField.oninput = function() { var inputField = document.getElementById('imgQuality'); var r = new RegExp(/^(0(\.\d{1,2})?|1(\.0+)?)$/); if(r.test(document.getElementById('imgQuality').value)) { inputField.setCustomValidity(""); var settings = getSettings(); settings.jpegQuality = inputField.value; localStorage.setItem("downscale-settings", JSON.stringify(settings)); } else inputField.setCustomValidity("Set the value between 1 and 0 up to 2 numbers after the decimal point."); }; //Cropper Settings----------------------------------------------- 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)); }; //Crop image smoothing------------------------------------------ var cropSmoothDiv = document.createElement("div"); cropSmoothDiv.classList.add("resizer-settings"); cropSmoothDiv.innerHTML = '' + '' + ': ' + 'Enables image smoothing for cropped images.'; settingsDiv.appendChild(cropSmoothDiv); var smoothSet = document.getElementById('cropSmooth'); smoothSet.checked = getSettings().smoothing; smoothSet.oninput = function() { var settings = getSettings(); settings.smoothing = smoothSet.checked; 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 1 may result in filesizes larger than that of the original image, and should be considered as a placebo.
Quick Convert
Allows you to quickly convert images (PNG/JPEG) to JPEG.' + '
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 will always automatically convert the image for you in the future.' + '
You can also use 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 Cropper.js libraby. ' + '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).' + '
Note
I\'ll try to fix this in the next release.
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.
*NEW*
- "Crop Image" option now appears in the "Side Menu" after any image conversion (except the cropping itself).
'; 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('#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(); } //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) { 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 = filename + "
(" + 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 shortcut | 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) { if (e.ctrlKey && e.keyCode == 81 && convertBtn) { convertBtn.click(); } else if (e.ctrlKey && e.keyCode == 81 && rememberBtn) { rememberBtn.click(); } } } //Fix filetype in filename function constructFilename(mime, filename) { //"file/jpeg" -> "jpeg" var filetype = mime.split("/").pop(); //remove filetype from filename and add the correct one var new_filename = filename.split(".").slice(0,-1).join(".").concat("." + filetype); return new_filename; } //Bloat function isDecimalNumber(e){var h=e.which?e.which:e.keyCode;return!(46!=h&&h>31&&(h<48||h>57));} 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];}