Is it possible to change the contents of the uploaded image file using js and download it?

Question

JavaScript

There is an image file image.png
Using any HEX editor, you can add random characters to the end of its content and get a new image file new-image.png , which in the image viewer will not differ from the first one.

Can this be done using JS? For example:
Load image file image.png with Then read it with FileReader:<input type="file">

const fr = new FileReader();
fr.readAsText(file, "CP1251");

The output of fr.result is a lot of letters.
Is it possible, given the string fr.result + "randomSymbols" , to create a new image file new-image.png that satisfies the above conditions?

Answer 1

Can. Only not readAsText, but readAsArrayBuffer.
Conditionally like this:
toAppendcan also be a string - then it will be encoded as utf-8.

Answer 2

https://developer.mozilla.org/en-US/docs/Web/API/F...
https://developer.mozilla.org/en/docs/Web/API/Form...

const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

const file = new File([blob], "foo.txt", {
  type: "text/plain",
});

const formData = new FormData();
formData.append("foo-file", file, "foo.txt");

const reqsponse = await fetch("https://developer.mozilla.org/", {
  method: "POST",
  body: formData,
});