将上传的图片保存为缩略图和 base64_encoded 字符串

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

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

$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 2

设置 content-type header 并使用 $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);

}

之所以看起来像您发布的屏幕截图，是因为 headers 在发送到浏览器后无法修改。输出表单时，将发送 headers。

您可以通过在不同页面中分离表单和 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);

}

Answer 3

问题是因为你这里的双引号("),

...
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() 函数的任何原因，这对您的逻辑没有任何影响。

根据您的问题：

... want to transform the uploaded picture to a variable as a string or whatever and display it using <img> tag

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

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;
    }   
}

将上传的图片保存为缩略图和 base64_encoded 字符串

saving a uploaded picture to a thumbnail and to base64_encoded string

html

php

base64

file-upload