在Vue中用canvas实现二维码和图片合成海报的方法
作者:Shyla 发布时间:2024-05-09 09:53:23
标签: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 = 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:不适用于微信浏览器,只能提示用户长按保存。
来源:https://segmentfault.com/a/1190000019429702


猜你喜欢
- 本文实例讲述了Python基于opencv实现的简单画板功能。分享给大家供大家参考,具体如下:import cv2import numpy
- php ffmpeg获取视频缩略图1.环境centos 7ffmpeg version 2.8.15 Copyright2.centos7安
- 这篇文章主要介绍了python isinstance函数用法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
- 1.首先读取Excel文件数据代表了各个城市店铺的装修和配置费用,要统计出装修和配置项的总费用并进行加和计算;2.pandas实现过程imp
- 1. 错误描述之前在学习Python的过程中,导入自己写的包文件时,与之相关的方法等都会被划红线,但并不影响代码执行,如图:看着红线确实有点
- 在XHTML标签中有一些标签的作用是相似的,当然这里的相似是指语义相似,以至于很多人都不清楚这些相似的标签如何使用,那么今天的主题就是分解相
- 表单内有两个提交按钮,要实现当点击不同的提交按钮时,分别进行两个不同的处理过程,在这里有实现表单多按钮提交action的处理方法分享给大家。
- 目前,很多互联网应用程序都提供了全文搜索功能,用户可以使用一个词或者词语片断作为查询项目来定位匹配的记录。在后台,这些程序使用在一个SELE
- 1、背景由于办公需要“每天定时推送某消息用来提醒群里面所有人”,于是决定用企业微信自带的机器人来实现此功能。具体方法我来一一讲述。2、企业微
- 02条件语句和while循环三目运算a = 6#原判断语句if a > 5:print(True)else:print(False)#
- 如何做一个树状展开视图来显示自己的记录结构?在SQL中,如何做一个可收起和展开树状结构图?就是资源管理器左栏的那种效果。这要用到Data s
- 连续活跃登陆的用户指至少连续2天都活跃登录的用户解决类似场景的问题创建数据CREATE TABLE test5active(dt strin
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- 思路一、想要实现登录豆瓣关键点分析真实post地址 ----寻找它的formdata,如下图,按浏览器的F12可以找到。实战操作实现:模拟登
- __author__ = 'clownfish'#coding:utf-8import urllib2,urllib,coo
- 今天的主题!最近很多朋友问起pyecharts,尤其是地理坐标图的制作,都说被其图形之美给吸引到了。刚好今天也有同事问起来,那么今天就以py
- 前言:时间戳的定义Unix时间戳(Unix时间戳)或称Unix时间(Unix时间),POSIX时间(POSIX时间),是一种时间表示方式,定
- 先来看看js中的Null类型表示什么?null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象,一般一个未定义的变量在初次使用
- 浅谈NumPy中的维度AxisNumPy中的维度是一个很重要的概念,很多函数的参数都需要给定维度Axis,如何直观的理解维度呢?我们首先以二
- 首先, 补充下对node 的理解:nodeJs 是一个单进程单线程应用程序, 但是通过事件和回调支持并发, 所以性能非常高~那么什么是单进程