title: PHP HTML display img src using output buffer - end up with broken image
body: <p>I am trying to write a script that takes two png images, one is a watermark and the other one is a source image. What the code will do is it will call on a function that does an imagecopy and blend the two images into one, and display on the browser. However, I always end up with a broken image. </p>
  
  <p>I don't want to save the image, I just want the browser to display the source image with the watermark on. 
  I have also checked the file permission, the function itself works fine when it's alone. The correct image is showing using imagepng</p>
  
  <p>Below is my testing code:</p>
  
  <pre><code>&lt;?php
  ob_start();
  showimage();
  $image = ob_get_contents();
  $data = base64_encode($image);
  ob_clean();
  
  echo "&lt;h1&gt; hello &lt;/h1&gt;";
  echo "&lt;img src='data:image/png;base64," . $data . "'/&gt;";
  
  function showimage() {
      $target_dir = "./uploads/";
      $src = imagecreatefrompng($target_dir.'watermark.png');
      $dest = imagecreatefrompng($target_dir.'greenblobburnt.png');
  
      imagealphablending($dest, true);
      imagealphablending($src, true);
      imagesavealpha($dest, true);
      imagesavealpha($src, true);
      imagecopy ($dest,$src, 5, imagesy($dest) - (imagesy($src)+5), 0, 0,imagesx($src),imagesy($src));
      imagealphablending($dest, true);
      imagesavealpha($dest, true);
      // Output and free from memory
      header('Content-Type: image/png');
      imagepng($dest);
      imagedestroy($dest);
      imagedestroy($src);
  }
  ?&gt;
  </code></pre>