生成二维码

研究了一下生成二维码

引用本地资源jquery和jquery.qCode.min.js

实现了利用一个input[hidden]的value值通过jquery.qCode.min.js插件生成二维码的过程，代码实现了在一个div里面render生成canvas绘制成二维码

var canvas = document.getElementById('erw');
var context = canvas.getContext('2d')；

var strDataURI = canvas.toDataURL();

可以将strDataURI赋值img的src属性，实现图片展示二维码

以下代码完成二维码的定位：

img.onload=function(){
　　ctx.drawImage($("#img1")[0],68,88,105,105);
}

还有代码：

img.setAttribute('crossOrigin', 'anonymous');解决跨域问题，但是自测并不好使……

css:

.qrcode {
height: 395px;
280px;
display: none;
position: absolute;
border: 1px solid #000;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
background: #FAFCFE;
border: 1px solid #D5E2E9;
border-radius: 4px;
}

.qrcodeDeviceNo {
-webkit-text-size-adjust: none;
position: relative;
bottom: 109px;
margin-left: 94px;
font-size: 12px;
-webkit-transform-origin-x: 0;
-webkit-transform: scale(0.50);
}
.preverseQrcode {
background: #007BBC;
border-radius: 3px;
height: 34px;
line-height: 34px;
120px;
text-align: center;
font-family: PingFangSC-Light;
font-size: 14px;
color: #FFFFFF;
letter-spacing: 0px;
margin: 0 auto;
}

.img_photo {
/*display: none*/
}
.clearFix {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearFix {
zoom: 1;
}
.box {
min-height: 800px!important;
padding-left: 15px;
background-color: #fff;
}
</style>

html：

<div class="qrcode">
<canvas id="canvasFinal" width="240" height="320" align="center"></canvas>
<div class="qrcodeDeviceNo">(ccb111111111111111)</div>
<div class="preverseQrcode">保存下载</div>
</div>

js:

//生成二维码代码
function qr() {
$("#qrPic").empty();
var str = toUtf8($("#codeUrl").val());//接受后端传来的数据
$("#qrPic").qrcode({
render: "canvas",
270,
height: 270,
text: str
});

// 在qrPic里面渲染成二维码
$("canvas").eq(0).attr("id", "erw");
var canvas = document.getElementById('erw');
var context = canvas.getContext('2d');
var strDataURI = canvas.toDataURL();

// 将生成的二维码unicode赋值给img
document.getElementById('img1').src = strDataURI;
console.log(strDataURI);//可以得到url
};

$(".containerSection").each(function(){
$(this).mousemove(draw);
});
$(".containerSection").each(function(){
$(this).mouseleave(function(){
$(".qrcode").css("display","none");
});
$(".qrcode").mouseleave(function(){
$(".qrcode").css("display","none");
})
});
$(".qrcode").mousemove(function(){
$(this).css("display","block");
});
$(".qrcode").mouseout(function(){
$(document).mousedown(function(e){
e = window.event || e; // 兼容IE7
obj = $(e.target);
console.log(obj[0].id)
if(obj[0].id == "canvasFinal"){
$(this).css("display","none");
console.log(typeof obj[0].id);
};
});
});
function draw(fn){
qr();
var qrcodeTop = parseFloat($(this)[0].offsetTop);
var qrcodeLeft = parseFloat($(this)[0].offsetLeft);
$(".qrcode").css("display","block");
$(".qrcode").css("top",qrcodeTop+170+"px");
$(".qrcode").css("left",qrcodeLeft+70+"px");

var data1= new Array();
for(var i=0;i<$('.img_photo img').length;i++){
data1[i]=$('.img_photo img').eq(i).attr('src');
console.log(data1)
}
var c=document.getElementById('canvasFinal'),
ctx=c.getContext('2d'),
len=data1.length;
ctx.rect(0,0,300,300);
ctx.fillStyle='transparent';//画布填充颜色
ctx.fill();

var img=new Image;
// img.setAttribute('crossOrigin', 'anonymous');
img.src=data1[0];
img.onload=function(){
ctx.drawImage($("#img1")[0],68,88,105,105);
}
//保存生成作品图片
}

//有跨域问题
setTimeout(function(){
var canvas = document.getElementById('canvasFinal');
var a = canvas.toDataURL();
},1000)
</script>