上傳並轉換最常見的圖像類型爲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。

它傾倒你寫的方式的原因是，如果沒有這個路徑，函數會返回原始圖像，所以你的瀏覽器試圖將該二進制數據解釋爲文本，從而得到亂碼和隨機字符。