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

Merge pull request #57 from zero01101/fix_overmask_before_brush_mask_already

Browse source 
fixes overmask application before brush mask
This commit is contained in:
tim h 2022-11-27 13:26:04 -06:00 committed by GitHub
commit 5600d360fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -53,6 +53,8 @@ const dream_generate_callback = (evn, state) => {
auxCtx.fillStyle = "#000F"; auxCtx.fillStyle = "#000F";
auxCtx.fillRect(0, 0, bb.w, bb.h); auxCtx.fillRect(0, 0, bb.w, bb.h);
if (state.invertMask) { 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.globalCompositeOperation = "destination-in";
auxCtx.drawImage( auxCtx.drawImage(
maskPaintCanvas, maskPaintCanvas,
@ -71,7 +73,17 @@ const dream_generate_callback = (evn, state) => {
} else { } else {
auxCtx.globalCompositeOperation = "destination-in"; auxCtx.globalCompositeOperation = "destination-in";
auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h); auxCtx.drawImage(imgCanvas, bb.x, bb.y, bb.w, bb.h, 0, 0, bb.w, bb.h);
auxCtx.globalCompositeOperation = "destination-out"; // 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);
applyOvermask(auxCanvas, auxCtx, state.overMaskPx);
}
auxCtx.globalCompositeOperation = "destination-out"; // ???
auxCtx.drawImage( auxCtx.drawImage(
maskPaintCanvas, maskPaintCanvas,
bb.x, bb.x,
@ -87,11 +99,7 @@ const dream_generate_callback = (evn, state) => {
auxCtx.globalCompositeOperation = "destination-atop"; auxCtx.globalCompositeOperation = "destination-atop";
auxCtx.fillStyle = "#FFFF"; auxCtx.fillStyle = "#FFFF";
auxCtx.fillRect(0, 0, bb.w, bb.h); auxCtx.fillRect(0, 0, bb.w, bb.h);
var currentMask = auxCanvas.toDataURL(); request.mask = auxCanvas.toDataURL();
request.mask =
state.overMaskPx > 0
? applyOvermask(auxCanvas, auxCtx, state.overMaskPx, currentMask)
: currentMask;
// Dream // Dream
dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb}); dream(bb.x, bb.y, request, {method: "img2img", stopMarching, bb});
} }
@ -112,21 +120,17 @@ function applyOvermask(canvas, ctx, px) {
// :badpokerface: look it might be all placebo but i like overmask lol // :badpokerface: look it might be all placebo but i like overmask lol
// yes it's crushingly inefficient i knooow :( must fix // 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 // 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"); ctx.globalCompositeOperation = "source-over";
tmpOvermaskCanvas.width = canvas.width;
tmpOvermaskCanvas.height = canvas.height;
var ctxImgData = ctx.getImageData(0, 0, canvas.width, canvas.height); var ctxImgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const omCtx = tmpOvermaskCanvas.getContext("2d");
omCtx.putImageData(ctxImgData, 0, 0);
for (i = 0; i < ctxImgData.data.length; i += 4) { for (i = 0; i < ctxImgData.data.length; i += 4) {
if (ctxImgData.data[i] == 255) { if (ctxImgData.data[i] == 255) {
// white pixel? // white pixel?
// just blotch all over the thing // just blotch all over the thing
var rando = Math.floor(Math.random() * px); var rando = Math.floor(Math.random() * px);
omCtx.beginPath(); ctx.beginPath();
omCtx.arc( ctx.arc(
(i / 4) % tmpOvermaskCanvas.width, (i / 4) % canvas.width,
Math.floor(i / 4 / tmpOvermaskCanvas.width), Math.floor(i / 4 / canvas.width),
scaleFactor + scaleFactor +
rando + rando +
(rando > scaleFactor ? rando / scaleFactor : scaleFactor / rando), // was 4 * sf + rando, too big, but i think i want it more ... random (rando > scaleFactor ? rando / scaleFactor : scaleFactor / rando), // was 4 * sf + rando, too big, but i think i want it more ... random
@ -134,11 +138,10 @@ function applyOvermask(canvas, ctx, px) {
2 * Math.PI, 2 * Math.PI,
true true
); );
omCtx.fillStyle = "#FFFFFFFF"; ctx.fillStyle = "#FFFF";
omCtx.fill(); ctx.fill();
} }
} }
return tmpOvermaskCanvas.toDataURL();
} }
/** /**