用Jquery-qrcode製作二維碼時需要儲存二維碼圖片進行進一步的修飾。由於二維碼是用js前臺自動生成的，所以後臺不能直接獲取。找了一下資料，決定將二維碼圖片的資料用ajax傳回後臺，在儲存成圖片。

Jquery-qrcode製作二維碼分canvas和tabel兩種方式

一、Canvas方式生成的二維碼直接渲染在canvas內，可以直接用toDataURL()傳回，並在後臺獲取二維碼資料

前臺程式碼

function ajax_post(){	 
  var url = document.getElementById("output").childNodes[0].toDataURL("image/png");//$('#output').toDataURL("image/png");
  $.post("action.php",{imageurl:url},
  function(data){
	  document.getElementById("test").innerHTML = data;
  },
  "text");
}
 

<?php
$url = $_POST["imageurl"];
$img = file_get_contents($url); 
file_put_contents('1.gif',$img);
echo 'ok';
?>

二、tabel方式生成的二維碼是將二維碼轉化成一個表格，每個單元格作為二維碼的一個畫素點，通過改變單元格的背景色來匯聚成一個二維碼

研究了很久，實在找不到相關的儲存資料，看了一下程式碼，發現這種二維碼只用到五種顏色，於是便自己搞了一個解決方案：

用數字0-5代表每一種顏色，然後將整個二維碼的資料序列以字串的方式傳回後臺，後臺獲取到之後用

前臺程式碼

function ajax_post(){	
  var data = "";//var data = new Array();
  var trs = $('#output').find('tr');
  var width = trs[0].style.height; 
  trs.each(function (j) {
   tds = $(this).find('td');
   //data[index] = "";
   tds.each(function (i) {
	   var colorNum = 5;
	   switch(this.style.backgroundColor)
	   {
		   case 'blue':
		   		colorNum = 0;
		   		break;
		   case 'red':
		   		colorNum = 1;
		   		break;
		   case 'grey':
		   		colorNum = 2;
		   		break;
		   case 'green':
		   		colorNum = 3;
		   		break;
		   case 'yellow':
		   		colorNum = 4;
		   		break;
		}
    	data = data + colorNum;//data[index] = data[index] + colorNum;//this.style.backgroundColor;
   });
   data = data + "-";
  });
  //alert(data);
  //alert(data[1].length);//41
  
  $.post("action.php",{imageData:data, widthData:width},
  function(data){
	  document.getElementById("test").innerHTML = data;
  },
  "text");//這裡返回的型別有：json,html,xml,text
}
 

<?php
$data = $_POST["imageData"];
$len = floatval($_POST["widthData"]);

// 建立300X300畫布
$im = imagecreatetruecolor(300, 300);

// 顏色
$blue = imagecolorallocate($im, 0, 0, 255);
$red = imagecolorallocate($im, 255, 0, 0);
$grey = imagecolorallocate($im, 128, 128, 128);
$green = imagecolorallocate($im, 0, 128, 0);
$yellow = imagecolorallocate($im, 255, 255, 0);
$color = array($blue, $red, $grey, $green, $yellow);

// 填充畫布
//$len = 7.317073170731708;
$dataLen = strlen($data);
for($index = $i = $j = 0; $index < $dataLen; $index++, $i++)
{
	$x1 = $i * $len;
	$y1 = $j * $len;
	$x2 = $x1 + $len;
	$y2 = $y1 + $len;
	$color = $blue;
	switch(substr($data, $index, 1))
	   {
		   case '0':
		   		break;
		   case '1':
		   		$color = $red;
		   		break;
		   case '2':
		   		$color = $grey;
		   		break;
		   case '3':
		   		$color = $green;
		   		break;
		   case '4':
		   		$color = $yellow;
				break;
		   case '-':
		   		$j++;
				$i = -1;
				$color = 'N';
		   		break;
		}
	if($color != 'N')imagefilledrectangle($im, $x1, $y1, $x2, $y2, $color); 
}
// 生成圖片
imagepng($im, '1.png');

// 釋放記憶體
imagedestroy($im);
echo 'ok';
?>