Merge pull request #278 from Hangover3832/upscale_enhancement

Upscale enhancements

css/ui/generic.css

@@ -449,3 +449,8 @@ select > option:checked::after {
 	-webkit-mask-image: url("../../res/icons/download.svg");
 	mask-image: url("../../res/icons/download.svg");
 }
+
+.list .actions > .upscale-btn > *:first-child {
+	-webkit-mask-image: url("../../res/icons/scaling.svg");
+	mask-image: url("../../res/icons/scaling.svg");
+}

index.html

@@ -294,8 +294,11 @@
 					<label>Choose upscaler</label>
 					<div id="upscaler-ac-select"></div>
 					<div id="upscaleX"></div>
-					<button onclick="upscaleAndDownload()">
-						Upscale (might take a sec)
+					<button onclick="upscaleAndDownload(true,false)">
+						Upscale (and download)
+					</button>
+					<button onclick="upscaleAndDownload(false,true)">
+						Upscale (to resource)
 					</button>
 					<br />
 

js/index.js

@@ -1186,7 +1186,11 @@ async function getUpscalers() {
 		return {name: u, value: u};
 	});
 
-	upscalerAutoComplete.value = upscalers[0];
+	upscalerAutoComplete.value = 
+		localStorage.getItem("openoutpaint/upscaler") === null
+		? upscalers[0]
+		: localStorage.getItem("openoutpaint/upscaler");
+
 	hrFixUpscalerAutoComplete.value =
 		localStorage.getItem("openoutpaint/hr_upscaler") === null
 			? "None"
@@ -1430,7 +1434,7 @@ async function getSamplers() {
 	}
 }
 
-async function upscaleAndDownload() {
+async function upscaleAndDownload(download = false, add_resource = false, aCanvas = null) {
 	// Future improvements: some upscalers take a while to upscale, so we should show a loading bar or something, also a slider for the upscale amount
 
 	// get cropped canvas, send it to upscaler, download result
@@ -1438,18 +1442,30 @@ async function upscaleAndDownload() {
 		? localStorage.getItem("openoutpaint/upscale_x")
 		: 2;
 	var upscaler = upscalerAutoComplete.value;
-	var croppedCanvas = cropCanvas(
-		uil.getVisible({
-			x: 0,
-			y: 0,
-			w: imageCollection.size.w,
-			h: imageCollection.size.h,
-		})
-	);
-	if (croppedCanvas != null) {
+	var croppedCanvas = null;
+	var imgdata = null;
+	localStorage.setItem("openoutpaint/upscaler", upscaler);
+
+	if (aCanvas == null) {
+		console.log("Upscaling main canvas.");
+		croppedCanvas = cropCanvas(
+			uil.getVisible({
+				x: 0,
+				y: 0,
+				w: imageCollection.size.w,
+				h: imageCollection.size.h,
+			})
+		);
+		imgdata = croppedCanvas.canvas.toDataURL("image/png");
+	} else {
+		console.log("Upscaling recourse canvas.");
+		imgdata = aCanvas.toDataURL("image/png");
+	}
+
+	if (imgdata != null) {
 		var url =
 			document.getElementById("host").value + "/sdapi/v1/extra-single-image/";
-		var imgdata = croppedCanvas.canvas.toDataURL("image/png");
+
 		var data = {
 			"resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options
 			upscaling_resize: upscale_factor,
@@ -1481,7 +1497,17 @@ async function upscaleAndDownload() {
 					upscale_factor +
 					".png";
 				link.href = "data:image/png;base64," + data["image"];
-				link.click();
+
+				if (add_resource == true) {
+					console.log("Add upscaled to resource")
+					const img = new Image();
+					img.src = link.href;
+					tools.stamp.state.addResource(guid()+" (upscaled)", img);
+				}
+				if (download == true){
+					console.log("Download upscaled")
+					link.click();
+				}
 			});
 	}
 }
@@ -1529,8 +1555,7 @@ function loadSettings() {
 	document.getElementById("seed").value = Number(_seed);
 	document.getElementById("cbxHRFix").checked = Boolean(_enable_hr);
 	document.getElementById("cbxRestoreFaces").checked = Boolean(_restore_faces);
-	document.getElementById("cbxSyncCursorSize").checked =
-		Boolean(_sync_cursor_size);
+	document.getElementById("cbxSyncCursorSize").checked = Boolean(_sync_cursor_size);
 	document.getElementById("hrFixScale").value = Number(_hrfix_scale);
 	document.getElementById("hrDenoising").value = Number(_hrfix_denoising);
 	document.getElementById("hrFixLockPx").value = Number(_hrfix_lock_px);

js/ui/tool/stamp.js

@@ -284,6 +284,33 @@ const stampTool = () =>
 							saveButton.appendChild(document.createElement("div"));
 							saveButton.classList.add("download-btn");
 
+							const upscaleButton = document.createElement("button");
+							upscaleButton.addEventListener(
+								"click",
+								(evn) => {
+									evn.stopPropagation();
+									const canvas = document.createElement("canvas");
+									canvas.width = resource.image.width;
+									canvas.height = resource.image.height;
+									canvas.getContext("2d").drawImage(resource.image, 0, 0);
+									console.log("[Stamp]", canvas);
+									upscaleAndDownload(false,true,canvas);
+
+									/*
+									downloadCanvas({
+										canvas,
+										filename: `openOutpaint - resource '${resource.name}'.png`,
+								
+									});
+									*/
+								},
+								{passive: false}
+							);
+							upscaleButton.title = "Upscale Resource";
+							upscaleButton.appendChild(document.createElement("div"));
+							upscaleButton.classList.add("upscale-btn");
+
+
 							const trashButton = document.createElement("button");
 							trashButton.addEventListener(
 								"click",
@@ -300,6 +327,7 @@ const stampTool = () =>
 
 							actionArray.appendChild(saveButton);
 							actionArray.appendChild(trashButton);
+							actionArray.appendChild(upscaleButton);
 							resourceWrapper.appendChild(actionArray);
 							state.ctxmenu.resourceList.appendChild(resourceWrapper);
 							resource.dom = {wrapper: resourceWrapper};