PHP изображение base64, если изображение не отображается - PullRequest
Новая
       11

PHP изображение base64, если изображение не отображается

0 голосов
/ 31 января 2020

Я пытаюсь уменьшить изображение, если оно слишком велико. Пользователь загружает изображение, при необходимости изображение сокращается, затем изображение выводится на холст для пользователя. Загруженное изображение НЕ ДОЛЖНО быть сохранено на сервере в течение длительного времени или вообще, если этого можно избежать. Для этого я преобразовал изображение в base64 uri, но при выводе uri изображение возвращается как разорванное. 

if (!empty($_FILES)) {
  $maxDim = 800;
  $name = $_FILES['file']['name'];
  $file_name = $_FILES['file']['tmp_name'];
  $extension = explode(".", $name);
  $extension = end($extension);
  list($width, $height, $type, $attr) = getimagesize( $file_name );
  if ( $width > $maxDim || $height > $maxDim ) {
      $target_filename = $file_name;
      $ratio = $width/$height;
      if( $ratio > 1) {
          $new_width = $maxDim;
          $new_height = $maxDim/$ratio;
      } else {
          $new_width = $maxDim*$ratio;
          $new_height = $maxDim;
      }
  }
  else
  {
    $new_width = $width;
    $new_height= $height;
  }
  $src = imagecreatefromstring( file_get_contents( $file_name ) );
  $dst = imagecreatetruecolor( $new_width, $new_height );
  imagecopyresampled( $dst, $src, 0, 0, 0, 0, $new_width, $new_height, $width, $height );
  imagedestroy( $src );
  ob_start();
  imagejpeg( $dst, $target_filename ); // adjust format as needed
  $contents = ob_get_contents();
  ob_end_clean();
  $url = rtrim(strtr(base64_encode($contents), '+/', '-_'), '=');
  $image_data = "data:image/$extension;base64,$url";
  echo "<img src='$image_data'/>";
  imagedestroy( $dst );
}

Это пример возвращаемого uri: 

data:image/jpg;base64,PGJyIC8-Cjxmb250IHNpemU9JzEnPjx0YWJsZSBjbGFzcz0neGRlYnVnLWVycm9yIHhlLW5vdGljZScgZGlyPSdsdHInIGJvcmRlcj0nMScgY2VsbHNwYWNpbmc9JzAnIGNlbGxwYWRkaW5nPScxJz4KPHRyPjx0aCBhbGlnbj0nbGVmdCcgYmdjb2xvcj0nI2Y1NzkwMCcgY29sc3Bhbj0iNSI-PHNwYW4gc3R5bGU9J2JhY2tncm91bmQtY29sb3I6ICNjYzAwMDA7IGNvbG9yOiAjZmNlOTRmOyBmb250LXNpemU6IHgtbGFyZ2U7Jz4oICEgKTwvc3Bhbj4gTm90aWNlOiBVbmRlZmluZWQgdmFyaWFibGU6IHRhcmdldF9maWxlbmFtZSBpbiBDOlxXYW1wXHd3d1xzY2VudGltZW50YWxcd3AtY29udGVudFx0aGVtZXNcc2NlbnRpbWVudGFsXHJlZHVjZS1waG90by1zaXplLnBocCBvbiBsaW5lIDxpPjMwPC9pPjwvdGg-PC90cj4KPHRyPjx0aCBhbGlnbj0nbGVmdCcgYmdjb2xvcj0nI2U5Yjk2ZScgY29sc3Bhbj0nNSc-Q2FsbCBTdGFjazwvdGg-PC90cj4KPHRyPjx0aCBhbGlnbj0nY2VudGVyJyBiZ2NvbG9yPScjZWVlZWVjJz4jPC90aD48dGggYWxpZ249J2xlZnQnIGJnY29sb3I9JyNlZWVlZWMnPlRpbWU8L3RoPjx0aCBhbGlnbj0nbGVmdCcgYmdjb2xvcj0nI2VlZWVlYyc-TWVtb3J5PC90aD48dGggYWxpZ249J2xlZnQnIGJnY29sb3I9JyNlZWVlZWMnPkZ1bmN0aW9uPC90aD48dGggYWxpZ249J2xlZnQnIGJnY29sb3I9JyNlZWVlZWMnPkxvY2F0aW9uPC90aD48L3RyPgo8dHI-PHRkIGJnY29sb3I9JyNlZWVlZWMnIGFsaWduPSdjZW50ZXInPjE8L3RkPjx0ZCBiZ2NvbG9yPScjZWVlZWVjJyBhbGlnbj0nY2VudGVyJz4wLjAwMDk8L3RkPjx0ZCBiZ2NvbG9yPScjZWVlZWVjJyBhbGlnbj0ncmlnaHQnPjI2NjA4MDwvdGQ-PHRkIGJnY29sb3I9JyNlZWVlZWMnPnttYWlufSggICk8L3RkPjx0ZCB0aXRsZT0nQzpcV2FtcFx3d3dcc2NlbnRpbWVudGFsXHdwLWNvbnRlbnRcdGhlbWVzXHNjZW50aW1lbnRhbFxyZWR1Y2UtcGhvdG8tc2l6ZS5waHAnIGJnY29sb3I9JyNlZWVlZWMnPi4uLlxyZWR1Y2UtcGhvdG8tc2l6ZS5waHA8Yj46PC9iPjA8L3RkPjwvdHI-CjwvdGFibGU-PC9mb250Pgr_2P_gABBKRklGAAEBAAABAAEAAP_-AD5DUkVBVE9SOiBnZC1qcGVnIHYxLjAgKHVzaW5nIElKRyBKUEVHIHY5MCksIGRlZmF1bHQgcXVhbGl0eQr_2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL_2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL_wAARCAAyAGQDASIAAhEBAxEB_8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL_8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4-Tl5ufo6erx8vP09fb3-Pn6_8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL_8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3-Pn6_9oADAMBAAIRAxEAPwDwDaaCpHWgHHSnxMPNUOfkJG76UAMxRitn-zo3uhDtKgtgHPPsfQ1au_DUWnWbXd1fRrEeI0H35D6Af16Vk6sU7GnspWuc5il2krmlk2bvk3Y9T3p0IBnjB24LD73Tr39q1ILel6Pe6rKyWtu0gUEs-dqr9T0FVp7Z4JWRsEqSCVORXr2j-JvB2lWlxBNBItzdRqLkQSutqTjacDORkDJwO-Paud1e5g1m9kj06GCNXfZG_ARyBwuOvr9eM1yfWJc9uXQ3VJOO-p59tOM0mK13tb6dZLl7PbHEBvdY_lHbqOM1RL-ZIAsSntgDrXQpXMnGxWxRitBbCRmCmJi7DKpH8xNVrmM21w8RwXTg4OcHvTUricbEGKKM0VRIDHcZpKU_WigDW0fU7W1LxX8M0kLIQjwsFkjfGAQT1A9OKhlIuGCLK0sQOVeRgGH1z0-lZ1W7ZYZYpI3cpLwYzjIY_wB0-ntUOKT5i1JvRleRCjlf1pY-TgNtNSrFwSwyF61XPWqTuS1YneEoeWB9xU8AKAeZK0YALI2MjPbH-NRWZtxKwuVdo9jYCHB3Y4qWd5GtoIWk-RQTGuPugkk1L7FLuSRahPPchJZyFYjLE4GfU1Pa3EMkrtImww9HQYB7c-n1rHOQakhuHgLbTwwKsp6MPehwXQFN9S1dTPNbrIWUbWK4HBwR1_Q1QNSllK8qQ3Y5zTWHTC9e9UlbQUtdSOin7RnBI4opkjKKKXFACVNakLMGPYEj61FilXAYEk49qGNEtxMZmAChQOgHf3qCnuwZsqoUe1Nx60IHuOjcxyK4AODnBGQadNO87hnI4GAAMACo8L60ce9AXDk0lO-XHek4oELvzjgcVLLMjRokabe7c5yf8Kg4p6LvbA49zQMlkFspVVZ3IHzMOAT7ZFFQEYOM0UBcKKKKBBSd6KKAFNJRRQAUUUUAFFFFABRRRQAZNFFFAH__2Q

