added resource upscale

This commit is contained in:
AlexL 2024-01-04 17:39:35 +01:00
parent 556ec5cb7b
commit 15385773c2
3 changed files with 56 additions and 12 deletions

View file

@ -449,3 +449,8 @@ select > option:checked::after {
-webkit-mask-image: url("../../res/icons/download.svg"); -webkit-mask-image: url("../../res/icons/download.svg");
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");
}

View file

@ -1430,7 +1430,7 @@ async function getSamplers() {
} }
} }
async function upscaleAndDownload(download = false, add_resource = false) { 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 // 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 // get cropped canvas, send it to upscaler, download result
@ -1438,18 +1438,29 @@ async function upscaleAndDownload(download = false, add_resource = false) {
? localStorage.getItem("openoutpaint/upscale_x") ? localStorage.getItem("openoutpaint/upscale_x")
: 2; : 2;
var upscaler = upscalerAutoComplete.value; var upscaler = upscalerAutoComplete.value;
var croppedCanvas = cropCanvas( var croppedCanvas = null;
uil.getVisible({ var imgdata = null;
x: 0,
y: 0, if (aCanvas == null) {
w: imageCollection.size.w, console.log("Upscaling main canvas.");
h: imageCollection.size.h, croppedCanvas = cropCanvas(
}) uil.getVisible({
); x: 0,
if (croppedCanvas != null) { 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 = var url =
document.getElementById("host").value + "/sdapi/v1/extra-single-image/"; document.getElementById("host").value + "/sdapi/v1/extra-single-image/";
var imgdata = croppedCanvas.canvas.toDataURL("image/png");
var data = { var data = {
"resize-mode": 0, // 0 = just resize, 1 = crop and resize, 2 = resize and fill i assume based on theimg2img tabs options "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, upscaling_resize: upscale_factor,
@ -1486,7 +1497,7 @@ async function upscaleAndDownload(download = false, add_resource = false) {
console.log("Add upscaled to resource") console.log("Add upscaled to resource")
const img = new Image(); const img = new Image();
img.src = link.href; img.src = link.href;
tools.stamp.state.addResource("Upscaled image", img); tools.stamp.state.addResource(guid()+" (upscaled)", img);
} }
if (download == true){ if (download == true){
console.log("Download upscaled") console.log("Download upscaled")

View file

@ -284,6 +284,33 @@ const stampTool = () =>
saveButton.appendChild(document.createElement("div")); saveButton.appendChild(document.createElement("div"));
saveButton.classList.add("download-btn"); 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"); const trashButton = document.createElement("button");
trashButton.addEventListener( trashButton.addEventListener(
"click", "click",
@ -300,6 +327,7 @@ const stampTool = () =>
actionArray.appendChild(saveButton); actionArray.appendChild(saveButton);
actionArray.appendChild(trashButton); actionArray.appendChild(trashButton);
actionArray.appendChild(upscaleButton);
resourceWrapper.appendChild(actionArray); resourceWrapper.appendChild(actionArray);
state.ctxmenu.resourceList.appendChild(resourceWrapper); state.ctxmenu.resourceList.appendChild(resourceWrapper);
resource.dom = {wrapper: resourceWrapper}; resource.dom = {wrapper: resourceWrapper};