Text overlay now works in nodeJS

[rishabhshuklax]

Concerns #1378

Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!

• tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR -- or run tests locally with npm test
• code is in uniquely-named feature branch and has no merge conflicts
• PR is descriptively titled
• ask @publiclab/is-reviewers for help, in a comment below
• Insert-step functionality is working correct as expected.

We're happy to help you get this ready -- don't be afraid to ask for help, and don't be discouraged if your tests fail at first!

If tests do fail, click on the red X to learn why by reading the logs.

Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
Please make sure to get at least two reviews before asking for merging the PR as that would make the PR more reliable on our part
Thanks!

[codecov]

Codecov Report

Merging #1518 into main will increase coverage by 0.09%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##             main    #1518      +/-   ##
==========================================
+ Coverage   66.64%   66.74%   +0.09%     
==========================================
  Files         130      130              
  Lines        2674     2682       +8     
  Branches      430      432       +2     
==========================================
+ Hits         1782     1790       +8     
  Misses        892      892

Impacted Files	Coverage Δ
src/modules/AddQR/Module.js	100% <ø> (ø)	⬆️
src/modules/DrawRectangle/DrawRectangle.js	100% <100%> (ø)	⬆️
src/modules/Gradient/Module.js	100% <100%> (ø)	⬆️

[harshkhandeparkar]

I think the info.json file for TextOverlay has a required field which needs to be removed. This field skips the test for this module.

[harshkhandeparkar]

Waiting for the tests....

[harshkhandeparkar]

Please fix the conflicts. Thanks!

[rishabhshuklax]

I am facing problem in running it in nodeJS after #1533, It is using Image element, but for some reason when I imported it from jsdom, the onload event is not firing and when I used ctx.putImageData instead of ctx.drawImage, text overlay stopped working for GIfs 😕 @ataata107 Why did you removed putImageData and used drawImage instead is there any major difference?

[harshkhandeparkar]

Is it not working currently?

[rishabhshuklax]

No, it isn't

[harshkhandeparkar]

#1533 was a dangerous PR. We need to do a followup soon and fix some things.

[rishabhshuklax]

Yes! It also broke #1546, It was working fine before #1533, after that it is not resizing the image

[harshkhandeparkar]

Hmm. Would you like to open an issue for this? Also mention some things which broke.

[rishabhshuklax]

Issue opened!
#1547

[ataata107]

@blurry-x-face I had to do that because putting pixels (of gifs) onto canvas was tampering the data. But instead if I used the source url it worked fine

[rishabhshuklax]

Ok, so after A LOT OF DEBUGGING, I finally found the reason why this was having problem running in node, turns out the problem was this

image-sequencer/src/modules/_nomodule/PixelManipulation.js

Line 292 in f6d5316

generateOutput();

generateOutput was getting called beore the extramanipulation was completed so generateOutput was getting run twice!! one time in pixelManipulation and one time in extramanipulation

image-sequencer/src/modules/TextOverlay/Module.js

Lines 15 to 17 in f6d5316

	pixels = require('./TextOverlay')(pixels, options, dataUri, () => {
	setRenderState(true);
	generateOutput();

Therefore in node the output was generated from the first generateOutput call hence the image was not getting changed because the way image is generated from cli is that it generates the image the first time generateOutput is called, so to fix this what we can do is:

if (options.extraManipulation){
  frames[f] = options.extraManipulation(framePix, setRenderState, generateOutput) || framePix; // extraManipulation is used to manipulate each pixel individually.
  perFrameShape = frames[f].shape;
}else
  generateOutput();

And then each module that uses extramanipulation we have to call generateOutput after extramanipulation is completed like we do in text-overlay! 😩

image-sequencer/src/modules/TextOverlay/Module.js

Lines 15 to 17 in f6d5316

	pixels = require('./TextOverlay')(pixels, options, dataUri, () => {
	setRenderState(true);
	generateOutput();

I'll open an issue regarding this and make a PR for it super soon!
@jywarren @harshkhandeparkar I want your thoughts on it!

[harshkhandeparkar]

Needs a small rebase.