vue轻松实现水印效果

2024-11-27 14:12:07

前言：

vue项目中使用水印效果，可指定容器

效果图：

1、不指定容器

2、指定容器

实现方法：

1、新建一个配置文件 watermark.js ，可放util，也可放别的地方

let watermark = {}

let setWatermark = (text, sourceBody) => {
  let id = Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000

  if (document.getElementById(id) !== null) {
    document.body.removeChild(document.getElementById(id))
  }

  let can = document.createElement('canvas')
  can.width = 150
  can.height = 120

  let cans = can.getContext('2d')
  cans.rotate(-20 * Math.PI / 180)
  cans.font = '15px Vedana'
  cans.fillStyle = 'rgba(0, 0, 0, .5)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(text, can.width / 20, can.height )

  let water_div = document.createElement('div')
  water_div.id = id
  water_div.style.pointerEvents = 'none'
  water_div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
  if(sourceBody){
    water_div.style.width = '100%'
    water_div.style.height = '100%'
    sourceBody.appendChild(water_div)
  }else{
    water_div.style.top = '3px'
    water_div.style.left = '0px'
    water_div.style.position = 'fixed'
    water_div.style.zIndex = '100000'
    water_div.style.width = document.documentElement.clientWidth  + 'px'
    water_div.style.height = document.documentElement.clientHeight  + 'px'
    document.body.appendChild(water_div)
  }

  return id
}

/**
 *  该方法只允许调用一次
 *  @param:
 *  @text == 水印内容
 *  @sourceBody == 水印添加在哪里，不传就是body
 * */
watermark.set = (text, sourceBody) => {
  let id = setWatermark(text, sourceBody)
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(text, sourceBody)
    }
  }, 2000)
  window.onresize = () => {
    setWatermark(text, sourceBody)
  }
}

export default watermark

2、在main.js中全局配置

// 水印
import watermark from './utils/watermark.js'
Vue.prototype.$watermark = watermark

3、页面中使用-全屏水印

this.$watermark.set("浩星2731")

4、页面中使用-指定容器

<el-button @click="addWatermark">点我添加水印</el-button>
<div ref="content" style="width: 500px;height: 500px;border: 1px solid #ccc;">
 addWatermark(){
      this.$watermark.set("浩星2731",this.$refs.content)
    }

5、如果觉得字体之间的距离太大了，改这个属性就行了

can.width = 150
can.height = 120

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue 使用class创建和清除水印的示例代码

