后台获取JQuery-qrcode生成的二维码图片

用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方式生成的二维码是将二维码转化成一个表格，每个单元格作为二维码的一个像素点，通过改变单元格的背景色来汇聚成一个二维码

后台获取JQuery-qrcode生成的二维码图片

研究了很久，实在找不到相关的保存资料，看了一下代码，发现这种二维码只用到五种颜色，于是便自己搞了一个解决方案：

用数字0-5代表每一种颜色，然后将整个二维码的数据序列以字符串的方式传回后台，后台获取到之后用GD库自制一张二维码

前台代码

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';
?>

秒客网

后台获取JQuery-qrcode生成的二维码图片

相关文章