Read the picture file, convert the obtained Buffer into String, and then write String to Buffer into the new picture file. the new picture file cannot be displayed normally.

  node.js, question

The code is as follows

var fs = require('fs')
 
 var bf = fs.readFileSync('../../images/yun.jpg')
 var str = bf.toString()
 var cp = new Buffer(str)
 
 console.log(bf);
 // <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 01
 console.log(cp)
 // <Buffer ef bf bd 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 01
 //upper and lower Buffer values are different.
 
 fs.writeFileSync('./hah.jpg', cp);

If the encoding of toString and Buffer is set to base64, the result will be normal.

The reason has probably been found.
stackoverflow

Using the default .toString, this will corrupt the data, because it will try to parse the image’s binary data as UTF-8 data.

After making a stupid mistake in the comment section, I tested it myself. The code and some output results are as follows:

var fs = require('fs');
 var l = console.log;
 var bf = fs.readFileSync('./headicon.png');
 l(bf);
 // <Buffer 89 50 4e 47 0d 0a ... >
 var str = bf.toString();
 l(str);
 //console output a large number of garbled gobbledygook QAQ
 var cp = new Buffer(str);
 l(cp);
 // <Buffer ef bf bd 50 4e 47 ... >
 fs.writeFileSync('./hah.png', bf);

If the bf is directly output, the result is definitely right, but not after toString.
I tried this again:

var fs = require('fs');
 var l = console.log;
 var bf = fs.readFileSync('./headicon.png');
 l(bf);
 var str = bf.toString();
 var cp = new Buffer(str);
 l(cp);
 fs.writeFileSync('./hah.png', bf);
 fs.writeFileSync('./hah2.png', str);
 fs.writeFileSync('./hah3.png', cp);
 fs.writeFileSync('./hah.txt', bf);
 fs.writeFileSync('./hah2.txt', str);
 fs.writeFileSync('./hah3.txt', cp);

Write 6 documents respectively.
Hah.png is a normally accessible picture, picture informationPNG image-26kb;
Hah2.png cannot be accessed normally. Preview will report an error. Picture informationPNG image-47kb;
Hah3.png and hah2.png;
Hah.txt is also a 26kb file, put it in sublime, and the results are as follows:
clipboard.png
Hah2.txt is 47kb in size, and the sublime display result can be imagined without screenshots. Yesefbf bd50 ...These things.
Hah3.txt is the same as hah2.txt.

Then the question is, what changes have taken place when the Buffer object is toString?
So I changed a 12*12 size picture with a volume of 225B and retested it with the above code. The test results are as follows:
Hah.png is a normally accessible picture, picture informationPNG-225 bytes;
Hah2.png cannot be accessed normally. Preview will report an error. Picture informationPNG-383 bytes;
Hah3.png and hah2.png;
Txt and hah.txt, the results are as follows:
clipboard.png
Perhaps you have found the difference … Let’s adjust the format:
clipboard.png
That is to say, when the Buffer of the picture is performing toString (), the data information of the picture has changed for various reasons. Under the same test, the text file will not cause this kind of problem. The generated hah2.png was reprocessed and the following code was used (following the above code):

var bf2 = fs.readFileSync('./hah2.png');
 var str2 = bf.toString();
 var cp2 = new Buffer(str2);
 fs.writeFileSync('./hah4.png', cp2);

The picture information of hah4.png thus output isPNG-383 bytes, with hah3.png is exactly the same.
I have got such a conclusion for the time being, why the specific volume has become larger is still being tested, and if there are results, I will return to the updated QAQ;;

Well, basically there is already an answer, see the revised title of the title owner ~