图片显示使用php不影响html代码

Question

我有一个关于使用函数 getImage_w($image,$dst_w) 显示图像的问题，该函数获取图像 URL ($image) 和该图像的目标宽度 ($size)。然后它重新绘制图像，根据目标宽度改变其高度。

这就是函数（在 libs/image.php 文件中）：

function getImage_w($image,$w){
       /*** get The extension of the image****/
      $ext= strrchr($image, ".");
       /***check if the extesion is a jpeg***/
        if (strtolower($ext)=='.jpg' || strtolower($ext)=='.jpeg'){
       /***send the headers****/
        header('Content-type: image/jpeg');
        /**get the source image***/
        $src_im_jpg=imagecreatefromjpeg($image);
        /****get the source image size***/
        $size=getimagesize($image);
        $src_w=$size[0];
        $src_h=$size[1];
        /****calculate the distination height based on the destination width****/
        $dst_w=$w;
        $dst_h=round(($dst_w/$src_w)*$src_h);
        $dst_im=imagecreatetruecolor($dst_w,$dst_h);
        /**** create a jpeg image with the new dimensions***/
        imagecopyresampled($dst_im,$src_im_jpg,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h);
        imagejpeg($dst_im);
}

在一个文件 imagetest.php 我有这个代码部分：

<?php
require 'libs/image.php';
echo '<h1>HELLO WORLD : some html</h1>
<img src="'.displayImg_w('http://www.sanctius.net/wp-content/uploads/2010/05/Avatar-20.jpg',200).'">
';

过去，我使用 $_GET 参数来编写 URL 来定义图像。但是现在，我想直接在我的代码中使用这个函数。

问题是图像显示正确，但是

Hello World

浏览器不翻译 HTML 代码（我知道第一个代码已经发送了标头）但是我想知道如何正确显示图像而不影响 html 代码。并且也没有使用将图像的 URL 更改为这种不需要的形式的 get 参数：

libs/image.php?image=http://www.example.com/image&width=200

Answer 1

在我之前完全错误的答案之后，我希望以此来弥补它。试试这个代码：

<?php

  function getImage_w($image,$w){
    // Get the extension of the file
    $file = explode('.',basename($image));
    $ext = array_pop($file);
    // These operations are the same regardless of file-type
    $size = getimagesize($image);
    $src_w = $size[0];
    $src_h = $size[1];
    $dst_w = $w;
    $dst_h = round(($dst_w/$src_w)*$src_h);
    $dst_im = imagecreatetruecolor($dst_w,$dst_h);
    // These operations are file-type specific
    switch (strtolower($ext)) {
      case 'jpg': case 'jpeg':
        $ctype = 'image/jpeg';;
        $src_im = imagecreatefromjpeg($image);
        $outfunc = 'imagejpeg';
        break;
      case 'png':
        $ctype = 'image/png';;
        $src_im = imagecreatefrompng($image);
        $outfunc = 'imagepng';
        break;
      case 'gif':
        $ctype = 'image/gif';;
        $src_im = imagecreatefromgif($image);
        $outfunc = 'imagegif';
        break;
    }
    // Do the resample
    imagecopyresampled($dst_im,$src_im,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h);
    // Get the image data into a base64_encoded string
    ob_start();
    $outfunc($dst_im);
    $imgdata = base64_encode(ob_get_contents()); // Don't use ob_get_clean() in case we're ever running on some ancient PHP build
    ob_end_clean();
    // Return the data so it can be used inline in HTML
    return "data:$ctype;base64,$imgdata";
  }

  echo '<h1>HELLO WORLD : some html</h1>
  <img src="'.getImage_w('http://www.sanctius.net/wp-content/uploads/2010/05/Avatar-20.jpg',200).'" />
  ';

?>

Answer 2

这基本上是不可能的。网络浏览器请求 HTML 页面并期望 HTML。或者它请求图像并期望图像。您不能在一个请求中混合使用两者，因为只有一个 Content-Type 可以是有效的。

但是，您可以使用 data URI 将图像嵌入 HTML：

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4/8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

请注意，base64 编码非常无效，因此请确保在浏览器支持的情况下明确压缩输出，例如使用 gzip。

所以对你来说，它可能如下所示：

echo '<img src="data:image/jpeg;base64,' . base64_encode(displayImg_w('http://www.sanctius.net/wp-content/uploads/2010/05/Avatar-20.jpg',200)) . '">';

并确保displayimg_w() 不再输出标题。

另外，displayimg_w()最后需要调整，将图片数据作为字符串返回，而不是直接输出：

ob_start();
imagejpeg($dst_im);
return ob_get_flush();