am-watermark/dist/index.umd.cjs

一款Vue3的水印组件、支持指令和组件使用

(function(r,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(r=typeof globalThis<"u"?globalThis:r||self,a(r.WaterMark={},r.Vue))})(this,function(r,a){"use strict";const k=t=>{const n=t.backingStorePixelRatio||t.webkitBackingStorePixelRatio||t.mozBackingStorePixelRatio||t.msBackingStorePixelRatio||t.oBackingStorePixelRatio||t.backingStorePixelRatio||1;return(window.devicePixelRatio||1)/n},p=(t,n)=>{const i=document.createElement("canvas"),e=i.getContext("2d");if(!e)return"";const o=k(e),{width:s,height:l,fontSize:c,fontFamily:v,fontWidth:$,fontColor:P,offsetLeft:m,offsetTop:M,gapX:u,gapY:g,rotate:T}=Object.assign(n),z=(u+s)*o+"px",L=(g+l)*o+"px";i.setAttribute("width",z),i.setAttribute("height",L);const R=M?m:u/2,W=m||g/2;if(e){e.translate(R*o,W*o),e.rotate(Math.PI/180*(T||0));const B=c*o,C=l*o;return e.font=` ${$}  ${B}px/${C}px ${v}`,e.fillStyle=P,e.fillText(t,10,10),i.toDataURL("image/png",1)}return i.toDataURL()},d={width:120,height:64,fontSize:16,fontFamily:"Arial",fontColor:"rgba(0,0,0,0.3)",fontWidth:400,offsetLeft:0,offsetTop:0,gapX:212,gapY:222,rotate:0,conentZ:10},E="",h=t=>{t.directive("watermark",{mounted(n,i){const{value:e}=i;if(!e.text)return console.warn("watermark value is empty");n.classList.add("am-watermark");const o=Object.assign({},d,e==null?void 0:e.options),s=document.createElement("div");s.classList.add("am-watermark-content"),s.style.zIndex=`${o.conentZ}`,s.innerHTML=n.innerHTML,n.innerHTML="",n.appendChild(s);const l=p(e.text,o);n.style.position="relative";const c=document.createElement("div");c.className="am-watermark-bg",c.style.backgroundImage=`url(${l})`,c.style.backgroundSize=`${o.width+o.gapX}px `,n.appendChild(c)}})},x=a.defineComponent({name:"WaterMark",props:{text:{type:String,default:"水印"},options:{type:Object,default:()=>d}},setup(t){const n=a.computed(()=>({...d,...t.options}));return{url:p(t.text,n.value),options:n}}}),I="",y=(t,n)=>{const i=t.__vccOpts||t;for(const[e,o]of n)i[e]=o;return i},S={class:"am-watermark"};function b(t,n,i,e,o,s){return a.openBlock(),a.createElementBlock("div",S,[a.createElementVNode("div",{class:"am-watermark-content",style:a.normalizeStyle({zIndex:t.options.conentZ})},[a.renderSlot(t.$slots,"default")],4),a.createElementVNode("div",{class:"am-watermark-bg",style:a.normalizeStyle({backgroundImage:`url(${t.url})`,backgroundSize:`${t.options.width+t.options.gapX}px`})},null,4)])}const f=y(x,[["render",b]]),w=f,_={install:t=>{t.component(f.name,f),h(t)}};r.WaterMark=w,r.default=_,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});