最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

在Vue中用canvas实现二维码和图片合成海报的方法

来源:动视网 责编:小采 时间:2020-11-27 21:55:22
文档

在Vue中用canvas实现二维码和图片合成海报的方法

在Vue中用canvas实现二维码和图片合成海报的方法:在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用c
推荐度:
导读在Vue中用canvas实现二维码和图片合成海报的方法:在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用c


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

简单来说,就是利用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 base = '',
 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 {
 // 生成图片
 base = canvas.toDataURL("image/png")
 if (base) {
 // 赋值相应海报上
 this.$set(that, 'poster', base)
 }
 }
 }
 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实现二维码和图片合成海报的方法:在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载 简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报 1. 设置相应比例 一般来说海报背景都是固定的,可以直接放在public文件夹,二维码可根据后台返回数据,也可用c
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top