vue-canvas-poster的生成海报
安装：npm i vue-canvas-poster --save
方法一:main.js中使用
import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)
方法二：组件中直接使用
在template模板中
<vue-canvas-poster :widthPixels="1000" :painting="painting" @success="success" @fail="fail" ></vue-canvas-poster>
<img :src="posterImg" v-if='posterImg' :style="{width: clientWidth*0.6+'px',height: clientWidth*2.16*0.6+'px'}">
1. 首先获取屏幕的宽度，对生成的图片等比缩放，我这里是将海报图的宽高同时缩放0.6倍以后再等比缩放的，2.16为 海报的height/海报的width
2. clientWidth 为 clientWidth:document.documentElement.clientWidth
3. 重点是画布也要按照海报图等比缩放，不然画上的头像或者txt文字会失真，模糊
假定设置画布宽为500 时，高度也要缩放到海报的宽高比
posterImg: '',//生成的海报
painting: {
width: '500px',
height: `${500*2.16}px`,
background: require('../assets/images/bg.jpg'),
views: [{
type: 'image',
url: '',
css: {
top: '460px',
left: '210px',
borderRadius: '100px',
width: '100px',
height: '100px',
},
}, {
type: 'text',
text: '',
css: {
top: '565px',
left: `${260-260/2}px`,
width: '260px',
color:'#fff',
maxLines: 1,
fontSize: '32px',
textAlign:'center'
},
}, {
type: 'qrcode',
content: '',
css: {
bottom: '200px',
right: '150px',
color: '#000',
background: '#fff',
width: '190px',
height: '190px',
borderWidth: '10px',
borderColor: '#fff'
},
},],
},
获取海报内容填充视图
let {data}=await this.$fetch.getShareCode({shareId:'',founderId:this.founderId})//获取分享码，分销商shareId为空字符串
this.painting.views[0].url=data.avatar;
this.painting.views[1].text=data.nick;
this.painting.views[2].content=`${baseUrl}/web/Home?shareId=${data.shareId}`;
效果图即为
;
使用qrcodejs2生成二维码有的手机长按无法识别和转发的问题
方法也比较简单就是将画布隐藏，生成的base64的图片地赋值到自己新建的img标签中
<template>
<div id="qrcode" style='display:none'></div>
<img src="../assets/images/qiye2.png" style='display:none' id="myLogo" /> //二维码logo
<div id="codeDiv"></div>
</template>
createAddCode(qrcodeValue){
let qrcode =new QRCode(document.getElementById('qrcode'), {
render: qrcodeValue,
text: 'xxxxx',
width: 150,
height: 150,
colorDark: "#000",
colorLight: "#ffffff",
correctLevel : QRCode.CorrectLevel.H
});
// $("#qrcode canvas")[0].getContext('2d').drawImage($("#myLogo")[0], (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
this.$nextTick(() => {
let canvas = document.getElementsByTagName('canvas')[0];
var qrWidth = 150;
var qrHeight = 150;
var logoQrWidth = qrWidth / 4;
var logoQrHeight = qrHeight / 4;
//再二维码中间放置一个logo
canvas.getContext('2d').drawImage(document.getElementById('myLogo'), (qrWidth - logoQrWidth) / 2, (qrHeight - logoQrHeight) / 2, logoQrWidth, logoQrHeight);
let img = this.convertCanvasToImage(canvas)
let box = document.getElementById('codeDiv');
box.append(img)
})
},
效果图
vue 部署服务器 history路由白屏问题
在 router.js中配置
de:'history',
base: '/web',
在 vue.config.js中配置 publicPath: '/web'
const path = require("path");
module.exports = {
// 如果你不需要使用eslint，把lintOnSave设为false即可
lintOnSave: false,
// 设为false打包时不生成.map文件
productionSourceMap: false,
// baseUrl: "/", // 基本路径
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [
// 这个是加上自己的路径,不能使用(如下:alias)中配置的别名路径
path.resolve(__dirname, "./src/style/theme.less"),
]
}
},
css: {
loaderOptions: {
css: {},
postcss: {
plugins: [
// 补全css前缀(解决兼容性)
require("autoprefixer")(),
// 把px单位换算成rem单位
require("postcss-pxtorem")({
rootValue: 75, // 换算的基数(设计图750的根字体为32)
selectorBlackList: [".van", ".my-van"], // 要忽略的选择器并保留为px。
propList: ["*"], // 可以从px更改为rem的属性。
minPixelValue: 2 // 设置要替换的最小像素值。
})
]
}
}
},
publicPath: '/web',
outputDir: "dist",
devServer: {
/* 自动打开浏览器 */
open: true,
/* 设置为0.0.0.0则所有的地址均能访问 */
host: "localhost",
port: 80,
https: false,
hotOnly: false,
disableHostCheck: true,
/* 使用代理 */
proxy: {
"/api": {
target: "xxx"
changeOrigin: true,
secure: false,
pathRewrite: {
"^/api": ""
}
}
}
}
};
