QRCode.toDataURL('some text', { version: 2 }, function (err, url) {
console.log(url)
此处只介绍前端常用的三个api，toCanvas()、toDataUrl()、toString()
toCanvas()：二维码生成canvas
toDataUrl()：生成base64字符串，将图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会再单独进行请求加载；可以防止由于图片路径错误导致图片加载失败的问题。
toString()：生成svg二进制字符
Options
<canvas id="canvas" width="300" height="300"></canvas>
2.获取上下文对象
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
3.定义绘制路径
context.beginPath();
context.rect(20, 40, 200, 80);
context.closePath();
4.设置图形属性
context.strokeStyle = '#f00'; // 设置线条样式
context.fillStyle = "#ccc"; // 设置填充样式
5.绘制图形
context.stroke();
context.fill();
二维码实现
安装node-qrcode
npm install qrcode
import QRCode from 'qrcode'
<canvas id="QRCode_header" style=" display: block;"></canvas>
绘制canvas
// 配置options
let opts = {
errorCorrectionLevel: "H", //容错级别
margin: 5, //二维码留白边距
width: 280, //二维码宽度
text: "https://www.baidu.com/", //二维码内容
color: {
dark: "#333333", //前景色
light: "#ffffff", //背景色
// 获取要绘制二维码的DOM节点
let canvasDom = document.getElementById("QRCode_header");
// 将获取到的数据画到canvasDom （canvas）上
const canvas = await QRCode.toCanvas(canvasDom , this.qrUrl, opts);
// 绘制文字标题
const size = 280 // 二维码高度
const qrText = '二维码标题' // 二维码标题
const fontWeight='bold' // 字体-粗体
const fontSize = 20 // 字体大小
const tb = 15 // 底部文字上下间距
const realHeight = size + fontSize + 2*tb // 实际高度
// 获取画布的上下文对象
const ctx = canvas.getContext("2d");
console.log(ctx,'ctx');
// 获取二维码数据
const data = ctx.getImageData(0, 0, size, size);
canvas.setAttribute('height', realHeight); // 重设画布像素高度
canvas.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
ctx.fillRect(0, 0, size, realHeight) // 绘制“已填色”的矩形
ctx.putImageData(data, 0, 0)// 填充二维码数据
ctx.font = `{{fontWeight} {{fontSize}px Arial`; // 设置字体格式
const textWidth = ctx.measureText(qrText).width; // 获取文字真实宽度
const ftop = size + tb; //文字距顶部位置
const fleft = (size - textWidth) / 2; //根据字体大小计算文字left
const textPadding = fontSize / 2; // 设置字体边距
ctx.fillStyle = "#fff"; // 设置底部背景色
ctx.fillRect(0, size, size, realHeight - size); // 底部填充位置
// 标题文字填充位置
ctx.fillRect(
fleft - textPadding / 2,
ftop - textPadding / 2,
textWidth + textPadding,
fontSize + textPadding
ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
ctx.fillStyle = "#333";// 文本颜色
ctx.fillText(qrText, fleft, ftop); // 文本填充
二、使用vue-qr+html2canvas
vue-qr
npm install vue-qr
import VueQr from 'vue-qr'
components: {VueQr}
组件常用参数
二维码内容，即扫描二维码后跳转的页面
二维码大小，宽高相等
margin
二维码图像的外边距，默认20px
bgSrc
嵌入的背景图地址
logoSrc
嵌入至二维码中心的logo地址
logoScale
中间logo的尺寸
dotScale
二维码的点的大小
colorDark
实点的颜色（和colorLight一起设置才有效）
colorLight
空白的颜色（和colorDark一起设置才有效）
autoColor
若为true，背景图的主要颜色将作为实点的颜色，即colorDark，默认true
html2canvas
什么是html2canvas？
html2canvas的作用就是允许我们直接在用户浏览器上拍摄网页或者某一部分的截图。它的屏幕截图是基于DOM的，因此，可能不会100%精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。
该脚本会遍历所加载页面的 DOM，收集其中所有元素的信息，然后利用这些信息构建页面的表示形式。换句话说，它实际上并不对页面进行截图，而是根据从 DOM 中读取的属性来构建页面的表示形式。因此，它只能正确呈现它所能理解的属性，也就是说，会许多 CSS 属性无法工作。
支持的浏览器
Firefox 3.5+
Google Chrome
Opera 12+
Safari 6+
npm install html2canvas
import html2canvas from 'html2canvas';
html2canvas(element, options);
node-qrcode+canvas
<template>
<div class="home" :gutters="20">
<canvas id="QRCode_header" style=" display: block;"></canvas>
<button @click="downloadQRCode">下载</button>
</template>
<script>
import QRCode from 'qrcode'
export default {
data() {
return {
qrUrl: ''
methods: {
async getQRCode() {
this.qrUrl = 'https://www.baidu.com/'
// 配置options
let opts = {
errorCorrectionLevel: "H", //容错级别
margin: 5, //二维码留白边距
width: 280, //二维码宽度
text: "https://www.baidu.com/", //二维码内容
color: {
dark: "#333333", //前景色
light: "#ffffff", //背景色
// 获取要绘制二维码的DOM节点
let canvasDom = document.getElementById("QRCode_header");
// 将获取到的数据画到canvasDom （canvas）上
const canvas = await QRCode.toCanvas(canvasDom , this.qrUrl, opts);
// 绘制文字标题
const size = 280 // 二维码高度
const qrText = '二维码标题' // 二维码标题
const fontWeight='bold' // 字体-粗体
const fontSize = 20 // 字体大小
const tb = 15 // 底部文字上下间距
const realHeight = size + fontSize + 2*tb // 实际高度
// 获取画布的上下文对象
const ctx = canvas.getContext("2d");
console.log(ctx,'ctx');
// 获取二维码数据
const data = ctx.getImageData(0, 0, size, size);
canvas.setAttribute('height', realHeight); // 重设画布像素高度
canvas.style.setProperty('height', realHeight + 'px'); // 重设画布实际高度
ctx.fillRect(0, 0, size, realHeight) // 绘制“已填色”的矩形
ctx.putImageData(data, 0, 0)// 填充二维码数据
ctx.font = `{{fontWeight} {{fontSize}px Arial`; // 设置字体格式
const textWidth = ctx.measureText(qrText).width; // 获取文字真实宽度
const ftop = size + tb; //文字距顶部位置
const fleft = (size - textWidth) / 2; //根据字体大小计算文字left
const textPadding = fontSize / 2; // 设置字体边距
ctx.fillStyle = "#fff"; // 设置底部背景色
ctx.fillRect(0, size, size, realHeight - size); // 底部填充位置
// 标题文字填充位置
ctx.fillRect(
fleft - textPadding / 2,
ftop - textPadding / 2,
textWidth + textPadding,
fontSize + textPadding
ctx.textBaseline = "top"; //设置绘制文本时的文本基线。
ctx.fillStyle = "#333";// 文本颜色
ctx.fillText(qrText, fleft, ftop); // 文本填充
// 下载二维码
downloadQRCode() {
let canvas = document.getElementById('QRCode_header')
let a = document.createElement('a')
a.href = canvas.toDataURL('img/png')
a.download = '二维码cc'
a.click()
mounted() {
this.getQRCode()
</script>
vue-qr+html2canvas
<template>
<div id="qrcode-title">
<vue-qr
id="qrcode-canvas"
:size="200"
:margin="10"
:text="'http://baidu.com'"
:logoSrc="require('../../assets/images/user-default.png')"
></vue-qr>
<div>二维码标题</div>
<button @click="downloadQRCode">下载</button>
</template>
<script>
import VueQr from 'vue-qr'
import html2canvas from 'html2canvas';
export default {
components: {VueQr},
methods: {
downloadQRCode() {
html2canvas(document.getElementById('qrcode-title')).then(canvas => {
let dataURL = canvas.toDataURL("image/png");
if (dataURL !== "") {
let a = document.createElement('a')
a.download = "项目二维码";
a.href = dataURL;
a.click()
</script>
<style lang="scss" scoped>
#qrcode-title {
width: 300px;
display: flex;
flex-direction: column;
#qrcode-title div {
text-align: center;
font-size: 20px;
margin-top: 20px;
margin-bottom: 20px;
</style>
前端大屏开发详解 - 布局篇
本篇通过一个实例，介绍了适配、布局相关css、定位相关css以及使用border-image实现图片拉伸不变形的效果。熟练掌握并且灵活运用css可以使页面结构更加清晰简洁（没有多余的容器或元素），也可以使页面呈现更好的效果。
上海总部：上海市宝山区长江南路99号2幢203室
河南研发中心：河南省信阳市羊山新区新八街信阳电子商务产业园536室
山东研发中心：山东省日照市东港区临沂路259号日照市人力资源服务产业园 1401-1402室
150-2190-5212
