在Vue中用canvas实现二维码和图片合成海报的方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在Vue中用canvas实现二维码和图片合成海报的方法,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2777字,纯文字阅读大概需要4分钟。
内容图文
在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载
简单来说,就是利用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 = document.createElement('canvas'), ctx = canvas.getContext("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 = this.qrCodeSize.top * _w, // 二维码顶部距离 = 比例 * 宽度 _qr_l = this.qrCodeSize.left * _w; // 二维码左侧距离 = 比例 * 宽度 // 设置canvas宽高 canvas.width = _w; canvas.height = _h; ctx.rect(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 img.onload = function() { // 画图 ctx.drawImage(img, ..._list[_index].size) // 递归_list drawing(_index + 1) } } else { // 生成图片 base64 = canvas.toDataURL("image/png") if (base64) { // 赋值相应海报上 this.$set(that, 'poster', base64) } } } drawing(0) } }; mounted(){ // 需要合成海报的图片 this.draw(this.posterBgImg) }
4. 下载
点击下载合成图片
methods: { handleDownload(){ if(this.poster){ let a = document.createElement("a"); a.setAttribute("download", "海报下载-"+(new Date().getTime())); a.href = this.poster a.click() }else{ console.log("海报不存在,请重新生成!") } } }
tips:不适用于微信浏览器,只能提示用户长按保存。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的在Vue中用canvas实现二维码和图片合成海报的方法全部内容,希望文章能够帮你解决在Vue中用canvas实现二维码和图片合成海报的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。