• vue中添加文字或图片水印


    首先引用warterMark.js,内容如下

    'use strict'
     
    var watermark = (className,str,type) => {
        let dom = document.getElementsByClassName(className)
        let canvas = document.createElement('canvas')
        let cxt = canvas.getContext('2d')
        let div = document.createElement('div')
        
        let imgScale = 0.6
        canvas.width = 200
        if(type == 'text'){
          cxt.font = '16px Microsoft JhengHei'
          cxt.fillStyle = 'rgba(200, 200, 200, 0.3)'
          cxt.textAlign = 'left'
          cxt.textBaseline = 'Middle'
          cxt.fillText(str, 10, 50)
          cxt.clearRect(0, 0, canvas.width, canvas.height);
           div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
           drawImage(div,dom)  
        }else{
            //创建新的图片对象
            let img = new Image();
            //指定图片的URL
            img.src = str;
            //浏览器加载图片完毕后再绘制图片
            img.onload = function() {
                //cxt.drawImage(img,0,0);
                cxt.rotate(-20 * Math.PI / 180)
                let whScale = img.width / img.height
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                 cxt.drawImage(img, //规定要使用的图像、画布或视频。
                                0, 0, //开始剪切的 x 坐标位置。
                                img.width, img.height,  //被剪切图像的高度。
                                0, 50,//在画布上放置图像的 x 、y坐标位置。
                                img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
                                )
                div.style.opacity = 0.3
                div.style.background = 'url(' + canvas.toDataURL('image/png') + ') left top repeat'
                drawImage(div,dom) 
            }
        }
    }
    var drawImage = function (div,dom) {
        div.style.pointerEvents = 'none'
          div.className = 'weterbox'
          div.style.top = 0
          div.style.left = 0
          div.style.position = 'absolute'
          div.style.zIndex = '100000'
          div.style.width = '100%'
          div.style.height = '100%'
        //console.log(dom) 
        if( dom.length > 0){
            for(let i = 0; i< dom.length;i++){
                let child = dom[i].getElementsByClassName('weterbox')
                if(child.length > 0){
                    dom[i].removeChild(child[0])
                }
                dom[i].appendChild(div.cloneNode(true))
            //    console.log(i,dom[i])
            }
        }
    }
     
    export default watermark

    在页面中调用,首先 import watermark from '@/libs/warterMark.js'

    图片水印调用方法如下

    watermark('需要添加水印的div元素的className','水印图片路径')
     
    
    

    文字水印调用方法

    watermark('需要添加水印的div元素的className','水印文字','text')

    需要用到的样式 

    .viewWeb{
    		position: relative;
    	}
    

      

  • 相关阅读:
    求质数与因式分解
    利用工具解题
    我的学生信息管理系统总结
    JSP简单练习-页面重定向
    CSS学习(三)—相对定位与绝对定位
    java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
    AVL平衡树的插入例程
    SAE搭建WordPress教程 免费建WordPress博客站
    MPMoviePlayerViewController和MPMoviePlayerController的使用
    Android日志输出工具类
  • 原文地址:https://www.cnblogs.com/bubuabc/p/14262532.html
Copyright © 2020-2023  润新知