页面添加水印的方法有很多,以下举例使用class定义的方法进行水印内容渲染: 1.新建文件:WatermarkClass.js export default class WatermarkClass { constructor({id="watermarkID", str = "", fontSize = 18, width = 400, height = 400, fillStyle="#333333", opacity = 1 }) { th
vue中使用带隐藏文本信息的图片、图片水印的方法

一.带隐藏文本信息的图片通过RGB 分量值的小量变动,不影响对图片的识别.因此,我们可以在图片加入文字信息. 最终达到如下效果: 首先,在该组件中加入img用于显示图片 <canvas ref="canvas" v-show="0"></canvas> <img :src="imageUrl" v-if="imageUrl"/> 调用方法 encryptionImg({ width = '
vue项目实现对某个区域绘制水印

本文实例为大家分享了vue实现对某个区域绘制水印,供大家参考,具体内容如下首先看一下效果: 其实原理很简单,就是使用canvas画成图,然后设置div的背景即可,这里参考了其他人思路又按照我自己的需求,封装了一个插件,可以直接在项目中使用,这里可以对某一个单独的区域设置水印: 'use strict' const watermark = {} /** * * @param {要设置的水印的内容} str * @param {需要设置水印的容器} container */ const setWa
Vue使用自定义指令实现页面底部加水印

项目场景给项目的整个背景加上自定义水印,可以改变水印的文案和字体颜色等实现思路这里使用的技术主要是canvas,在实现水印的过程中,主要使用了canvas的特性使用 canvas 特性生成 base64 格式的图片文件,然后设置其字体大小,颜色等最后将其设置为背景图片,这就实现了页面的水印效果实现效果实现代码 <template> <div class="water-marker" > <div v-waterMarker="{te
vue实现页面添加水印效果

最近在做项目的时候要求给页面加上水印效果,废话不多说直接上代码: export function watermark(settings) { debugger; //默认设置 var defaultSettings={ watermark_txt:"text", watermark_x:20,//水印起始位置x轴坐标 watermark_y:20,//水印起始位置Y轴坐标 watermark_rows:5,//水印行数 watermark_cols:10,//水印列数 watermar
Vue之全局水印的实现示例

目录 1.创建水印Js文件 2.引入操作 2.1 在App.vue中引用或其他页面 2.2 在router配置文件中引用 [需求]系统内页面显示水印,登录页面没有水印(退出登录时,登录页面不会显示水印) 1.创建水印Js文件 /* * @Author: 刘小二 * @Date: 2021-07-15 14:43:27 * @LastEditTime: 2021-07-15 15:00:27 * @LastEditors: Please set LastEditors * @Description
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

实现效果可用插件介绍 Mozilla 提供了 PDF.js和pdfjs-dist,两者的区别如下: PDF.js ,一个完整的 PDF 查看器,可以直接使用其提供的 viewer.html 查看 PDF 内容,包含完整样式和相关功能.优点是快速集成,不需要自己实现查看器的功能和样式.缺点是如果要自定义样式和功能,反而会很麻烦. pdfjs-dist ,PDF.js 的预购建版本,只包含 PDF 内容的渲染功能,需要自己实现查看器的样式和相关功能. Vue 官方插件库 Awesome Vue.j
Vue实现页面添加水印功能

创建watermark.js文件 let watermark = {} let setWatermark = (str) => { let id = '1.23452384164.123412416'; if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } //创建一个画布 let can = document.createElement('can
vue轻松实现水印效果

前言: vue项目中使用水印效果,可指定容器效果图: 1.不指定容器 2.指定容器实现方法: 1.新建一个配置文件 watermark.js ,可放util,也可放别的地方 let watermark = {} let setWatermark = (text, sourceBody) => { let id = Math.random()*10000+'-'+Math.random()*10000+'/'+Math.random()*10000 if (document.getElemen
vue轻松实现虚拟滚动的示例代码

目录前言滚动原理实现源代码参考前言移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示. 长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了. 为了解决长列表造成的渲染压力,业界出现了相应的应对技术,即长列表的虚拟滚动. 虚拟滚动的本质,不管页面如何滑动,HTM
react实现页面水印效果的全过程

目录前言 1.使用示例 2.实现过程 3.组件代码总结前言 1.为什么选用svg 而不是cavans? 因为cavans 在高分辨率屏幕下,需要根据 devicePixelRatio做宽高的适配,不然就会很模糊,而svg是矢量图,原生支持各种分辨率,不会产生模糊的情况. 1.使用示例 import React from 'react' import ReactDOM from 'react-dom' import './index.css' import WaterMarkContent
Vue.js实现拖放效果的实例

页面效果如下所示: 代码请看这里,当当当当: html: <template> <div class='drag-content'> <div class='project-content'> <div class='select-item' draggable='true' @dragstart='drag($event)' v-for='pjdt in projectdatas'>{{pjdt.name}}</div> </div>
bootstrap vue.js实现tab效果

本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu
php实现给一张图片加上水印效果

php实现给一张图片加上水印效果 <?php /** * 功能:给一张图片加上水印效果 * $i 要加水印效果的图片 * $t 水印文字 * $size 文字大小 * $pos 水印的位置 * $color 文字的颜色 * $flag 是布尔值,主要用来区分是不是原图上加水印 * $type 如果$flag等于false 则新图上加上水印新文件名为原名_txt.jpg */ function txt($i,$t='版权所有',$size=25,$pos=5,$color='rand',$fl
WPF TextBox水印效果制作方法详解

一种自以为是的方式: 本来只是想简单的做个水印效果,在文本框内容为空的时候提示用户输入,这种需求挺常见.网上一搜都是丢给你你一大段xaml代码.用c#代码实现我是不倾向了既然用wpf就得Xaml啊.首先我想到的是template嘛 wpf到处离不开template .我想到的是一个border 套一个textblock嘛然后让文本内容通过templateBinding到Text嘛搞得不亦乐乎 ,并且也确实很快就达到了我要的效果: <TextBox> <TextBox.Templa
Vue动态实现评分效果

本文实例为大家分享了Vue动态实现评分效果的具体代码,供大家参考,具体内容如下 1.图片分为三种 on:half: off <style> .star{ font-size: 0; } .star-item{ display: inline-block; background-repeat: no-repeat; width: 20px; height: 20px; margin-right: 22px; background-size: 100%; } .star-item.on{ back
Android视频处理之动态时间水印效果

最近的项目中遇到一个非常头痛的需求,在Android端录制视频的时候动态添加像监控画面一样的精确到秒的时间信息,关键是,并不是说只在播放器的界面显示时间就可以了,而是录制到视频里面去,这个MP4在电脑上播放也能看到每个画面的时间. 最后想到的办法是在录制完成以后去处理这个视频. 期间参考了很多资料,比较有用的大概是ffmpeg和比较新的Api mediaCodec系列了.介于ffmpeg都是C实现,和一大堆NDK相关,本人不是太懂,就重点关注了MediaCodec系列. 参考逻辑流程图一目了然的

vue轻松实现水印效果

前言：

效果图：

实现方法：

相关推荐

随机推荐