вот один без каких-либо изменений после его преобразования 

data:image/jpg;base64,PGJyIC8+Cjxmb250IHNpemU9JzEnPjx0YWJsZSBjbGFzcz0neGRlYnVnLWVycm9yIHhlLW5vdGljZScgZGlyPSdsdHInIGJvcmRlcj0nMScgY2VsbHNwYWNpbmc9JzAnIGNlbGxwYWRkaW5nPScxJz4KPHRyPjx0aCBhbGlnbj0nbGVmdCcgYmdjb2xvcj0nI2Y1NzkwMCcgY29sc3Bhbj0iNSI+PHNwYW4gc3R5bGU9J2JhY2tncm91bmQtY29sb3I6ICNjYzAwMDA7IGNvbG9yOiAjZmNlOTRmOyBmb250LXNpemU6IHgtbGFyZ2U7Jz4oICEgKTwvc3Bhbj4gTm90aWNlOiBVbmRlZmluZWQgdmFyaWFibGU6IHRhcmdldF9maWxlbmFtZSBpbiBDOlxXYW1wXHd3d1xzY2VudGltZW50YWxcd3AtY29udGVudFx0aGVtZXNcc2NlbnRpbWVudGFsXHJlZHVjZS1waG90by1zaXplLnBocCBvbiBsaW5lIDxpPjMwPC9pPjwvdGg+PC90cj4KPHRyPjx0aCBhbGlnbj0nbGVmdCcgYmdjb2xvcj0nI2U5Yjk2ZScgY29sc3Bhbj0nNSc+Q2FsbCBTdGFjazwvdGg+PC90cj4KPHRyPjx0aCBhbGlnbj0nY2VudGVyJyBiZ2NvbG9yPScjZWVlZWVjJz4jPC90aD48dGggYWxpZ249J2xlZnQnIGJnY29sb3I9JyNlZWVlZWMnPlRpbWU8L3RoPjx0aCBhbGlnbj0nbGVmdCcgYmdjb2xvcj0nI2VlZWVlYyc+TWVtb3J5PC90aD48dGggYWxpZ249J2xlZnQnIGJnY29sb3I9JyNlZWVlZWMnPkZ1bmN0aW9uPC90aD48dGggYWxpZ249J2xlZnQnIGJnY29sb3I9JyNlZWVlZWMnPkxvY2F0aW9uPC90aD48L3RyPgo8dHI+PHRkIGJnY29sb3I9JyNlZWVlZWMnIGFsaWduPSdjZW50ZXInPjE8L3RkPjx0ZCBiZ2NvbG9yPScjZWVlZWVjJyBhbGlnbj0nY2VudGVyJz4wLjAwMTI8L3RkPjx0ZCBiZ2NvbG9yPScjZWVlZWVjJyBhbGlnbj0ncmlnaHQnPjI2NTAzMjwvdGQ+PHRkIGJnY29sb3I9JyNlZWVlZWMnPnttYWlufSggICk8L3RkPjx0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

Почему это не выводит рабочее изображение?

...