后台获取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

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

后台 代码

[php] view plain copy

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

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

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

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

前台代码

[php] view plain copy

1. function ajax_post(){     
2.   var data = "";//var data = new Array();  
3.   var trs = $('#output').find('tr');  
4.   var width = trs[0].style.height;   
5.   trs.each(function (j) {  
6.    tds = $(this).find('td');  
7.    //data[index] = "";  
8.    tds.each(function (i) {  
9.        var colorNum = 5;  
10.        switch(this.style.backgroundColor)  
11.        {  
12.            case 'blue':  
13.                 colorNum = 0;  
14.                 break;  
15.            case 'red':  
16.                 colorNum = 1;  
17.                 break;  
18.            case 'grey':  
19.                 colorNum = 2;  
20.                 break;  
21.            case 'green':  
22.                 colorNum = 3;  
23.                 break;  
24.            case 'yellow':  
25.                 colorNum = 4;  
26.                 break;  
27.         }  
28.         data = data + colorNum;//data[index] = data[index] + colorNum;//this.style.backgroundColor;  
29.    });  
30.    data = data + "-";  
31.   });  
32.   //alert(data);  
33.   //alert(data[1].length);//41  
34.     
35.   $.post("action.php",{imageData:data, widthData:width},  
36.   function(data){  
37.       document.getElementById("test").innerHTML = data;  
38.   },  
39.   "text");//这里返回的类型有：json,html,xml,text  
40. }  

后台代码

[php] view plain copy

1. <?php  
2. $data = $_POST["imageData"];  
3. $len = floatval($_POST["widthData"]);  
4.   
5. // 创建300X300画布  
6. $im = imagecreatetruecolor(300, 300);  
7.   
8. // 颜色  
9. $blue = imagecolorallocate($im, 0, 0, 255);  
10. $red = imagecolorallocate($im, 255, 0, 0);  
11. $grey = imagecolorallocate($im, 128, 128, 128);  
12. $green = imagecolorallocate($im, 0, 128, 0);  
13. $yellow = imagecolorallocate($im, 255, 255, 0);  
14. $color = array($blue, $red, $grey, $green, $yellow);  
15.   
16. // 填充画布  
17. //$len = 7.317073170731708;  
18. $dataLen = strlen($data);  
19. for($index = $i = $j = 0; $index < $dataLen; $index++, $i++)  
20. {  
21.     $x1 = $i * $len;  
22.     $y1 = $j * $len;  
23.     $x2 = $x1 + $len;  
24.     $y2 = $y1 + $len;  
25.     $color = $blue;  
26.     switch(substr($data, $index, 1))  
27.        {  
28.            case '0':  
29.                 break;  
30.            case '1':  
31.                 $color = $red;  
32.                 break;  
33.            case '2':  
34.                 $color = $grey;  
35.                 break;  
36.            case '3':  
37.                 $color = $green;  
38.                 break;  
39.            case '4':  
40.                 $color = $yellow;  
41.                 break;  
42.            case '-':  
43.                 $j++;  
44.                 $i = -1;  
45.                 $color = 'N';  
46.                 break;  
47.         }  
48.     if($color != 'N')imagefilledrectangle($im, $x1, $y1, $x2, $y2, $color);   
49. }  
50. // 生成图片  
51. imagepng($im, '1.png');  
52.   
53. // 释放内存  
54. imagedestroy($im);  
55. echo 'ok';  
56. ?>