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

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

标签：
jqueryqrcode保存post二维码

2015-03-02 18:17
603人阅读 评论(0)
收藏
举报

版权声明：本文为博主原创文章，未经博主允许不得转载。

用jQuery-qrcode制作二维码时需要保存二维码图片进行进一步的修饰。由于二维码是用js前台自动生成的，所以后台不能直接获取。找了一下资料，决定将二维码图片的数据用ajax传回后台，在保存成图片。

Jquery-qrcode制作二维码分canvas和tabel两种方式

一、Canvas方式生成的二维码直接渲染在canvas内，可以直接用toDataURL()传回，并在后台获取二维码数据



前台代码

[php]
view plain
copy

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]
view plain
copy

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

二、tabel方式生成的二维码是将二维码转化成一个表格，每个单元格作为二维码的一个像素点，通过改变单元格的背景色来汇聚成一个二维码



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

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

前台代码

[php]
view plain
copy

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]
view plain
copy

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