在Vue中⽤canvas实现⼆维码和图⽚合成海报的⽅法
在项⽬中经常会遇到需要将不同的⼆维码放到⼀张通⽤图⽚上，提供⽤户下载
简单来说，就是利⽤canvas将同等⽐例的⼆维码在图⽚上叠加，⽣成海报
1. 设置相应⽐例
⼀般来说海报背景都是固定的，可以直接放在public⽂件夹，⼆维码可根据后台返回数据，也可⽤canvas⽣成，在此不多赘述
import posterBgImg from '../public/images/poster_bg.png';// 海报底图
import qrcodeImg from '../public/images/qrcode.png';// ⼆维码
export default{
name: 'qrcode-in-poster',
data(){
return {
posterBgImg,
qrcodeImg,
posterSize: 930/650,// 海报⾼宽⽐例
qrCodeSize: {// ⼆维码与海报对应⽐例 =》⽤于设置⼆维码在海报中的位置
width: 270/650,
height: 270/930,
left: 190/650,
top: 448/650
},
poster: '',// 合成图⽚
}
}
};
2. 获取屏幕宽度
限定移动端最⼤宽度为 480px
computed: {
screenWidth(){
let w = document.body.clientWidt || document.documentElement.clientWidth || 375;
return w > 480 ? 480 : w ;
}
};
3. 组合图⽚
methods: {
combinedPoster(_url){
let that = this,
qrcode = this.qrcodeImg; // ⼆维码地址
console.log("open draw: ", _url, qrcode)
let base64 = '',
canvas = ateElement('canvas'),
ctx = Context("2d"),
_w = this.screenWidth * 2, // 图⽚宽度：由于⼿机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于⼿机屏幕，会导致⽣成的图⽚分辨率不够⽽模糊      _h = this.posterSize * _w, // 图⽚⾼度
_qr_w = this.qrCodeSize.width * _w, // ⼆维码宽 = ⽐例 * 宽度
_qr_h = this.qrCodeSize.height * _h, // ⼆维码⾼ = ⽐例 * ⾼度
_qr_t = p * _w, // ⼆维码顶部距离 = ⽐例 * 宽度
_qr_l = this.qrCodeSize.left * _w; // ⼆维码左侧距离 = ⽐例 * 宽度
// 设置canvas宽⾼
canvas.width = _w;
canvas.height = _h;
<(0, 0, _w, _h);
ctx.fillStyle = '#fff'; // 填充颜⾊
ctx.fill();
// 迭代⽣成：第⼀层（底图）+ 第⼆层（⼆维码）
// file：⽂件，size：[顶部距离，左侧距离，宽度，⾼度]
let _list = [
{
file: _url,
size: [0, 0, _w, _h]
}, {
file: qrcode,
size: [_qr_l, _qr_t, _qr_w, _qr_h]
}
];
// 开始绘画
let drawing = (_index) => {
/
/ 判断当前索引 =》是否已绘制完毕
if (_index < _list.length) {
// 等图⽚预加载后画图
let img = new Image(),
timeStamp = new Date().getTime();
// 防⽌跨域
img.setAttribute('crossOrigin', 'anonymous')
// 链接加上时间戳
img.src = _list[_index].file + '?' + timeStamp
// 画图
ctx.drawImage(img, ..._list[_index].size)
// 递归_list
drawing(_index + 1)
}
} else {
// ⽣成图⽚
base64 = DataURL("image/png")
if (base64) {
// 赋值相应海报上
this.$set(that, 'poster', base64)
}
}
}
drawing(0)
svg和canvas的区别
}
};
mounted(){
// 需要合成海报的图⽚
this.draw(this.posterBgImg)
}
4. 下载
点击下载合成图⽚
methods: {
handleDownload(){
if(this.poster){
let a = ateElement("a");
a.setAttribute("download", "海报下载-"+(new Date().getTime()));
a.href = this.poster
a.click()
}else{
console.log("海报不存在，请重新⽣成！")
}
}
}
tips：不适⽤于浏览器，只能提⽰⽤户长按保存。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。