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

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

用数字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'; ?>

---

作者：HBLo
来源：CSDN
原文：https://blog.csdn.net/u012418896/article/details/44021351
版权声明：本文为博主原创文章，转载请附上博文链接！