@serializedowen/vue-img-watermark/lib/vueImageWatermark.js

add watermark for your image with only a single directive

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("vueImageWatermark",[],e):"object"==typeof exports?exports.vueImageWatermark=e():t.vueImageWatermark=e()}(window,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){t.exports=n(1)},function(t,e,n){"use strict";var r=this&&this.__assign||function(){return(r=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};e.__esModule=!0,e.setGlobalConfig=e.setScopedConfig=e.registerCustomStrategy=void 0;var o,a=n(2);e.registerCustomStrategy=a.registerCustomStrategy,a.registerCustomStrategy("fill",(function(t,e){var n=function(t){return t*Math.PI/180};t.textAlign="center";var r=t.canvas.width,o=t.canvas.height;t.translate(r/2*Math.tan(n(e.rotate)),-o/2*Math.tan(n(e.rotate))),t.rotate(e.rotate*Math.PI/180);for(var a=20,i=20,u=!0;i<2*o;)t.fillText(e.content,a,i),a>2*r&&(a=20,u=!1),u?a+=100:(i+=100,u=!0)}));var i=Object.freeze({mode:"fill",textBaseline:"middle",font:"15px Arial",fillStyle:"rgba(184, 184, 184, 0.8)",content:"请勿外传",rotate:45}),u=r({},i),l=new WeakMap;e.setScopedConfig=function(t,e){if(!e._isVue)throw new Error("target isn't not a valid vue instance.");l.has(e)?l.set(e,r(r({},l.get(e)),t)):l.set(e,r(r({},i),t))},e.setGlobalConfig=function(t){u=r(r({},u),t)};var f=function(){return o||(o=document.createElement("canvas")),o},c={install:function(t){t.directive("watermark",{bind:function(t,e,n){var o,i=e.value;o=l.has(n.context)?r(r({},l.get(n.context)),i):r(r({},u),i),t.setAttribute("crossorigin","anonymous"),t.addEventListener("load",(function e(){t.removeEventListener("load",e);var r=t.width,i=t.height,u=f().getContext("2d"),l=o.textBaseline,c=o.fillStyle,s=o.font,d=o.mode;f().width=r,f().height=i,u.clearRect(0,0,r,i),u.drawImage(t,0,0,r,i),u.textBaseline=l,u.font=s,u.fillStyle=c,a.default(d)(u,o);var g=u.canvas.toDataURL();n.__url?n.__url.push(g):n.__url=[g],t.src=g,n.context.$emit("img:watermarked",t,o),t.addEventListener("load",(function n(){t.removeEventListener("load",n),t.addEventListener("load",e)}))}))},unbind:function(t,e,n){n.__url&&n.__url.map(URL.revokeObjectURL)}})}};e.default=c},function(t,e,n){"use strict";e.__esModule=!0,e.registerCustomStrategy=void 0;var r=n(3),o=n(4),a=n(5),i=n(6),u=n(7),l={};e.registerCustomStrategy=function(t,e){l[t]=e},e.default=function(t){switch(t){case"topleft":return o.default;case"topright":return a.default;case"bottomleft":return r.default;case"bottomright":return i.default;case"center":return u.default;default:if(l[t])return l[t];throw new Error("custom strategy not found!")}}},function(t,e,n){"use strict";e.__esModule=!0,e.default=function(t,e){t.textAlign="left",t.fillText(e.content,20,t.canvas.height-20)}},function(t,e,n){"use strict";e.__esModule=!0,e.default=function(t,e){t.textAlign="left",t.fillText(e.content,20,20)}},function(t,e,n){"use strict";e.__esModule=!0,e.default=function(t,e){t.textAlign="right",t.fillText(e.content,t.canvas.width-20,20)}},function(t,e,n){"use strict";e.__esModule=!0,e.default=function(t,e){t.textAlign="right",t.fillText(e.content,t.canvas.width-20,t.canvas.height-20)}},function(t,e,n){"use strict";e.__esModule=!0,e.default=function(t,e){t.textAlign="center",t.fillText(e.content,Math.floor(t.canvas.width/2),Math.floor(t.canvas.height/2))}}])}));
//# sourceMappingURL=vueImageWatermark.js.map