在最近一个项目中用到了生成二维码海报，原理就是将canvas生成二维码转换成图片，再用canvas的drawImageAPI把图片画出来。
首先先用 qrcode.min.js 生成二维码图片
<div id="myQrcode" style="display: none"></div> <div id="imgDiv"></div>
<style>canvas{display:none}</style>
<script src="js/qrcode.min.js"></script>
<script>
var qrcode = new QRCode('myQrcode', {
text: '链接地址链接地址链接地址',
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
// 把canvas转换为image的
var myewmCanvas = document.getElementsByTagName("canvas")[1];
var ewmimg = convertCanvasToImage(myewmCanvas);
$("#imgDiv2").append(ewmimg);
// canvas-->image
function convertCanvasToImage(canvas){
//新Image对象,可以理解为DOM;
var ewmimage = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
ewmimage.src = canvas.toDataURL("image/png");
return ewmimage;
}
</script>
再用canvas的drawImageAPI把图片画出来
①图片跨域问题
解决方法第一步：
为图片添加跨域请求头 access-control-allow-origin:*
我使用的腾讯云免费的对象存储(注册使用教程点这里)，这里以此举例
解决方法第二步：
为图片添加crossOrigin属性
img.crossOrigin="anonymous";
②ios微信端点开h5底部会出现前进后退条，占据了屏幕一部分的位置，网上找来一个方法。
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});
全部代码如下
<style>canvas{display:none}</style>
<script src="js/qrcode.min.js"></script>
<script>
var qrcode = new QRCode('myQrcode', {
text: '链接地址链接地址链接地址',
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
// 把canvas转换为image的
var myewmCanvas = document.getElementsByTagName("canvas")[1];
var ewmimg = convertCanvasToImage(myewmCanvas);
$("#imgDiv2").append(ewmimg);
// canvas-->image
function convertCanvasToImage(canvas){
//新Image对象,可以理解为DOM;
var ewmimage = new Image();
//canvas.toDataURL返回的是一串Base64编码的URL,当然,浏览器自己肯定支持
//指定格式PNG
ewmimage.src = canvas.toDataURL("image/png");
return ewmimage;
}
</script>
<script type="text/javascript">
// 海报主体
var data={
"shareproduct":"xx型号空气净化器",
"sharecompany":"我的小家",
"kongqi":"56m?",
"userhour":"322h",
"forestday":"13.5天",
"image":["https://zabolg-1257958181.cos.ap-shanghai.myqcloud.com/zablog/posterng.jpg",ewmimg.src]
},imgPath;
function draw(){
var mycanvas=document.createElement('canvas');
document.body.appendChild(mycanvas);
var len=data.image.length;
mycanvas.width=750;
mycanvas.height=1180;
mycanvas.crossOrigin="Anonymous";
if(mycanvas.getContext){
var context=mycanvas.getContext('2d');
// 宣传图片
var h=0;
function drawing(num){
if(num<len){
var img=new Image;
img.crossOrigin="anonymous";
img.src=data.image[num];
if(num==0){
img.onload=function(){
context.fillStyle="#fff";
context.drawImage(img,0,0,mycanvas.width,mycanvas.height);
h=960;
drawing(num+1);
}
}else if(num==1){
img.onload=function(){
context.drawImage(img,298,865,156,156);
h=136;
drawing(num+1);
}
}
// 顶部文字
context.textAlign='center';
context.font='40px 微软雅黑';
context.fillStyle='#333';
context.fillText(data.sharecompany,380,150);
context.font='34px 微软雅黑';
context.fillStyle='#02b2ff';
context.fillText(data.shareproduct,380,200);
context.fillText(data.kongqi,320,361);
context.fillText(data.userhour,420,411);
context.fillText(data.forestday,495,461);
context.fillStyle='#666';
context.textAlign='left';
context.fillText('月净化空气',100,360);
context.fillText('享受优质空气长达',100,410);
context.fillText('相当于在原始森林住了',100,460);
context.textAlign='center';
context.fillStyle='#fff';
context.font='26px 微软雅黑';
context.fillText('扫码查看详细报表',370,1065);
context.fillText('【咨询合作 】 林先生 ：18012345678',450,1110);
}else{
imgPath=mycanvas.toDataURL("image/jpeg");
document.getElementsByTagName('img')[1].src=imgPath;
}
}
drawing(0);
}
}
CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {
var min_size = Math.min(w, h);
if (r > min_size / 2) r = min_size / 2;
// 开始绘制
this.beginPath();
this.moveTo(x + r, y);
this.arcTo(x + w, y, x + w, y + h, r);
this.arcTo(x + w, y + h, x, y + h, r);
this.arcTo(x, y + h, x, y, r);
this.arcTo(x, y, x + w, y, r);
this.closePath();
return this;
}
draw();
//隐藏ios微信前进后退条
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
WeixinJSBridge.call('hideToolbar');
});
最终实现的二维码海报效果如图：
0