Javascript-canvas for 64-bit image merging screenshots Post-upload compression

I am working on a mobile phone page. the requirement is: on a template image, users can enter information in the input box, and then I use the HTML2canvas plug-in to take screenshots of the page, then share the image. Because my company's publishing platform cannot put pictures, so this template picture is put in my personal...

I am working on a mobile phone page. the requirement is: on a template image, users can enter information in the input box, and then I use the HTML2canvas plug-in to take screenshots of the page, then share the image. Because my company's publishing platform does not support pictures, this template picture is placed on my personal server. the URL of the picture is www.myself.com/aa.png. Then, the URL of my webpage is www.gongsi.com/index.html. Then, when a canvas screenshot is used, the cross-origin screenshot is not displayed, so I wrote a php interface on my server to upload the image to the front end using a 64-bit code:
Php code:

$ File = ".. /img/p6.png "; $ type = getimagesize ($ file); // Obtain the image size, type, etc. $ fp = fopen ($ file," r ") or die ("Can't open file"); $ file_content = chunk_split (base64_encode (fread ($ fp, filesize ($ file )))); // base64 encoded switch ($ type [2]) {// interpret the image type case 1: $ img_type = "gif"; break; case 2: $ img_type = "jpg "; break; case 3: $ img_type = "png"; break;} $ img = 'data: image /'. $ img_type. '; base64 ,'. $ file_content; // base64 encoded fclose ($ fp) of the merged image; echo $ _ GET ['callback']. "(". json_encode (array ('IMG '=> $ img )). ")";

After receiving the message, the front-end directly sets the img label src attribute:

imgDiv.setAttribute("src", data.img);

At this time, the src attribute of the img label is a bunch of 64-bit codes. The image can be normally displayed, and screenshots can be taken through HTML2canvas:

Html2canvas (screen, {width: $ (". capture_screen "). width (), height: $ (". capture_screen "). height (), canvas: canvas, onrendered: function (canvas) {sendImg (canvas. toDataURL (); // send a 64-bit code to the server }})

And the code received by the backend php is:

Define ('upload _ dir ','.. /images/'); $ img =$ _ POST ['IMG']; $ img = str_replace ('data: image/png; base64 ,','', $ img); $ img = str_replace ('', '+', $ img); $ data = base64_decode ($ img); $ file = UPLOAD_DIR. uniqid (). '.png '; $ success = file_put_contents ($ file, $ data); if ($ success) {$ imgStatus = 1; echo json_encode (array ('status' => '1 ', 'imgstatus' => $ imgStatus, 'IMG '=> $ file); // storage successful} else {$ imgStatus =-1; echo json_encode (array ('status' => '-1', 'MSG '=> 'Storage failed'); // storage failed}

In this way, the whole process is over, and some images uploaded by users on the server are displayed normally, and some images are compressed:

I would like to ask: What is the problem of image compression?

Reply content:

I am working on a mobile phone page. the requirement is: on a template image, users can enter information in the input box, and then I use the HTML2canvas plug-in to take screenshots of the page, then share the image. Because my company's publishing platform does not support pictures, this template picture is placed on my personal server. the URL of the picture is www.myself.com/aa.png. Then, the URL of my webpage is www.gongsi.com/index.html. Then, when a canvas screenshot is used, the cross-origin screenshot is not displayed, so I wrote a php interface on my server to upload the image to the front end using a 64-bit code:
Php code:

$ File = ".. /img/p6.png "; $ type = getimagesize ($ file); // Obtain the image size, type, etc. $ fp = fopen ($ file," r ") or die ("Can't open file"); $ file_content = chunk_split (base64_encode (fread ($ fp, filesize ($ file )))); // base64 encoded switch ($ type [2]) {// interpret the image type case 1: $ img_type = "gif"; break; case 2: $ img_type = "jpg "; break; case 3: $ img_type = "png"; break;} $ img = 'data: image /'. $ img_type. '; base64 ,'. $ file_content; // base64 encoded fclose ($ fp) of the merged image; echo $ _ GET ['callback']. "(". json_encode (array ('IMG '=> $ img )). ")";

After receiving the message, the front-end directly sets the img label src attribute:

imgDiv.setAttribute("src", data.img);

At this time, the src attribute of the img label is a bunch of 64-bit codes. The image can be normally displayed, and screenshots can be taken through HTML2canvas:

Html2canvas (screen, {width: $ (". capture_screen "). width (), height: $ (". capture_screen "). height (), canvas: canvas, onrendered: function (canvas) {sendImg (canvas. toDataURL (); // send a 64-bit code to the server }})

And the code received by the backend php is:

Define ('upload _ dir ','.. /images/'); $ img =$ _ POST ['IMG']; $ img = str_replace ('data: image/png; base64 ,','', $ img); $ img = str_replace ('', '+', $ img); $ data = base64_decode ($ img); $ file = UPLOAD_DIR. uniqid (). '.png '; $ success = file_put_contents ($ file, $ data); if ($ success) {$ imgStatus = 1; echo json_encode (array ('status' => '1 ', 'imgstatus' => $ imgStatus, 'IMG '=> $ file); // storage successful} else {$ imgStatus =-1; echo json_encode (array ('status' => '-1', 'MSG '=> 'Storage failed'); // storage failed}

In this way, the whole process is over, and some images uploaded by users on the server are displayed normally, and some images are compressed:

I would like to ask: What is the problem of image compression?