sneedgroup-holder/openOutpaint
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finally

Browse source
This commit is contained in:
tim h 2022-11-27 13:21:17 -06:00
parent d91519226f
commit 2574793e4f
1 changed files with 40 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
js/ui/tool/dream.js
View file

@ -47,12 +47,16 @@ const dream_generate_callback = (evn, state) => {
// Get init image
auxCtx.fillRect(0, 0, bb.w, bb.h);
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
// console.log("drawImage imgCanvas:\n" + auxCanvas.toDataURL());
request.init_images = [auxCanvas.toDataURL()];
// Get mask image
auxCtx.fillStyle = "#000F";
auxCtx.fillRect(0, 0, bb.w, bb.h);
// console.log("auxCtx fillRect #000F:\n" + auxCanvas.toDataURL());
if (state.invertMask) {
// overmasking by definition is entirely pointless with an inverted mask outpaint
// since it should explicitly avoid brushed masks too, we just won't even bother
auxCtx.globalCompositeOperation = "destination-in";
auxCtx.drawImage(
maskPaintCanvas,
@ -65,13 +69,32 @@ const dream_generate_callback = (evn, state) => {
bb.w,
bb.h
);
// console.log(
// "invertMask drawImage maskPaintCanvas dest-in:\n" +
// auxCanvas.toDataURL()
// );
auxCtx.globalCompositeOperation = "destination-in";
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
// console.log(
// "invertMask drawImage imgCanvas dest-in:\n" + auxCanvas.toDataURL()
// );
} else {
auxCtx.globalCompositeOperation = "destination-in";
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
auxCtx.globalCompositeOperation = "destination-out";
// console.log("drawImage imgCanvas dest-in:\n" + auxCanvas.toDataURL());
// here's where to overmask to avoid including the brushed mask - 99% of my issues were from failing to set source-over for the overmask blotches
if (state.overMaskPx > 0) {
// transparent to white first
auxCtx.globalCompositeOperation = "destination-atop";
auxCtx.fillStyle = "#FFFF";
auxCtx.fillRect(0, 0, bb.w, bb.h);
// console.log("pre-overmask fillRect #FFFF:\n" + auxCanvas.toDataURL());
applyOvermask(auxCanvas, auxCtx, state.overMaskPx);
// console.log("overmask applied:\n" + auxCanvas.toDataURL());
}
auxCtx.globalCompositeOperation = "destination-out"; // ???
auxCtx.drawImage(
maskPaintCanvas,
bb.x,
@ -83,15 +106,15 @@ const dream_generate_callback = (evn, state) => {
bb.w,
bb.h
);
// console.log(
// "drawImage maskPaintCanvas dest-out:\n" + auxCanvas.toDataURL()
// );
}
auxCtx.globalCompositeOperation = "destination-atop";
auxCtx.fillStyle = "#FFFF";
auxCtx.fillRect(0, 0, bb.w, bb.h);
var currentMask = auxCanvas.toDataURL();
request.mask =
state.overMaskPx > 0
? applyOvermask(auxCanvas, auxCtx, state.overMaskPx, currentMask)
: currentMask;
// console.log("fillRect #FFFF dest-atop:\n" + auxCanvas.toDataURL());
request.mask = auxCanvas.toDataURL();
// Dream
dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
}
@ -112,21 +135,17 @@ function applyOvermask(canvas, ctx, px) {
// :badpokerface: look it might be all placebo but i like overmask lol
// yes it's crushingly inefficient i knooow :( must fix
// https://stackoverflow.com/a/30204783 was instrumental to this working or completely to blame for this disaster depending on your interpretation
const tmpOvermaskCanvas = document.createElement("canvas");
tmpOvermaskCanvas.width = canvas.width;
tmpOvermaskCanvas.height = canvas.height;
var ctxImgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const omCtx = tmpOvermaskCanvas.getContext("2d");
omCtx.putImageData(ctxImgData, 0, 0);
// console.log("submitted canvas to overmask:\n" + canvas.toDataURL());
for (i = 0; i < ctxImgData.data.length; i += 4) {
if (ctxImgData.data[i] == 255) {
// white pixel?
// just blotch all over the thing
var rando = Math.floor(Math.random() * px);
omCtx.beginPath();
omCtx.arc(
(i / 4) % tmpOvermaskCanvas.width,
Math.floor(i / 4 / tmpOvermaskCanvas.width),
ctx.beginPath();
ctx.arc(
(i / 4) % canvas.width,
Math.floor(i / 4 / canvas.width),
scaleFactor +
rando +
(rando > scaleFactor ? rando / scaleFactor : scaleFactor / rando), // was 4 * sf + rando, too big, but i think i want it more ... random
@ -134,11 +153,14 @@ function applyOvermask(canvas, ctx, px) {
2 * Math.PI,
true
);
omCtx.fillStyle = "#FFFFFFFF";
omCtx.fill();
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle = "#FFFF";
ctx.fill();
// if (i % 100000 == 0) {
// console.log("blotched src-over:\n" + canvas.toDataURL());
// }
}
}
return tmpOvermaskCanvas.toDataURL();
}
/**