H5生成合成图片
最终目标是拿到一个图片链接地址，利用image标签渲染在页面内
<div class="img">
<img id="img" :src="imgSrc">
</div>
<canvas id="qr" width="640" height="880" style="display:none;"></canvas>
1.拿到一些基本信息
a.昵称、用户头像、联系方式
b.动态二维码
c.背景大图
1.如何拿到用户昵称，头像等基本信息
通过 授权 ，用户点击允许之后，拿到用户的基本信息，其中包括 头像图片链接，昵称等信息，选取我们要用到的即可
这里谈到的如何授权，我将会在下一篇技术文章中详细讲解通过授权拿到的基本信息可以存储在缓存中，一些地方用到的时候可以取出来
let userInfo = ajaxobj.CookieUtil.get('userInfo');
let name = userInfo.nickName;
let headImg = userInfo.avatarUrl;
2.如何生成二维码
需要借助二维码生成器以及canvas
这里是下载插件地址qrcanvas.js
let qr = new Image();
let qrcodeBefore = qrcanvas({ data: code, size: 200 });
var codeImg = qrcodeBefore.toDataURL('image/png');
qr.src = codeImg;
以上准备工作已经齐了，可以生成图片了
toCanvasImg:function(logoImg,txt,code){
let self = this;
let bg = new Image();
let qr = new Image();
let logo = new Image();
bg.src= '.xxx.jpg'; /*背景大图路径,可以是线上链接，也可以是相对路径*/
logo.crossOrigin = "Anonymous";
logo.src = logoImg;
let canvas = document.getElementById('qr');
let bgImg = document.getElementById('img');
let qrcodeBefore = qrcanvas({
data: code,
size: 200 /*二维码生成尺寸大小*/
});
let codeImg = qrcodeBefore.toDataURL('image/png');
qr.src = codeImg;
let ctx = canvas.getContext('2d');
logo.onload = function(){
bg.onload = function(){
// ctx.drawImage(bg, 0, 0, 640, 800,0,0,canvasWidth,canvasHeight); /*总图像*/
ctx.drawImage(bg, 0, 0, bg.width,bg.height,0,0,640,880); /*总图像*/
ctx.font="24px Helvetica"; /*设置字体大小，字体样式*/
ctx.fillStyle="#333333";
ctx.fillText(txt, 160, 140); /*填充昵称*/
// ctx.drawImage(logo, 0, 0, logo.width,logo.height, logoLeft, logoTop, logoWith, logoHeight); /*头像所放位置*/
ctx.drawImage(logo, 0, 0, logo.width,logo.height, 40, 120, 106, 106);/*在画布上绘制头像*/
// ctx.drawImage(qr, 0, 0, qr.width, qr.height, qrcodeLeft, qrcodeTop, qrcodeWith, qrcodeHeight);
ctx.drawImage(qr, 0, 0, qr.width, qr.height, 480, 700, 120, 120); /*在画布上绘制二维码*/
self.imgSrc = canvas.toDataURL('image/png');/*canvas生成的图片转为图片格式的链接*/
}
}
};
