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");
|
||||
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");
|
||||
}
|
||||
|
|
21
js/index.js
21
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
|
||||
|
||||
// get cropped canvas, send it to upscaler, download result
|
||||
|
@ -1438,7 +1438,12 @@ async function upscaleAndDownload(download = false, add_resource = false) {
|
|||
? localStorage.getItem("openoutpaint/upscale_x")
|
||||
: 2;
|
||||
var upscaler = upscalerAutoComplete.value;
|
||||
var croppedCanvas = cropCanvas(
|
||||
var croppedCanvas = null;
|
||||
var imgdata = null;
|
||||
|
||||
if (aCanvas == null) {
|
||||
console.log("Upscaling main canvas.");
|
||||
croppedCanvas = cropCanvas(
|
||||
uil.getVisible({
|
||||
x: 0,
|
||||
y: 0,
|
||||
|
@ -1446,10 +1451,16 @@ async function upscaleAndDownload(download = false, add_resource = false) {
|
|||
h: imageCollection.size.h,
|
||||
})
|
||||
);
|
||||
if (croppedCanvas != null) {
|
||||
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,
|
||||
|
@ -1486,7 +1497,7 @@ async function upscaleAndDownload(download = false, add_resource = false) {
|
|||
console.log("Add upscaled to resource")
|
||||
const img = new Image();
|
||||
img.src = link.href;
|
||||
tools.stamp.state.addResource("Upscaled image", img);
|
||||
tools.stamp.state.addResource(guid()+" (upscaled)", img);
|
||||
}
|
||||
if (download == true){
|
||||
console.log("Download upscaled")
|
||||
|
|
|
@ -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};
|
||||
|
|
Loading…
Reference in a new issue