Vue-canvas-poster generated poster
Install: NPM I vue-canvas-poster –save
Method 1: use in main.js
import VueCanvasPoster from 'vue-canvas-poster'
Vue.use(VueCanvasPoster)
Copy the codeMethod 2: Use it directly in components
In the template 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'}">Copy the code1. First obtain the width of the screen, and scale the generated picture equally. Here, I scale the width and width of the poster by 0.6 times, and then scale it equally
2. ClientWidth clientWidth: document. DocumentElement. ClientWidth
3. The key point is that the canvas should also be scaled in accordance with the poster map, otherwise the head picture or TXT text on the painting will be distorted and fuzzy
Assume that when you set the canvas width to 500, the height is also scaled to the aspect ratio of the poster
PosterImg: ",// Generated poster 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' }, },], },Copy the codeGet the poster content fill view
Let {data} = await this $fetch. GetShareCode ({shareId: ' ', founderId: enclosing founderId}) / / access to share code, 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}`;Copy the codeThe effect drawing is
Use QrcodeJs2 to generate two-dimensional code some mobile phone long press can not identify and forward the problem
The simple method is to hide the canvas and assign the generated base64 image to a new IMG tag
<template> <div id="qrcode" style='display:none'></div> <img src=".. PNG "style='display:none' ID ="myLogo" /> // qR code logo <div ID ="codeDiv"></div> </template>Copy the codecreateAddCode(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; 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) }) },Copy the coderendering
The history route of the VUE deployment server is blank
In router.js
de:'history',
base: '/web',
Copy the codeConfigure publicPath in vue.config.js: ‘/web’
const path = require("path"); Module. exports = {// If you don't need eslint, set lintOnSave to false: Map file productionSourceMap: false, // baseUrl: "/", // base path pluginOptions: { "style-resources-loader": { preProcessor: "less", patterns: [/ / this is combined with their own path, and cannot be used as follows: (alias) configured in alias path path. The resolve (__dirname,. / SRC/style/theme. "less"),]}}, CSS: {loaderOptions: { css: {}, postcss: { plugins: [// require("autoprefixer")(), // require("postcss-pxtorem")({rootValue: SelectorBlackList: [".van", ".my-van"], // The selector to ignore and keep as px. ["*"], // Can be changed from px to rem property. MinPixelValue: 2 // Sets the minimum pixel value to be replaced.})]}}}, publicPath: '/web', outputDir: Dist ", devServer: {/* automatically open browser */ open: true, /* set to 0.0.0.0 and all addresses can be accessed */ host: "localhost", port: 80, HTTPS: False, hotOnly: false, disableHostCheck: true, /* Use proxy */ proxy: {"/ API ": {target: "XXX" changeOrigin: true, secure: false, pathRewrite: { "^/api": "" } } } } };Copy the code