HTML5 結合手機相機將相片儲存到後台

edited 四月 2016 in Javascript
我的程式如下:
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
  $editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}

if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
 
  $insertSQL = sprintf("INSERT INTO data_set (d_class ,d_name, d_phone, d_email, d_zip, d_city, d_canton, d_address ,d_content, d_date, d_active,d_sort) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)",
                       GetSQLValueString($_POST['d_class'], "text"),
                       GetSQLValueString($_POST['d_name'], "text"),
                       GetSQLValueString($_POST['d_phone'], "text"),
                       GetSQLValueString($_POST['d_email'], "text"),
                       GetSQLValueString($_POST['d_zip'], "text"),
                       GetSQLValueString($_POST['d_city'], "text"),
                       GetSQLValueString($_POST['d_canton'], "text"),
                       GetSQLValueString($_POST['d_address'], "text"),
                       GetSQLValueString($_POST['d_content'], "text"),
                       GetSQLValueString($_POST['d_date'], "date"),
                       GetSQLValueString($_POST['d_active'], "int"),
                       GetSQLValueString($_POST['d_sort'], "int"));

  mysql_select_db($database_connect2data, $connect2data);
  $Result1 = mysql_query($insertSQL, $connect2data) or die(mysql_error());
  $nid = mysql_insert_id();
  $sn = base64_encode($nid);
  
        
  $upload_dir = "upload_image/";			  
	$img = $_POST['okimg'];
	$img = str_replace('data:image/png;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  $file = $upload_dir . $nid . '.png';
  file_put_contents($file, $data);
        
		    
  $insertGoTo = "p01ok.php?d_id=$sn";
  
  header(sprintf("Location: %s", $insertGoTo));
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
<html xmlns="http://www.w3.org/1999/xhtml">;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST</title>
</head>

<body onload="MM_preloadImages('images/n-p02a.jpg','images/n-p01a.jpg')">
<table width="1138" border="0" align="center" cellpadding="0" cellspacing="0">
<td><form id="form1" name="form1" method="POST" action="<?php echo $editFormAction; ?>">
         <table width="1000" align="center">
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td><table width="70%" align="center" cellpadding="6" cellspacing="6">
              <tr>
                <td nowrap colspan="2" align="center"><img src="images/n-p02.jpg" alt="" width="179" height="83" id="upfile" style="cursor:pointer"><input type="file" id="image" name="image" class="atxt10" accept="image/*" capture style="display:none">
              <canvas id="okimg"></canvas>
                <script>
                	  $("#upfile").click(function () {
										    $("#image").trigger('click');
										});
                	  
                    var input = document.querySelector('input[type=file]'); // see Example 4
                
                    input.onchange = function () {
                        var file = input.files[0];
                
                        drawOnCanvas(file);   // see Example 6
                        displayAsImage(file); // see Example 7
                    };
                
                    function drawOnCanvas(file) {
                    
                        var reader = new FileReader();
                    
                        reader.onload = function(e) {
                    
                            var dataURL = e.target.result,
                    
                            canvas = document.querySelector('canvas'),
                    
                            ctx = canvas.getContext('2d'),
                    
                            img = new Image();
                    
                            img.onload = function() {
                    
                                var square = 390;
                    
                                canvas.width = square;
                    
                                canvas.height = square;
                    
                                var context = canvas.getContext('2d');
                    
                                context.clearRect(0, 0, square, square);
                    
                                var imageWidth;
                    
                                var imageHeight;
                    
                                var offsetX = 0;
                    
                                var offsetY = 0;
                    
                                if (this.width > this.height) {
                    
                                    imageWidth = Math.round(square * this.width / this.height);
                    
                                    imageHeight = square;
                    
                                    offsetX = -Math.round((imageWidth - square) / 2);
                    
                                } else {
                    
                                    imageHeight = Math.round(square * this.height / this.width);
                    
                                    imageWidth = square;
                    
                                    offsetY = -Math.round((imageHeight - square) / 2);
                    
                                }
                    
                                context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
                    
                                                 
                            };
                    
                            img.src = dataURL;
                            alert(dataURL);
                            

                            
                        };
                    
                        reader.readAsDataURL(file);
                    
                    }

                </script>
                </td>
                </tr>
              <tr>
                <td width="11%" nowrap="nowrap">姓名:</td>
                <td width="89%"><input name="d_name" type="text" class="atxt28" id="d_name" value="" size="40" /></td>
              </tr>
              <tr>
                <td nowrap="nowrap">電話:</td>
                <td><input name="d_phone" type="text" class="atxt28" id="d_phone" value="" size="40" /></td>
              </tr>
              <tr>
                <td nowrap="nowrap">Email:</td>
                <td><input name="d_email" type="text" class="atxt28" id="d_email" value="" size="40" /></td>
              </tr>
 </table></td>
        <input name="d_class" type="hidden" id="d_class" value="News" /><input name="d_active" type="hidden" value="0" /><input name="d_date" type="hidden" value="<?php echo date('Y-m-d H:i:s'); ?>" />
        <input type="hidden" name="MM_insert" value="form1" />
        </form><!-- InstanceEndEditable --></td>
</table></td>
     </tr>
</table>
</body>


$img = $_POST; 值為空值...所產生的圖片檔為0
請教各位高手
是那邊有錯嗎?
謝謝
標籤:

評論

Sign In or Register to comment.