vue加水印

最新推荐文章于 2024-08-28 15:10:07 发布

前端愤怒的菜鸟

最新推荐文章于 2024-08-28 15:10:07 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/WangJinPing_/article/details/109636061

版权

本文介绍如何在Vue项目中通过自定义指令利用canvas生成base64格式的图片，作为背景图片实现水印效果。步骤包括创建reg.js文件、在main.js中引入并调用指令，适用于整个项目或组件的局部水印添加。

摘要由CSDN通过智能技术生成

vue给图片、项目加水印，用了最简单的方法

在vue项目中通过自定义指令，使用canvas特

性生成base64格式的图片文件，并将其设置为背景图片，从而实现页面或组件局部水印效果

1.新建reg.js文件

Vue.directive('watermark',(el,binding)=>{
  function addWaterMarker(str,parentNode,font,textColor){// 水印文字，父元素，字体，文字颜色
    var can = document.createElement('canvas');
    parentNode.appendChild(can);
    can.width = 100; //水印的宽高
    can.height = 120;
    can.style.display = 'none';
    var cans = can.getContext('2d');
    cans.rotate(-20 * Math.PI / 180);
    cans.font = font || "16px Microsoft JhengHei blod";
    cans.fillStyle = textColor || "rgb(193,193,193)";
    cans.textAlign = 'left';
    cans.textBaseline = 'Middle'