将上传的图片保存为缩略图和 base64 编码字符串

Question

好的，假设我们有一个表单，其中包含一个简单的文件上传输入

<form action="index.php"  method="post" enctype="multipart/form-data">
<input name="image_file" type="file" />
<input type="submit" name="submit-btn" value="Upload" />
</form>

然后是 index.php 文件

// check $_FILES['ImageFile'] not empty
if(!isset($_FILES['image_file']) || !is_uploaded_file($_FILES['image_file']['tmp_name'])){
        die('Image file is Missing!'); // output error when above checks fail.
}

//uploaded file info we need to proceed
$image_name = $_FILES['image_file']['name']; //file name
$image_size = $_FILES['image_file']['size']; //file size
$image_temp = $_FILES['image_file']['tmp_name']; //file temp

$image_size_info    = getimagesize($image_temp); //get image size

if($image_size_info){
    $image_width        = $image_size_info[0]; //image width
    $image_height       = $image_size_info[1]; //image height
    $image_type         = $image_size_info['mime']; //image type
}else{
    die("Make sure image file is valid!");
} 

然后我尝试重新调整文件大小

switch($image_type){
    case 'image/png':
        $image_res =  imagecreatefrompng($image_temp);break;
    case 'image/gif':
        $image_res =  imagecreatefromgif($image_temp); break;   
    case 'image/jpeg': case 'image/pjpeg':
        $image_res = imagecreatefromjpeg($image_temp); break;
    default:
        $image_res = false;
}

现在我想将图像输出到用户的浏览器而不存储文件。 这就是我尝试这样做的原因

$data = base64_encode(file_get_contents($_FILES['image_file']['tmp_name']));

但是我觉得这里我的逻辑有问题，因为它没有输出图片，反正我最终想要的是像下面这样回显图片。

switch($image_type){
    case 'image/png':
        echo '<img src="data:image/png;base64,"'.$data.' alt="" />'; break;
    case 'image/gif':
        echo '<img src="data:image/gif;base64,"'.$data.' alt="" />';break;
    case 'image/jpeg': case 'image/pjpeg':
        echo '<img src="data:image/jpeg;base64,"'.$data.' alt="" />';break;
    }

有人能看到失败吗？

Answer 1

问题是因为你的双引号（"）在这里，

...
echo '<img src="data:image/png;base64,"'.$data.' alt="" />'; break;
                                      ^ your double quote here is wrong

应该是这样的，

echo '<img src="data:image/png;base64,'.$data.'" alt="" />'; break;
                                               ^ your double quote should be here

另外，我看不出您使用 imagecreatefromXXX() 函数的任何原因，这对您的逻辑没有任何影响。

根据您的问题：

...想将上传的图片转换为字符串等变量，并使用<img>标签显示

那么你的代码应该是这样的：

HTML

<form action="index.php"  method="post" enctype="multipart/form-data">
<input name="image_file" type="file" />
<input type="submit" name="submit-btn" value="Upload" />
</form>

PHP

if(isset($_POST['submit-btn'])){
    // check $_FILES['ImageFile'] not empty
    if(!isset($_FILES['image_file']) || !is_uploaded_file($_FILES['image_file']['tmp_name'])){
            die('Image file is Missing!'); // output error when above checks fail.
    }

    //uploaded file info
    $image_temp = $_FILES['image_file']['tmp_name']; //file temp

    $image_size_info    = getimagesize($image_temp); //get image size

    if($image_size_info){
        $image_type = $image_size_info['mime']; //image type
    }else{
        die("Make sure image file is valid!");
    } 

    $data = base64_encode(file_get_contents($image_temp));
    switch($image_type){
    case 'image/png':
        echo '<img src="data:image/png;base64,'.$data.'" alt="" />'; break;
    case 'image/gif':
        echo '<img src="data:image/gif;base64,'.$data.'" alt="" />';break;
    case 'image/jpeg': case 'image/pjpeg':
        echo '<img src="data:image/jpeg;base64,'.$data.'" alt="" />';break;
    }   
}

Answer 2

因为您已将文件编码如下：

$data = base64_encode(file_get_contents($_FILES['image_file']['tmp_name']));

所以你应该像下面这样输出它：

switch($image_type){
    case 'image/png':
        echo '<img src="data:image/png;base64,"'.$data.'" alt="" />'; break;
    case 'image/gif':
        echo '<img src="data:image/gif;base64,"'.$data.'" alt="" />';break;
    case 'image/jpeg': case 'image/pjpeg':
        echo '<img src="data:image/jpg;base64,'.$data.'" alt="" />';break;
}

无需使用解码功能。

Answer 3

设置内容类型标头并根据需要将 $image_res 与imagejpeg、imagegif 或imagepng 一起使用：

switch($image_type){

    case 'image/png':
      header('Content-Type: image/png');  
      imagepng($image_res);

    case 'image/gif':
      header('Content-Type: image/gif');
      imagegif($image_res);

    case 'image/jpeg': case 'image/pjpeg':
      header('Content-Type: image/jpeg');
      imagejpeg($image_res);

}

它看起来像您发布的屏幕截图的原因是因为标题在发送到浏览器后无法修改。输出表单时，会发送标题。

你可以通过在不同页面中分离表单和php逻辑来解决这个问题：

index.php

<form action="process.php"  method="post" enctype="multipart/form-data">
<input name="image_file" type="file" />
<input type="submit" name="submit btn" value="Upload" />
</form>

---

process.php

// check $_FILES['ImageFile'] not empty
if (!isset($_FILES['image_file']) ||
    !is_uploaded_file($_FILES['image_file']['tmp_name'])){
      die('Image file is Missing!'); // output error when above checks fail.
}

// uploaded file info we need to proceed
$image_name = $_FILES['image_file']['name']; //file name
$image_size = $_FILES['image_file']['size']; //file size
$image_temp = $_FILES['image_file']['tmp_name']; //file temp

$image_size_info    = getimagesize($image_temp); //get image size

if ($image_size_info) {
    $image_width        = $image_size_info[0]; //image width
    $image_height       = $image_size_info[1]; //image height
    $image_type         = $image_size_info['mime']; //image type
}
else {
    die("Make sure image file is valid!");
}


switch ($image_type) {

    case 'image/png':
        $image_res =  imagecreatefrompng($image_temp);break;

    case 'image/gif':
        $image_res =  imagecreatefromgif($image_temp); break;

    case 'image/jpeg': case 'image/pjpeg':
        $image_res = imagecreatefromjpeg($image_temp); break;

    default:
        $image_res = false; 
}

switch($image_type){

    case 'image/png':
      header('Content-Type: image/png');  
      imagepng($image_res);

    case 'image/gif':
      header('Content-Type: image/gif');
      imagegif($image_res);

    case 'image/jpeg': case 'image/pjpeg':
      header('Content-Type: image/jpeg');
      imagejpeg($image_res);

}