上传并转换最常见的图像类型为PNG的织物画布背景图像

Question

我试图让这个图像上传和转换脚本正常工作。 我有脚本上传任何有效的图像，并将其重命名，但后来我添加了转换代码，我无法正常工作。我注释掉了// imagepng（$ image）;因为那导致成功div填补了'PNGIHDR G'， }IDATx i u' s ] ％.......我已经为此工作了两天看着Stack上的很多帖子，并认为我明白了需要什么。如果有人可以请看看这个，也许在我的问题上提出一些亮点，我将不胜感激。在当前的配置中，我在服务器上没有收到错误。谢谢！

PHP

<?php 
    include_once $_SERVER['DOCUMENT_ROOT'].'/include/session.php'; 

    // Detect the file params according to need 
$filename = $_FILES["myfile"]["name"]; 
$filesize = $_FILES["myfile"]["size"]; 
$tmp_name = $_FILES["myfile"]["tmp_name"]; 
$custnum = $session->custnum; //Users account number from session 

// Valid extensions for Upload 
    $validExtensions = array('.jpeg', '.jpg', '.gif', '.png'); 

// Valid size in KB 
    $max_size = 6000; 

    // Detect file extension 
    $extension = strtolower(strrchr($filename, ".")); 

     // Convert filesize in KB 
     $getFileSize = round($filesize/1024, 1); 

     //Make the storage directory 
      if (!file_exists("maps/accounts/".$custnum)) { 
      mkdir("maps/accounts/".$custnum, 0777, true); 
      } 

      // Location to store the file 
     $path = str_replace('\/\\', '/', dirname(__FILE__)) . "/maps/accounts/".$custnum; 

if(in_array($extension, $validExtensions)){ 

if($getFileSize < $max_size){ 

    if(is_dir($path)){ 

     //***********Start of image conversion*********** 

     $srcFile = $tmp_name; 

list($width_orig, $height_orig, $type) = getimagesize($srcFile);   

// Get the aspect ratio 
$ratio_orig = $width_orig/$height_orig; 

//Set max size 
$width = 900; 
$height = 600; 

// resize to height (orig is portrait) 
if ($ratio_orig < 1) { 
    $width = $height * $ratio_orig; 
} 
// resize to width (orig is landscape) 
else { 
    $height = $width/$ratio_orig; 
} 

// Temporarily increase the memory limit to allow for larger images 
ini_set('memory_limit', '32M'); 

switch ($type) 
{ 
    case IMAGETYPE_GIF: 
     $image = imagecreatefromgif($srcFile); 
     break; 
    case IMAGETYPE_JPEG: 
     $image = imagecreatefromjpeg($srcFile); 
     break; 
    case IMAGETYPE_PNG: 
     $image = imagecreatefrompng($srcFile); 
     break; 
    default: 
     throw new Exception('Unrecognized image type ' . $type); 
} 

     // create a new blank image 
    $newImage = imagecreatetruecolor($width, $height); 

     // Copy the old image to the new image 
    imagecopyresampled($newImage, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); 

     imagepng($newImage, $path . '/' . $custnum.'.png'); 
     imagedestroy($image); 
     imagedestroy($newImage);  

     //******End of image conversion****************  



       // Success Message 
      echo "<div id='success' class='alert alert-success'><strong>Your map image was uploaded!</strong> 
        <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button> 
       </div>"; 


    } else { 
        trigger_errors("Directory not Found!<br /> $path"); 
        } 

     } else { 
     $error_msg = "<strong>Filesize should be less then $max_size KB!</strong><br />Your file is about $getFileSize KB"; 
    trigger_errors($error_msg); 
    } 

    } else { 
     $error_msg = "<strong>File not Supproted for Upload!</strong><br /> 
       Please try with the files that has following extensions: .jpg, .jpeg, .gif, .png"; 
     trigger_errors($error_msg); 
     } 

    // Make function that 
    // generate the Error 
    function trigger_errors($error_msg){ 
    echo "<div class='alert alert-error'> 
    <button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button> 
    $error_msg 
    </div>"; 
    } 

    ?> 

这里是我的JQuery的Ajax脚本是iside是调用了上面的PHP脚本的fabric.js kitchensink.js。

JQuery的阿贾克斯

$('#loading').hide(); 
$(function(){ 
var $form = $('#myform'), 
    $result = $('#result'); 

$('form').on('change','#myfile', function(){ 
    $('#loading').show(); 
    $result.ajaxStart(function(){ 

    }); 

    $form.ajaxForm({ 
     target: $result 

    }).submit(); 

      $(document).ajaxComplete(function() { 
       $('#loading').delay(1500).hide('slow'); 

      if ($('#success').hasClass('alert-success')){  
       canvas.setBackgroundImage(fullurl , function() { 
       canvas.renderAll(); 
       });}; 
      }); 
});    

}) 

这里是我当前的HTML调用Ajax和PHP的图像处理器。这个html接收来自php和ajax的反馈成功或失败给用户提供反馈。

HTML

<div> 
    <form id="myform" action="image_uploader.php" method="post" enctype="multipart/form-data"> 
     <table align="center"> 
      <tr> 
       <td width="100"><label>Select File: </label></td> 
      <td> 
        <input class="btn shape" type="file" id="myfile" name="myfile"> 
       </td> 
      </tr> 
     </table> 
    </form> 
<div id="loading"><img src="fabric/img/loadingbar.gif" width="200" height="15" alt="" border="0"><img src="fabric/img/uploading-text.GIF" width="128" height="19" alt="" border="0"></div> 
</div> 
<div id="result"></div> 

Answer 1

你只是移动上传的文件..

所以..删除此行..

header('Content-Type: image/png'); 

Answer 2

你并不需要调用move_uploaded_file其实。事实上，如果你这样做，你不会得到你想要的结果。

// create a new blank image 
$newImage = imagecreatetruecolor($width, $height); 

// Copy the old image to the new image 
imagecopyresampled($newImage, $image, 0, 0, 0, 0, $width, $height, $width_orig, $height_orig); 

imagepng($newImage, $path . '/' . $custnum); 
imagedestroy($image); 
imagedestroy($newImage); 

你想这样做的原因是，imagepng第二个参数可以保存文件的路径。由于您已经完成转换文件的所有麻烦，因此调用move_uploaded_file会将原始文件转换为png文件名。因此，如果我用脚本上传JPEG，它会将该JPEG移动到example.png中。换句话说，它不会是一个PNG，它仍然是一个JPEG。

它倾倒你写的方式的原因是，如果没有这个路径，函数会返回原始图像，所以你的浏览器试图将该二进制数据解释为文本，从而得到乱码和随机字符。