如何在Vue中用帆布实现二维码和图片合成海报

　　介绍

小编给大家分享一下如何在Vue中用帆布实现二维码和图片合成海报,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载

简单来说,就是利用帆布将同等比例的二维码在图片上叠加,生成海报

<强> 1。设置相应比例

一般来说海报背景都是固定的,可以直接放在公共文件夹,二维码可根据后台返回数据,也可用帆布生成,在此不多赘述

import  posterBgImg 得到& # 39;公共/图片/. ./poster_bg.png& # 39;;//,海报底图 　　import  qrcodeImg 得到& # 39;公共/图片/. ./qrcode.png& # 39;;//,二维码 　　export 默认{ 　　,,名字:& # 39;qrcode-in-poster& # 39; 　　数据才能(){ 　　,,,return  { 　　,,,,,posterBgImg, 　　,,,,,qrcodeImg, 　　,,,,,posterSize:, 930/650,//,海报高宽比例 　　,,,,,qrCodeSize:,{//,二维码与海报对应比例,=?用于设置二维码在海报中的位置 　　,,,,,,,宽度:,270/650, 　　,,,,,,,身高:,270/930, 　　,,,,,,,左:,190/650, 　　,,,,,,,:448/650 　　,,,,,}, 　　,,,,,:海报,& # 39;& # 39;//,合成图片 　　,,,} 　　,,} 　　};

<强> 2。获取屏幕宽度

限定移动端最大宽度为480 px

计算:,{ 　　screenWidth才能(){ 　　,,,let  w =, document.body.clientWidt  | |, document.documentElement.clientWidth  | |, 375; 　　,,,return  w 祝辞,480,,480,:,w ; 　　,,} 　　};

<强> 3。组合图片

方法:,{ 　　combinedPoster才能(_url) { 　　,,,let  that =,, 　　,,,,,qrcode =, this.qrcodeImg;,//,二维码地址 　　,, 　　,,,console.log (“open 画:“,,_url,, qrcode) 　　,,,let  base64 =, & # 39; & # 39; 　　,,,,,canvas =, document.createElement(& # 39;帆布# 39;), 　　,,,,,ctx =, canvas.getContext (“2 d"), 　　,,,,,_w =, this.screenWidth  *, 2,,//,图片宽度:,由于手机屏幕时视网膜屏,都会多倍渲染,在此只设置2倍,如果直接设置等于手机屏幕,会导致生成的图片分辨率不够而模糊 　　,,,,,_h =, this.posterSize  *, _w,,//,图片高度 　　,,,,,_qr_w =, this.qrCodeSize.width  *, _w,,//,二维码宽,=,比例,*,宽度 　　,,,,,_qr_h =, this.qrCodeSize.height  *, _h,,//,二维码高,=,比例,*,高度 　　,,,,,_qr_t =, this.qrCodeSize.top  *, _w,,//,二维码顶部距离,=,比例,*,宽度 　　,,,,,_qr_l =, this.qrCodeSize.left  *, _w;,//,二维码左侧距离,=,比例,*,宽度 　　,,,//,设置帆布宽高,, 　　,,,canvas.width =, _w;, 　　,,,canvas.height =, _h; 　　,,,ctx.rect (0, 0, _w,, _h); 　　,,,ctx.fillStyle =, & # 39; # fff& # 39;,,//,填充颜色 　　,,,ctx.fill (); 　　,,,//,迭代生成:,第一层(底图)+,第二层(二维码) 　　,,,//,文件:文件,大小:[顶部距离,左侧距离,宽度,高度) 　　,,,let  _list =, (, 　　,,,,,{ 　　,,,,,,,文件:,_url, 　　,,,,,,,尺寸:,(0,0,_w,, _h] 　　,,,,,},{ 　　,,,,,,,文件:,qrcode, 　　,,,,,,,尺寸:,(_qr_t, _qr_l,还以为,_qr_w, _qr_h] 　　,,,,,} 　　,,,); 　　,,,//,开始绘画 　　,,,let 管理=,(_index),=祝辞,{ 　　,,,,,//,判断当前索引,=?是否已绘制完毕 　　,,,,,if  (_index  & lt;, _list.length), { 　　,,,,,,,//,等图片预加载后画的图 　　,,,,,,,let  img =, new 图像(), 　　,,,,,,,,,timeStamp =, new 日期().getTime (); 　　,,,,,,,//,防止跨域 　　,,,,,,,img.setAttribute (& # 39; crossOrigin& # 39;,, & # 39;匿名# 39;) 　　,,,,,,,//,链接加上时间戳 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

如何在Vue中用帆布实现二维码和图片合成海报