added resource upscale
This commit is contained in:
parent
556ec5cb7b
commit
15385773c2
3 changed files with 56 additions and 12 deletions
|
@ -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");
|
||||||
|
}
|
||||||
|
|
35
js/index.js
35
js/index.js
|
@ -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")
|
||||||
|
|
|
@ -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};
|
||||||
|
|
Loading…
Reference in a new issue