generally fix black when outpainting using addons

For some reason, when using some extensions, firefox just bugs out the
context after running a toDataURL. We now create a separate canvas for
mask drawing.
This commit is contained in:
Victor Seiji Hariki 2023-01-02 23:31:25 -03:00
parent 77c04e1a99
commit 7dfd35839b

View file

@ -816,16 +816,21 @@ const dream_generate_callback = async (bb, resolution, state) => {
bbCanvas.height = bb.h; bbCanvas.height = bb.h;
const bbCtx = bbCanvas.getContext("2d"); const bbCtx = bbCanvas.getContext("2d");
const reqCanvas = document.createElement("canvas"); const maskCanvas = document.createElement("canvas");
reqCanvas.width = request.width; maskCanvas.width = request.width;
reqCanvas.height = request.height; maskCanvas.height = request.height;
const reqCtx = reqCanvas.getContext("2d"); const maskCtx = maskCanvas.getContext("2d");
const initCanvas = document.createElement("canvas");
initCanvas.width = request.width;
initCanvas.height = request.height;
const initCtx = initCanvas.getContext("2d");
bbCtx.fillStyle = "#000F"; bbCtx.fillStyle = "#000F";
// Get init image // Get init image
reqCtx.fillRect(0, 0, request.width, request.height); initCtx.fillRect(0, 0, request.width, request.height);
reqCtx.drawImage( initCtx.drawImage(
visibleCanvas, visibleCanvas,
0, 0,
0, 0,
@ -836,7 +841,7 @@ const dream_generate_callback = async (bb, resolution, state) => {
request.width, request.width,
request.height request.height
); );
request.init_images = [reqCanvas.toDataURL()]; request.init_images = [initCanvas.toDataURL()];
// Get mask image // Get mask image
bbCtx.fillStyle = "#000F"; bbCtx.fillStyle = "#000F";
@ -890,8 +895,8 @@ const dream_generate_callback = async (bb, resolution, state) => {
bbCtx.fillStyle = "#FFFF"; bbCtx.fillStyle = "#FFFF";
bbCtx.fillRect(0, 0, bb.w, bb.h); bbCtx.fillRect(0, 0, bb.w, bb.h);
reqCtx.clearRect(0, 0, reqCanvas.width, reqCanvas.height); maskCtx.clearRect(0, 0, maskCanvas.width, maskCanvas.height);
reqCtx.drawImage( maskCtx.drawImage(
bbCanvas, bbCanvas,
0, 0,
0, 0,
@ -902,7 +907,7 @@ const dream_generate_callback = async (bb, resolution, state) => {
request.width, request.width,
request.height request.height
); );
request.mask = reqCanvas.toDataURL(); request.mask = maskCanvas.toDataURL();
// Dream // Dream
_generate("img2img", request, bb, { _generate("img2img", request, bb, {