Skip to content

Y
ydLife
Commit ca277f93 by Sweet Zhang
Options

二维码增加ICON

parent 19589fbd
Showing with 64 additions and 32 deletions
src/app/my/mk-material-detail/mk-material-detail.component.html
<!-- 这个元素用来承载生成的二维码 不显示 --> <!-- 这个元素用来承载生成的二维码 不显示 style="display: none" -->
<div id="qrcode" style="display: none"></div> <div id="qrcode" style="display: none"></div>
<!-- 点击这个按钮之后下载图片 --> <!-- 点击这个按钮之后下载图片 -->
...@@ -8,4 +8,4 @@ ...@@ -8,4 +8,4 @@
<canvas id="canvas" #canvas></canvas> <canvas id="canvas" #canvas></canvas>
<!--生成图片--> <!--生成图片-->
<!--<img src="" alt="" id="bannerImg" class="img-responsive">--> <img src="" alt="" id="bannerImg" class="img-responsive">
src/app/my/mk-material-detail/mk-material-detail.component.ts
...@@ -20,9 +20,9 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -20,9 +20,9 @@ export class MkMaterialDetailComponent implements OnInit {
// 二维码宽度 // 二维码宽度
qrcodeWidth: number = 70; qrcodeWidth: number = 70;
qrcodeBgWidth: number = 80; qrcodeBgWidth: number = 80;
qrcodePadding: number = 5; qrcodePadding = 5;
rightWidth: number = 5; rightWidth = 5;
bottomHeight: number = 5; bottomHeight = 5;
constructor(private activateRoute: ActivatedRoute, constructor(private activateRoute: ActivatedRoute,
private lifeCommonService: LifeCommonService, private lifeCommonService: LifeCommonService,
...@@ -45,7 +45,8 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -45,7 +45,8 @@ export class MkMaterialDetailComponent implements OnInit {
this.shareCallBack(); this.shareCallBack();
} }
canvasPic() { async canvasPic() {
const qrcodeUrl = await this.qrcode() + '';
const canvas = this.canvas.nativeElement as HTMLCanvasElement; const canvas = this.canvas.nativeElement as HTMLCanvasElement;
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
const ratio = this.getPixelRatio(ctx); const ratio = this.getPixelRatio(ctx);
...@@ -55,7 +56,7 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -55,7 +56,7 @@ export class MkMaterialDetailComponent implements OnInit {
canvas.height = H * ratio; canvas.height = H * ratio;
canvas.style.width = W + 'px'; canvas.style.width = W + 'px';
canvas.style.height = H + 'px'; canvas.style.height = H + 'px';
const qr = document.querySelector('#qrcode'); // const qr = document.querySelector('#qrcode');
const img = new Image(); const img = new Image();
// 画圆形头像 // 画圆形头像
const avatarurlWidth = 50 * ratio; // 绘制的头像宽度 const avatarurlWidth = 50 * ratio; // 绘制的头像宽度
...@@ -79,43 +80,31 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -79,43 +80,31 @@ export class MkMaterialDetailComponent implements OnInit {
ctx.drawImage(avatarImg, avatarurlX, avatarurlY, avatarurlWidth, avatarurlHeigth); // 推进去图片，必须是https图片 ctx.drawImage(avatarImg, avatarurlX, avatarurlY, avatarurlWidth, avatarurlHeigth); // 推进去图片，必须是https图片
ctx.restore(); // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制 ctx.restore(); // 恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
ctx.save(); ctx.save();
// 对二维码进行初始化
const qrCode = new QRCode(qr, {
width: 100,
height: 100,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
// 为二维码设置内容
qrCode.makeCode(this.shareInfo.url);
// 我们的qrcode生成二维码之后也会有一个canvas对象我们获取到这个元素
const newCanvas = qr.firstChild as HTMLCanvasElement;
const base64 = newCanvas.toDataURL('image/png', 1);
// 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了 // 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了
const shareQr = new Image(); const shareQr = new Image();
const qrcodeBgX = document.body.clientWidth - (this.rightWidth + this.qrcodeBgWidth);
const qrcodeBgY = document.body.clientHeight - (this.bottomHeight + this.qrcodeBgWidth);
const qrcodeX = qrcodeBgX + this.qrcodePadding;
const qrcodeY = qrcodeBgY + this.qrcodePadding;
// 设置base64编码格式值 // 设置base64编码格式值
shareQr.src = base64; shareQr.src = qrcodeUrl;
shareQr.onload = () => { shareQr.onload = () => {
ctx.save(); const qrcodeBgX = document.body.clientWidth - (this.rightWidth + this.qrcodeBgWidth);
const qrcodeBgY = document.body.clientHeight - (this.bottomHeight + this.qrcodeBgWidth);
const qrcodeX = qrcodeBgX + this.qrcodePadding;
const qrcodeY = qrcodeBgY + this.qrcodePadding;
ctx.fillStyle = '#fff'; ctx.fillStyle = '#fff';
ctx.fillRect(qrcodeBgX, qrcodeBgY, this.qrcodeBgWidth, this.qrcodeBgWidth); ctx.fillRect(qrcodeBgX, qrcodeBgY, this.qrcodeBgWidth, this.qrcodeBgWidth);
ctx.save(); ctx.save();
// 绘制图像 就是绘制二维码到我们自己写的canvas中去 // // 绘制图像 就是绘制二维码到我们自己写的canvas中去
ctx.drawImage(shareQr, qrcodeX, qrcodeY, this.qrcodeWidth, this.qrcodeWidth); ctx.drawImage(shareQr, qrcodeX, qrcodeY, this.qrcodeWidth, this.qrcodeWidth);
document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1)); document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
this.canvas.nativeElement.style.display = 'none'; this.canvas.nativeElement.style.display = 'none';
}; };
// 绘制字体 // 绘制字体
ctx.fillStyle = '#000'; ctx.fillStyle = '#000';
ctx.font = `bold ${15 * ratio}px 微软雅黑`; ctx.font = `${12 * ratio}px 微软雅黑`;
ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 75 * ratio, avatarurlY + 15 * ratio); // Y指的是文字底部的位置 ctx.fillText(`${this.lifeCustomerInfo.practitionerBasicInfo.name}`, 75 * ratio, avatarurlY + 15 * ratio); // Y指的是文字底部的位置
ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 75 * ratio, avatarurlY + 45 * ratio); ctx.fillText(`银盾保险经纪`, 75 * ratio, avatarurlY + 30 * ratio); // Y指的是文字底部的位置
ctx.fillText(`${this.lifeCustomerInfo.mobileNo}`, 75 * ratio, avatarurlY + 45 * ratio);
ctx.scale(ratio, ratio); ctx.scale(ratio, ratio);
}; };
} }
...@@ -142,13 +131,56 @@ export class MkMaterialDetailComponent implements OnInit { ...@@ -142,13 +131,56 @@ export class MkMaterialDetailComponent implements OnInit {
}); });
} }
download(canvas) { download() {
const a = document.createElement('a'); const a = document.createElement('a');
// 设置地址 // 设置地址
const canvas = document.querySelector('#qrcode canvas') as HTMLCanvasElement;
a.href = canvas.toDataURL('image/png', 1); a.href = canvas.toDataURL('image/png', 1);
// 设置下载名称 // 设置下载名称
a.download = '银盾保险经纪'; a.download = '银盾保险经纪';
// 触发点击事件 // 触发点击事件
a.click(); a.click();
} }
qrcode() {
return new Promise((resolve, reject) => {
const qr = document.querySelector('#qrcode');
// 对二维码进行初始化
const qrCode = new QRCode(qr, {
// 二维码内容
text: `${this.shareInfo.url}`,
// 二维码宽度
width: 100,
// 二维码高度
height: 100,
// 二维码前景色
colorDark: '#000',
// 二维码背景色
colorLight: '#fff',
/*!
容错级别，可设置为：
QRCode.CorrectLevel.L
QRCode.CorrectLevel.M
QRCode.CorrectLevel.Q
QRCode.CorrectLevel.H
*/
correctLevel: QRCode.CorrectLevel.H,
// 二维码中心图片
iconSrc: `./assets/images/icons/yd.jpg`,
// 二维码中心图片边框弧度
iconRadius: 6,
// 二维码中心图片边框宽度
iconBorderWidth: 5,
// 二维码中心图片边框颜色
iconBorderColor: '#fff',
});
// 我们的qrcode生成二维码之后也会有一个canvas对象我们获取到这个元素
// 这里的image只能在onload里面绘制 在外面就会被覆盖了 因为优先加载完毕就会优先绘制 然后就被之后绘制的海报背景遮挡了
setTimeout(() => {
const newCanvas = document.querySelector('#qrcode canvas') as HTMLCanvasElement;
const qrcodeUrl = newCanvas.toDataURL('image/png', 1);
resolve(qrcodeUrl);
}, 100)
});
}
} }
src/index.html
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<body> <body>
<app-root></app-root> <app-root></app-root>
<script src="assets/js/jquery.min.js"></script> <script src="assets/js/jquery.min.js"></script>
<script src="assets/js/qrcode.min.js"></script> <script src="assets/js/qrcode.js"></script>
<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>--> <!--<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>-->
<script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</body> </body>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment