“This is the sixth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

preface

It has been more than three days since the first text challenge of 2022. There are stock but no delivery. After all, if you want to try for the Lucky prize of Spring Festival, you still have to have your dream. For this article, I do not plan to take full attendance for 40 days, anyway, I can calculate how many days, mainly in order to leave a record for myself, by the way to share their problems, to avoid everyone to step on the pit.

This time mainly to talk about how to encapsulate a Vue watermark component? After all, the watermarking component provided by Antd Pro with React is excellent. Vue project uses other people’s watermarking component, so it is better to do it yourself.

Demand background

Well, the requirement for the watermark component is not much complicated, just a sentence: all pages are watermarked, the watermark text is the user’s name and mobile phone number. In fact, the main reason why we want to encapsulate the watermark component of Vue here is that our system is a converged platform. The development stack of the main platform is Vue, while the embedded page is React. We use the watermark component of Antd Pro for the embedded page, so the product thinks it is ok to use it. Don’t understand technology products are really cute ah ^_^. We can’t. If we don’t have wheels then we need to build wheels. Peace is precious.

The development of

React and Vue both use watermark components, so let’s talk about how they are used in development. First, let’s talk about how they are encapsulated in Vue project. After all, someone else’s is ready to use.

A watermark component in a Vue project

In fact, packaging components do not know how to start, first to see how others existing components are implemented, refer to the implementation of ideas and style layout, so that the inspiration will be wide open, natural will be easy to come. I also referred to Antd Pro’s implementation of the watermark component, but the technology became Vue. All right, it’s got to be on paper. Let’s go.

Create Watermark. Vue file:

