Можно ли средствами js изменить содержимое загруженного файла-картинки и скачать его?

Question

[SenQuestion]

Есть файл-картинка image.png
С помощью любого HEX-редактора можно добавить случайные символы в конец его содержимого и получить новый файл-картинку new-image.png, который в программе просмотра изображений не будет отличаться от первой.

Можно ли подобное сделать, используя JS? Например:
Загружаем файл-картинку image.png с помощью <input type="file">
Затем читаем его с помощью FileReader:

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

На выходе fr.result выдает много букв.
Можно ли, имея строку fr.result + "randomSymbols", создать новый файл-картинку new-image.png, удовлетворяющую вышеописанным условиям?

Answer 1

[Aetae]

Можно. Только не readAsText, а readAsArrayBuffer.
Условно так:
toAppend может быть и строкой - тогда она будет закодирована как utf-8.

Answer 2

[profesor08]

https://developer.mozilla.org/en-US/docs/Web/API/F...
https://developer.mozilla.org/ru/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,
});