watermark-js-plus 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -0
- package/dist/core/watermark.d.ts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/watermark.esm.js +11 -3
- package/dist/watermark.umd.js +11 -3
- package/dist/watermark.umd.min.js +1 -1
- package/package.json +13 -13
package/README.md
CHANGED
|
@@ -5,6 +5,10 @@
|
|
|
5
5
|
</p>
|
|
6
6
|
<p align="center">
|
|
7
7
|
<a href="https://npmjs.com/package/watermark-js-plus"><img src="https://badgen.net/npm/v/watermark-js-plus" alt="npm package"></a>
|
|
8
|
+
<img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/zhensherlock/watermark-js-plus/deploy.yml?branch=main">
|
|
9
|
+
<img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/watermark-js-plus">
|
|
10
|
+
<img alt="GitHub" src="https://img.shields.io/github/license/zhensherlock/watermark-js-plus">
|
|
11
|
+
<a href="https://gitter.im/china-hy/watermark-js-plus?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img src="https://badges.gitter.im/china-hy/watermark-js-plus.svg" alt="Join the chat at https://gitter.im/china-hy/watermark-js-plus"></a>
|
|
8
12
|
</p>
|
|
9
13
|
|
|
10
14
|
# Watermark
|
package/dist/core/watermark.d.ts
CHANGED
package/dist/types/index.d.ts
CHANGED
package/dist/watermark.esm.js
CHANGED
|
@@ -171,6 +171,7 @@ var Watermark = /** @class */ (function () {
|
|
|
171
171
|
lineHeight: 30,
|
|
172
172
|
zIndex: 10000,
|
|
173
173
|
backgroundPosition: '0 0, 0 0',
|
|
174
|
+
backgroundRepeat: 'repeat',
|
|
174
175
|
fontSize: 20,
|
|
175
176
|
fontFamily: 'sans-serif',
|
|
176
177
|
textAlign: TextAlignEnum.center,
|
|
@@ -222,7 +223,7 @@ var Watermark = /** @class */ (function () {
|
|
|
222
223
|
Watermark.prototype.create = function () {
|
|
223
224
|
var _a, _b;
|
|
224
225
|
return __awaiter(this, void 0, void 0, function () {
|
|
225
|
-
var canvas, image, watermarkInnerDom;
|
|
226
|
+
var canvas, image, watermarkInnerDom, parentElementType;
|
|
226
227
|
return __generator(this, function (_c) {
|
|
227
228
|
switch (_c.label) {
|
|
228
229
|
case 0:
|
|
@@ -240,8 +241,9 @@ var Watermark = /** @class */ (function () {
|
|
|
240
241
|
watermarkInnerDom = document.createElement('div');
|
|
241
242
|
this.watermarkDom.__WATERMARK__ = 'watermark';
|
|
242
243
|
this.watermarkDom.__WATERMARK__INSTANCE__ = this;
|
|
243
|
-
|
|
244
|
-
|
|
244
|
+
parentElementType = this.checkParentElementType();
|
|
245
|
+
this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, ";\n ").concat(parentElementType === 'custom' ? 'top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute' : 'position: relative', "\n ");
|
|
246
|
+
watermarkInnerDom.style.cssText = "\n position: ".concat(parentElementType === 'root' ? 'fixed;' : 'absolute;', "\n z-index: ").concat(this.options.zIndex, ";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(image, ");\n background-repeat: ").concat(this.options.backgroundRepeat, ";\n background-size: ").concat(this.options.width, "px ").concat(this.options.height, "px;\n background-position: ").concat(this.options.backgroundPosition, ";\n -webkit-print-color-adjust: exact;\n ");
|
|
245
247
|
this.watermarkDom.append(watermarkInnerDom);
|
|
246
248
|
this.parentElement.appendChild(this.watermarkDom);
|
|
247
249
|
if (this.options.mutationObserve) {
|
|
@@ -396,6 +398,12 @@ var Watermark = /** @class */ (function () {
|
|
|
396
398
|
}
|
|
397
399
|
return rect;
|
|
398
400
|
};
|
|
401
|
+
Watermark.prototype.checkParentElementType = function () {
|
|
402
|
+
if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
|
|
403
|
+
return 'root';
|
|
404
|
+
}
|
|
405
|
+
return 'custom';
|
|
406
|
+
};
|
|
399
407
|
Watermark.prototype.bindMutationObserve = function () {
|
|
400
408
|
var _this = this;
|
|
401
409
|
if (!this.watermarkDom) {
|
package/dist/watermark.umd.js
CHANGED
|
@@ -177,6 +177,7 @@
|
|
|
177
177
|
lineHeight: 30,
|
|
178
178
|
zIndex: 10000,
|
|
179
179
|
backgroundPosition: '0 0, 0 0',
|
|
180
|
+
backgroundRepeat: 'repeat',
|
|
180
181
|
fontSize: 20,
|
|
181
182
|
fontFamily: 'sans-serif',
|
|
182
183
|
textAlign: TextAlignEnum.center,
|
|
@@ -228,7 +229,7 @@
|
|
|
228
229
|
Watermark.prototype.create = function () {
|
|
229
230
|
var _a, _b;
|
|
230
231
|
return __awaiter(this, void 0, void 0, function () {
|
|
231
|
-
var canvas, image, watermarkInnerDom;
|
|
232
|
+
var canvas, image, watermarkInnerDom, parentElementType;
|
|
232
233
|
return __generator(this, function (_c) {
|
|
233
234
|
switch (_c.label) {
|
|
234
235
|
case 0:
|
|
@@ -246,8 +247,9 @@
|
|
|
246
247
|
watermarkInnerDom = document.createElement('div');
|
|
247
248
|
this.watermarkDom.__WATERMARK__ = 'watermark';
|
|
248
249
|
this.watermarkDom.__WATERMARK__INSTANCE__ = this;
|
|
249
|
-
|
|
250
|
-
|
|
250
|
+
parentElementType = this.checkParentElementType();
|
|
251
|
+
this.watermarkDom.style.cssText = "\n z-index: ".concat(this.options.zIndex, ";\n ").concat(parentElementType === 'custom' ? 'top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute' : 'position: relative', "\n ");
|
|
252
|
+
watermarkInnerDom.style.cssText = "\n position: ".concat(parentElementType === 'root' ? 'fixed;' : 'absolute;', "\n z-index: ").concat(this.options.zIndex, ";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(image, ");\n background-repeat: ").concat(this.options.backgroundRepeat, ";\n background-size: ").concat(this.options.width, "px ").concat(this.options.height, "px;\n background-position: ").concat(this.options.backgroundPosition, ";\n -webkit-print-color-adjust: exact;\n ");
|
|
251
253
|
this.watermarkDom.append(watermarkInnerDom);
|
|
252
254
|
this.parentElement.appendChild(this.watermarkDom);
|
|
253
255
|
if (this.options.mutationObserve) {
|
|
@@ -402,6 +404,12 @@
|
|
|
402
404
|
}
|
|
403
405
|
return rect;
|
|
404
406
|
};
|
|
407
|
+
Watermark.prototype.checkParentElementType = function () {
|
|
408
|
+
if (['html', 'body'].includes(this.parentElement.tagName.toLocaleLowerCase())) {
|
|
409
|
+
return 'root';
|
|
410
|
+
}
|
|
411
|
+
return 'custom';
|
|
412
|
+
};
|
|
405
413
|
Watermark.prototype.bindMutationObserve = function () {
|
|
406
414
|
var _this = this;
|
|
407
415
|
if (!this.watermarkDom) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{c(o.next(t))}catch(t){r(t)}}function s(t){try{c(o.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}c((o=o.apply(t,e||[])).next())}))}function o(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i,r,a,s,c,h=function(t){return t.toDataURL("image/png",1)},l=function(t,e,n){void 0===e&&(e={}),void 0===n&&(n="http://www.w3.org/2000/svg");var o=document.createElementNS(n,t);for(var i in e)o.setAttribute(i,e[i]);return o};!function(t){t.text="text",t.image="image",t.multiLineText="multi-line-text",t.richText="rich-text"}(i||(i={})),function(t){t.center="center",t.left="left",t.right="right"}(r||(r={})),function(t){t.top="top",t.bottom="bottom",t.middle="middle"}(a||(a={})),function(t){t.default="default",t.blind="blind"}(s||(s={})),function(t){t.canvas="canvas",t.html="html",t.svg="svg"}(c||(c={}));var u=function(){function t(t){var e;void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,contentType:i.text,content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",fontSize:20,fontFamily:"sans-serif",textAlign:r.center,textBaseline:a.middle,fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:s.default,mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),(null===(e=this.options)||void 0===e?void 0:e.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180)),this.changeParentElement(this.options.parent)}return t.createCanvas=function(t,e){var n,o=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*o,i.height=e*o,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(n=i.getContext("2d"))||void 0===n||n.setTransform(o,0,0,o,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return n(this,void 0,void 0,(function(){var n,i,r;return o(this,(function(o){switch(o.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return n=o.sent(),i=h(n),this.watermarkDom=document.createElement("div"),r=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n position: relative;\n "),r.style.cssText="\n position: fixed;\n z-index: ".concat(this.options.zIndex,";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(i,");\n background-repeat: repeat;\n background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n background-position: ").concat(this.options.backgroundPosition,";\n -webkit-print-color-adjust: exact;\n "),this.watermarkDom.append(r),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,n,o,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(n=this.observer)||void 0===n||n.disconnect(),null===(o=this.parentObserve)||void 0===o||o.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case i.image:return Object.hasOwnProperty.call(this.options,"image");case i.multiLineText:case i.richText:case i.text:return this.options.content.length>0}return!1},t.prototype.draw=function(){var e=this,n=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===n)throw new Error("get context error");return n.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),n.textAlign=this.options.textAlign,n.textBaseline=this.options.textBaseline,n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,new Promise((function(t){switch(e.options.contentType){case i.text:e.drawText(n,t);break;case i.image:e.drawImage(n,t);break;case i.multiLineText:e.drawMultiLineText(n,t);break;case i.richText:e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate),t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var n=this,o=new Image;o.setAttribute("crossOrigin","Anonymous"),o.src=this.options.image,o.onload=function(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate);var i=n.getImageRect(o),r=i.width,a=i.height;t.drawImage(o,0-r/2,0-a/2,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var n=this,o=function(t,e,n){for(var o=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>n&&(o.push(i.substring(0,i.length-1)),i="",r--);return o.push(i),o}(t,this.options.content,this.options.width);t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate);var i=(o.length-1)*this.options.lineHeight/2;o.forEach((function(e,o){t.fillText(e,0,n.options.lineHeight*o-i)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var n=this,o=new Image;o.width=this.options.width,o.height=this.options.height;var i,r=function(t,e){var n=l("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=l("foreignObject",{width:e.width.toString(),height:e.height.toString()}),i=document.createElement("div");return i.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),i.style.cssText="\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(t.font,";\n color: ").concat(e.fontColor,";\n "),i.innerHTML=e.content,o.appendChild(i),n.appendChild(o),n}(t,this.options);o.src=(i=r.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),o.onload=function(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate),t.drawImage(o,-n.options.width/2,-n.options.height/2,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var n;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(n=null==e?void 0:e.removedNodes)||void 0===n?void 0:n[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),p=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode=s.blind,t.call(this,e)||this}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(n,t),n.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:c.canvas},t);if(e.url&&e.mode===c.canvas){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,i=n.height,r=u.createCanvas(o,i),a=r.getContext("2d");if(null===a)throw new Error("get context error");a.drawImage(n,0,0,o,i),a.globalCompositeOperation=e.compositeOperation,a.fillStyle=e.fillColor,a.fillRect(0,0,o,i);var s=h(r);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,s))}}},n}(u);t.BlindWatermark=p,t.Watermark=u}));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).watermark={})}(this,(function(t){"use strict";var e=function(t,n){return e=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},e(t,n)};function n(t,e,n,o){return new(n||(n=Promise))((function(i,r){function a(t){try{c(o.next(t))}catch(t){r(t)}}function s(t){try{c(o.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof n?e:new n((function(t){t(e)}))).then(a,s)}c((o=o.apply(t,e||[])).next())}))}function o(t,e){var n,o,i,r,a={label:0,sent:function(){if(1&i[0])throw i[1];return i[1]},trys:[],ops:[]};return r={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(r[Symbol.iterator]=function(){return this}),r;function s(r){return function(s){return function(r){if(n)throw new TypeError("Generator is already executing.");for(;a;)try{if(n=1,o&&(i=2&r[0]?o.return:r[0]?o.throw||((i=o.return)&&i.call(o),0):o.next)&&!(i=i.call(o,r[1])).done)return i;switch(o=0,i&&(r=[2&r[0],i.value]),r[0]){case 0:case 1:i=r;break;case 4:return a.label++,{value:r[1],done:!1};case 5:a.label++,o=r[1],r=[0];continue;case 7:r=a.ops.pop(),a.trys.pop();continue;default:if(!(i=a.trys,(i=i.length>0&&i[i.length-1])||6!==r[0]&&2!==r[0])){a=0;continue}if(3===r[0]&&(!i||r[1]>i[0]&&r[1]<i[3])){a.label=r[1];break}if(6===r[0]&&a.label<i[1]){a.label=i[1],i=r;break}if(i&&a.label<i[2]){a.label=i[2],a.ops.push(r);break}i[2]&&a.ops.pop(),a.trys.pop();continue}r=e.call(t,a)}catch(t){r=[6,t],o=0}finally{n=i=0}if(5&r[0])throw r[1];return{value:r[0]?r[1]:void 0,done:!0}}([r,s])}}}var i,r,a,s,c,h=function(t){return t.toDataURL("image/png",1)},l=function(t,e,n){void 0===e&&(e={}),void 0===n&&(n="http://www.w3.org/2000/svg");var o=document.createElementNS(n,t);for(var i in e)o.setAttribute(i,e[i]);return o};!function(t){t.text="text",t.image="image",t.multiLineText="multi-line-text",t.richText="rich-text"}(i||(i={})),function(t){t.center="center",t.left="left",t.right="right"}(r||(r={})),function(t){t.top="top",t.bottom="bottom",t.middle="middle"}(a||(a={})),function(t){t.default="default",t.blind="blind"}(s||(s={})),function(t){t.canvas="canvas",t.html="html",t.svg="svg"}(c||(c={}));var u=function(){function t(t){var e;void 0===t&&(t={}),this.parentElement=document.body,this.options=Object.assign({width:300,height:300,rotate:45,contentType:i.text,content:"hello watermark-js-plus",imageWidth:0,imageHeight:0,lineHeight:30,zIndex:1e4,backgroundPosition:"0 0, 0 0",backgroundRepeat:"repeat",fontSize:20,fontFamily:"sans-serif",textAlign:r.center,textBaseline:a.middle,fontColor:"#000",globalAlpha:.5,fontWeight:"normal",mode:s.default,mutationObserve:!0,unique:!0,parent:"body",onSuccess:function(){},onBeforeDestroy:function(){},onDestroyed:function(){}},t),(null===(e=this.options)||void 0===e?void 0:e.rotate)&&(this.options.rotate=(360-this.options.rotate%360)*(Math.PI/180)),this.changeParentElement(this.options.parent)}return t.createCanvas=function(t,e){var n,o=window.devicePixelRatio||1,i=document.createElement("canvas");return i.width=t*o,i.height=e*o,i.style.width="".concat(t,"px"),i.style.height="".concat(e,"px"),null===(n=i.getContext("2d"))||void 0===n||n.setTransform(o,0,0,o,0,0),i},t.prototype.changeParentElement=function(t){if("string"==typeof t){var e=document.querySelector(t);e&&(this.parentElement=e)}else this.parentElement=t},t.prototype.create=function(){var t,e;return n(this,void 0,void 0,(function(){var n,i,r,a;return o(this,(function(o){switch(o.label){case 0:return this.validateUnique()&&this.validateContent()?[4,this.draw()]:[2];case 1:return n=o.sent(),i=h(n),this.watermarkDom=document.createElement("div"),r=document.createElement("div"),this.watermarkDom.__WATERMARK__="watermark",this.watermarkDom.__WATERMARK__INSTANCE__=this,a=this.checkParentElementType(),this.watermarkDom.style.cssText="\n z-index: ".concat(this.options.zIndex,";\n ").concat("custom"===a?"top: 0;bottom: 0;left: 0;right: 0;height: 100%;pointer-events: none;position: absolute":"position: relative","\n "),r.style.cssText="\n position: ".concat("root"===a?"fixed;":"absolute;","\n z-index: ").concat(this.options.zIndex,";\n pointer-events: none;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background-image: url(").concat(i,");\n background-repeat: ").concat(this.options.backgroundRepeat,";\n background-size: ").concat(this.options.width,"px ").concat(this.options.height,"px;\n background-position: ").concat(this.options.backgroundPosition,";\n -webkit-print-color-adjust: exact;\n "),this.watermarkDom.append(r),this.parentElement.appendChild(this.watermarkDom),this.options.mutationObserve&&this.bindMutationObserve(),null===(e=(t=this.options).onSuccess)||void 0===e||e.call(t),[2]}}))}))},t.prototype.destroy=function(){var t,e,n,o,i,r,a;null===(e=(t=this.options).onBeforeDestroy)||void 0===e||e.call(t),null===(n=this.observer)||void 0===n||n.disconnect(),null===(o=this.parentObserve)||void 0===o||o.disconnect(),null===(i=this.watermarkDom)||void 0===i||i.remove(),null===(a=(r=this.options).onDestroyed)||void 0===a||a.call(r)},t.prototype.validateUnique=function(){var t=!0;return this.options.unique&&this.parentElement.childNodes.forEach((function(e){t&&Object.hasOwnProperty.call(e,"__WATERMARK__")&&(t=!1)})),t},t.prototype.validateContent=function(){switch(this.options.contentType){case i.image:return Object.hasOwnProperty.call(this.options,"image");case i.multiLineText:case i.richText:case i.text:return this.options.content.length>0}return!1},t.prototype.draw=function(){var e=this,n=t.createCanvas(this.options.width,this.options.height).getContext("2d");if(null===n)throw new Error("get context error");return n.font="".concat(this.options.fontWeight," ").concat(this.options.fontSize,"px ").concat(this.options.fontFamily),n.textAlign=this.options.textAlign,n.textBaseline=this.options.textBaseline,n.fillStyle=this.options.fontColor,n.globalAlpha=this.options.globalAlpha,new Promise((function(t){switch(e.options.contentType){case i.text:e.drawText(n,t);break;case i.image:e.drawImage(n,t);break;case i.multiLineText:e.drawMultiLineText(n,t);break;case i.richText:e.drawRichText(n,t)}}))},t.prototype.drawText=function(t,e){t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate),t.fillText(this.options.content,0,0),e(t.canvas)},t.prototype.drawImage=function(t,e){var n=this,o=new Image;o.setAttribute("crossOrigin","Anonymous"),o.src=this.options.image,o.onload=function(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate);var i=n.getImageRect(o),r=i.width,a=i.height;t.drawImage(o,0-r/2,0-a/2,r,a),e(t.canvas)}},t.prototype.drawMultiLineText=function(t,e){var n=this,o=function(t,e,n){for(var o=[],i="",r=0,a=e.length;r<a;r++)i+=e.charAt(r),t.measureText(i).width>n&&(o.push(i.substring(0,i.length-1)),i="",r--);return o.push(i),o}(t,this.options.content,this.options.width);t.translate(this.options.width/2,this.options.height/2),t.rotate(this.options.rotate);var i=(o.length-1)*this.options.lineHeight/2;o.forEach((function(e,o){t.fillText(e,0,n.options.lineHeight*o-i)})),e(t.canvas)},t.prototype.drawRichText=function(t,e){var n=this,o=new Image;o.width=this.options.width,o.height=this.options.height;var i,r=function(t,e){var n=l("svg",{xmlns:"http://www.w3.org/2000/svg"}),o=l("foreignObject",{width:e.width.toString(),height:e.height.toString()}),i=document.createElement("div");return i.setAttribute("xmlns","http://www.w3.org/1999/xhtml"),i.style.cssText="\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n font: ".concat(t.font,";\n color: ").concat(e.fontColor,";\n "),i.innerHTML=e.content,o.appendChild(i),n.appendChild(o),n}(t,this.options);o.src=(i=r.outerHTML.replace(/\n/g,"").replace(/\t/g,"").replace(/#/g,"%23"),"data:image/svg+xml;charset=utf-8,".concat(i)),o.onload=function(){t.translate(n.options.width/2,n.options.height/2),t.rotate(n.options.rotate),t.drawImage(o,-n.options.width/2,-n.options.height/2,t.canvas.width,t.canvas.height),e(t.canvas)}},t.prototype.getImageRect=function(t){var e={width:this.options.imageWidth,height:this.options.imageHeight};switch(!0){case 0!==e.width&&0===e.height:e.height=e.width*t.height/t.width;break;case 0===e.width&&0!==e.height:e.width=e.height*t.width/t.height;break;case 0===e.width&&0===e.height:e.width=t.width,e.height=t.height}return e},t.prototype.checkParentElementType=function(){return["html","body"].includes(this.parentElement.tagName.toLocaleLowerCase())?"root":"custom"},t.prototype.bindMutationObserve=function(){var t=this;this.watermarkDom&&(this.observer=new MutationObserver((function(e){e.length>0&&(t.destroy(),t.create())})),this.observer.observe(this.watermarkDom,{attributes:!0,childList:!0,subtree:!0,characterData:!0}),this.parentObserve=new MutationObserver((function(e){e.forEach((function(e){var n;(null==e?void 0:e.target)!==t.watermarkDom&&(null===(n=null==e?void 0:e.removedNodes)||void 0===n?void 0:n[0])!==t.watermarkDom||(t.destroy(),t.create())}))})),this.parentObserve.observe(this.parentElement,{attributes:!0,childList:!0,subtree:!0,characterData:!0}))},t}(),p=function(t){function n(e){return void 0===e&&(e={}),e.globalAlpha=.005,e.mode=s.blind,t.call(this,e)||this}return function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Class extends value "+String(n)+" is not a constructor or null");function o(){this.constructor=t}e(t,n),t.prototype=null===n?Object.create(n):(o.prototype=n.prototype,new o)}(n,t),n.decode=function(t){var e=Object.assign({url:"",fillColor:"#000",compositeOperation:"color-burn",mode:c.canvas},t);if(e.url&&e.mode===c.canvas){var n=new Image;n.src=e.url,n.onload=function(){var t,o=n.width,i=n.height,r=u.createCanvas(o,i),a=r.getContext("2d");if(null===a)throw new Error("get context error");a.drawImage(n,0,0,o,i),a.globalCompositeOperation=e.compositeOperation,a.fillStyle=e.fillColor,a.fillRect(0,0,o,i);var s=h(r);e.onSuccess&&"function"==typeof e.onSuccess&&(null===(t=e.onSuccess)||void 0===t||t.call(e,s))}}},n}(u);t.BlindWatermark=p,t.Watermark=u}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "watermark-js-plus",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "watermark for the browser",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
"dist"
|
|
45
45
|
],
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@babel/core": "^7.20.
|
|
47
|
+
"@babel/core": "^7.20.7",
|
|
48
48
|
"@babel/eslint-parser": "^7.19.1",
|
|
49
49
|
"@babel/plugin-transform-runtime": "^7.19.6",
|
|
50
50
|
"@babel/preset-env": "^7.20.2",
|
|
@@ -52,33 +52,33 @@
|
|
|
52
52
|
"@commitlint/config-conventional": "^17.3.0",
|
|
53
53
|
"@element-plus/icons-vue": "^2.0.10",
|
|
54
54
|
"@rollup/plugin-babel": "^6.0.3",
|
|
55
|
-
"@rollup/plugin-commonjs": "^
|
|
55
|
+
"@rollup/plugin-commonjs": "^24.0.0",
|
|
56
56
|
"@rollup/plugin-eslint": "^9.0.1",
|
|
57
57
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
|
58
|
-
"@rollup/plugin-replace": "^5.0.
|
|
59
|
-
"@rollup/plugin-terser": "0.1
|
|
58
|
+
"@rollup/plugin-replace": "^5.0.2",
|
|
59
|
+
"@rollup/plugin-terser": "0.2.1",
|
|
60
60
|
"@rollup/plugin-typescript": "^10.0.1",
|
|
61
61
|
"@types/markdown-it": "^12.2.3",
|
|
62
|
-
"@typescript-eslint/parser": "^5.
|
|
62
|
+
"@typescript-eslint/parser": "^5.48.0",
|
|
63
63
|
"@vue/theme": "^1.3.0",
|
|
64
64
|
"concurrently": "^7.6.0",
|
|
65
65
|
"conventional-changelog-angular": "^5.0.13",
|
|
66
66
|
"conventional-changelog-cli": "^2.2.2",
|
|
67
|
-
"core-js": "^3.
|
|
68
|
-
"element-plus": "^2.2.
|
|
69
|
-
"eslint": "^8.
|
|
67
|
+
"core-js": "^3.27.1",
|
|
68
|
+
"element-plus": "^2.2.28",
|
|
69
|
+
"eslint": "^8.31.0",
|
|
70
70
|
"eslint-config-airbnb-base": "^15.0.0",
|
|
71
71
|
"eslint-config-semistandard": "^17.0.0",
|
|
72
72
|
"eslint-plugin-import": "^2.26.0",
|
|
73
|
-
"husky": "^8.0.
|
|
73
|
+
"husky": "^8.0.3",
|
|
74
74
|
"lint-staged": "^13.1.0",
|
|
75
75
|
"markdown-it": "^13.0.1",
|
|
76
|
-
"rollup": "^3.
|
|
76
|
+
"rollup": "^3.9.1",
|
|
77
77
|
"rollup-plugin-filesize": "^9.1.2",
|
|
78
|
-
"rollup-plugin-your-function": "^0.4.
|
|
78
|
+
"rollup-plugin-your-function": "^0.4.6",
|
|
79
79
|
"terser": "^5.16.1",
|
|
80
80
|
"typescript": "^4.9.4",
|
|
81
81
|
"unplugin-element-plus": "^0.4.1",
|
|
82
|
-
"vitepress": "^1.0.0-alpha.
|
|
82
|
+
"vitepress": "^1.0.0-alpha.34"
|
|
83
83
|
}
|
|
84
84
|
}
|