<template> <div :style="overlapStyle"> <slot></slot> <div class="bit-mark-wrap" :style="{'background-image': `url(${base64URL})`}"></div> <canvas class="bit-watermark-canvas" ref="canvas" width="450" height="320" /> </div> </template> <script> /** * background Watermark component */ export default {name: 'Watermark', props: {text: String, overlapStyle: {type: String, default () { return '' } } }, data () { return { base64URL: '' } }, mounted () { this.drawInit() }, methods: { drawInit: function () { const { text } = this let ctx = this.$refs.canvas.getContext('2d') ctx.width = 120 ctx.height = 160 ctx.font = '22px normal' ctx.fillStyle = 'rgba(0, 0, 0, .15)' ctx.rotate(-22 * Math.PI / 180) ctx.fillText(text, 0, $refs.canvas. ToDataURL ('image/ PNG ')}} </script> <style type="text/ CSS "> .bit-watermark-canvas { position: fixed; bottom: -1000px; right: -1000px; } .bit-mark-wrap { z-index: 9; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: 460px; pointer-events: none; background-repeat: repeat; } </style>Copy the code

As can be seen from the above code, the core of watermarking is still drawn by canvas, and then the drawn content is converted into base64 format pictures, and the style is used to control whether it is tiled and displayed repeatedly. However, it can be seen that many attribute values of this component are written dead in packaging, which cannot achieve good reusability for changing requirements. Therefore, the code needs to be optimized to make the component more reusable.

After the optimization:

<template> <div :style="overlapStyle"> <slot></slot> <div class="bit-mark-wrap" :style="{'background-image': `url(${base64URL})`, 'background-size': `${gapX}px ${gapY}px`}" ></div> <canvas class="bit-watermark-canvas" ref="canvas" width="450" height="320" /> </div> </template> <script> /** * background Watermark component */ export default {name: 'Watermark', props: {text: String, overlapStyle: {type: String, default () { return '' } }, width: { type: Number, default () { return 120 } }, height: { type: Number, default () { return 160 } }, fontSize: { type: Number, default () { return 16 } }, fontColor: { type: String, default () { return '#ccc' } }, rotate: { type: Number, default () { return -22 } }, gapX: { type: Number, default () { return 320 } }, gapY: { type: Number, default () { return 222 } } }, data () { return { base64URL: '' } }, mounted () { this.drawInit() }, methods: { drawInit: function () { const { text, width, height, fontSize, fontColor, rotate } = this let ctx = this.$refs.canvas.getContext('2d') ctx.width = width ctx.height = height ctx.font = `${fontSize}px normal` ctx.fillStyle = fontColor ctx.rotate(rotate * Math.PI / 180) ctx.fillText(text, 0, $refs.canvas. ToDataURL ('image/ PNG ')}}} </script> <style lang=" SCSS" type="text/css"> .bit-watermark-canvas { position: fixed; bottom: -1000px; right: -1000px; } .bit-mark-wrap { z-index: 9; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-size: 320px; pointer-events: none; background-repeat: repeat; } </style>Copy the code

As you can see, I have made all the properties of the previous code into parameters, so that they can be passed in dynamically, so that each page can be reused with different requirements. Please refer to the following table for specific parameters:

API:

The rotate, gapX, and gapY parameters are highlighted. The rotate controls the watermark rotation Angle, which is -22 degrees by default. GapX is to control the horizontal spacing of watermarks in the page, that is, how many watermarks are displayed in each line. GapY controls the vertical spacing of watermarks in the page, that is, how many watermarks are displayed in each column.

You can see in the code above that there is no semicolon in the code format; “, this is mainly because our Vue project uses Eslint rules and is configured not to use semicolons, but our other projects do not use Eslint. Please don’t think that my code habits are bad when reading this article. Actually I have a code cleanliness bug.

Usage:

1) Import Watermark from '.. < Watermark overlapStyle="height: 100%;" >< router-view></router-view> </watermark> : text = "' 130 xxxx0000 zhang SAN" : rotate = "to 30" : height = "240" : gap - x = "320" : gap - y = "320" : the font and size = "18" : the font, color = "' red '" > <router-view></router-view> </watermark>Copy the code

Effect:

In order to show the effect, I put the watermark component outside the router-view. It does not mean that the component can only be referenced in this way, so don’t get me wrong. The watermark component can be referenced in any page required by the project. I just want to show the effect and save trouble to use it in this way. In this way, all pages of the system will be watermarked.

The Watermark component in the React project

Used in the watermark components React project, we don’t have to write their own a, watermark components Antd pro is sufficient to meet the project requirements, and may also write good than we do, I was encapsulated Vue because there is no ready-made, only oneself to, so the React in the project use watermark components I only said it is good to use, Hope well.

Install plug-in:

We just install Pro-Layout as needed, there is no need to install all Antd Pro plug-ins.

NPM I@ant-Design/Pro-layout or YARN I@ant-design/Pro-layoutCopy the code

Use:

Import {WaterMark} from "@ant-design/pro-layout"; 2) Use component: <WaterMark {... {... getWaterMarkProps(), gapX: 120, gapY: 140, } }> <div className="bit-chart-box"> <div>... </div> </div> </WaterMark>Copy the code

We defined a method for getWaterMarkProps() to obtain the properties of the watermarking component to ensure that all pages have a uniform style, and for pages that need to be characterized, we can override the properties to make changes and achieve different effects for different pages.

The getWaterMarkProps() method is as follows:

/ / export const getWaterMarkProps = (): any => {const {employee, mobile} = getUserInfo(); let props = { content: `${employee ? employee : ''} ${mobile ? Mobile: "} ", gapX: 220, gapY: 140, offsetTop: 100, fontColor: 'rgba(255, 255, 255, 0.1)'} return props; }Copy the code

API:

The specific API can be viewed through the API documentation link.

Effect:

So far, about how to encapsulate watermark components in the project, the method of using watermark components about, the method to solve the problem a lot, I’m just provides a solution, and I believe that friends have a better solution, I just do a topic, more and more methods need to optimize ascend together.

Paper come zhongjue shallow, must know this to practice – Lu You

In short, I always think that technology this road to go far is not to see can learn, of course, does not exclude genius, so more or have to practice their own practice, start a masturbation code can firmly master. Approaching the New Year, this is the last time before the year more, the New Year will be more, when the more is bo luck pull wool, but I can guarantee is not hydrology, after all, I am extremely disgusted with hydrology, also won’t write hydrology. Well, finally I wish you good health, good luck in everything, the year of the tiger 💖.

Past wonderful articles

• The most powerful rich text editor? TinyMCE Series [3]
• The most powerful rich text editor? TinyMCE Series [2]
• The most powerful rich text editor? TinyMCE Series of articles [1]
• React project to implement a Checkbox style effect component
• 2022 First update: 3 Progress bar effects in front end projects
• Front-end Tech Trends 2022: You don’t come in and see how to earn it a small target?
• If ancient have programmers writing summaries, probably is such | 2021 year-end summary
• Front-end development specifications in front end team practice
• Javascript high-level constructors
• Javascript high-level inheritance
• Recursion and closure

After the language

Guys, if you find this article helpful, click 👍 or ➕. In addition, if there are questions or do not understand the part of this article, you are welcome to comment on the comment section, we discuss together.