watermark-js-plus 1.4.16 → 1.4.17
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/dist/index.cjs.js +117 -33
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.cjs.min.js +1 -1
- package/dist/index.esm.js +117 -33
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.min.js +1 -1
- package/dist/index.iife.js +117 -33
- package/dist/index.iife.js.map +1 -1
- package/dist/index.iife.min.js +1 -1
- package/dist/index.umd.js +117 -33
- package/dist/index.umd.js.map +1 -1
- package/dist/index.umd.min.js +1 -1
- package/dist/types/src/utils/index.d.ts +1 -1
- package/package.json +6 -6
package/dist/index.cjs.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* watermark-js-plus v1.4.
|
|
2
|
+
* watermark-js-plus v1.4.17
|
|
3
3
|
* (c) 2022-2023 Michael Sun
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
@@ -94,6 +94,9 @@ var isFunction = function (value) {
|
|
|
94
94
|
var isUndefined = function (value) {
|
|
95
95
|
return value === undefined;
|
|
96
96
|
};
|
|
97
|
+
var isString = function (value) {
|
|
98
|
+
return typeof value === 'string';
|
|
99
|
+
};
|
|
97
100
|
var createSVGElement = function (tagName, attrs, namespaceURI) {
|
|
98
101
|
if (attrs === void 0) { attrs = {}; }
|
|
99
102
|
if (namespaceURI === void 0) { namespaceURI = 'http://www.w3.org/2000/svg'; }
|
|
@@ -117,35 +120,106 @@ var getMultiLineData = function (ctx, text, maxWidth) {
|
|
|
117
120
|
result.push(str);
|
|
118
121
|
return result;
|
|
119
122
|
};
|
|
120
|
-
var createCustomContentSVG = function (ctx, options) {
|
|
121
|
-
var svgElement
|
|
122
|
-
|
|
123
|
+
var createCustomContentSVG = function (ctx, options) { return __awaiter(void 0, void 0, void 0, function () {
|
|
124
|
+
var svgElement, bodyElement, _a, offsetHeight, offsetWidth, width, height, foreignObjectElement;
|
|
125
|
+
return __generator(this, function (_b) {
|
|
126
|
+
switch (_b.label) {
|
|
127
|
+
case 0:
|
|
128
|
+
svgElement = createSVGElement('svg', {
|
|
129
|
+
xmlns: 'http://www.w3.org/2000/svg'
|
|
130
|
+
});
|
|
131
|
+
bodyElement = document.createElement('div');
|
|
132
|
+
bodyElement.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
|
|
133
|
+
bodyElement.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(ctx.font, ";\n color: ").concat(options.fontColor, ";\n");
|
|
134
|
+
bodyElement.innerHTML = "<div class='rich-text-content'>".concat(options.content, "</div>");
|
|
135
|
+
document.body.appendChild(bodyElement);
|
|
136
|
+
// convert all images to base64
|
|
137
|
+
return [4 /*yield*/, convertImgToBase64(bodyElement)];
|
|
138
|
+
case 1:
|
|
139
|
+
// convert all images to base64
|
|
140
|
+
_b.sent();
|
|
141
|
+
_a = bodyElement.querySelector('.rich-text-content'), offsetHeight = _a.offsetHeight, offsetWidth = _a.offsetWidth;
|
|
142
|
+
document.body.removeChild(bodyElement);
|
|
143
|
+
width = options.richTextWidth || offsetWidth || options.width;
|
|
144
|
+
height = options.richTextHeight || offsetHeight || options.height;
|
|
145
|
+
svgElement.setAttribute('width', width.toString());
|
|
146
|
+
svgElement.setAttribute('height', height.toString());
|
|
147
|
+
foreignObjectElement = createSVGElement('foreignObject', {
|
|
148
|
+
width: width.toString(),
|
|
149
|
+
height: height.toString()
|
|
150
|
+
});
|
|
151
|
+
foreignObjectElement.appendChild(bodyElement);
|
|
152
|
+
svgElement.appendChild(foreignObjectElement);
|
|
153
|
+
return [2 /*return*/, {
|
|
154
|
+
element: svgElement,
|
|
155
|
+
width: width,
|
|
156
|
+
height: height
|
|
157
|
+
}];
|
|
158
|
+
}
|
|
123
159
|
});
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
160
|
+
}); };
|
|
161
|
+
function convertImgToBase64(bodyElement) {
|
|
162
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
163
|
+
var imgElements, _loop_1, _i, _a, img;
|
|
164
|
+
return __generator(this, function (_b) {
|
|
165
|
+
switch (_b.label) {
|
|
166
|
+
case 0:
|
|
167
|
+
imgElements = bodyElement.querySelectorAll('img');
|
|
168
|
+
_loop_1 = function (img) {
|
|
169
|
+
var src, response, blob_1, imgData, error_1;
|
|
170
|
+
return __generator(this, function (_c) {
|
|
171
|
+
switch (_c.label) {
|
|
172
|
+
case 0:
|
|
173
|
+
src = img.getAttribute('src');
|
|
174
|
+
if (!src) return [3 /*break*/, 6];
|
|
175
|
+
_c.label = 1;
|
|
176
|
+
case 1:
|
|
177
|
+
_c.trys.push([1, 5, , 6]);
|
|
178
|
+
return [4 /*yield*/, fetch(src)];
|
|
179
|
+
case 2:
|
|
180
|
+
response = _c.sent();
|
|
181
|
+
return [4 /*yield*/, response.blob()];
|
|
182
|
+
case 3:
|
|
183
|
+
blob_1 = _c.sent();
|
|
184
|
+
return [4 /*yield*/, new Promise(function (resolve, reject) {
|
|
185
|
+
var reader = new FileReader();
|
|
186
|
+
reader.onloadend = function () { return resolve(reader.result); };
|
|
187
|
+
reader.onerror = reject;
|
|
188
|
+
reader.readAsDataURL(blob_1);
|
|
189
|
+
})];
|
|
190
|
+
case 4:
|
|
191
|
+
imgData = _c.sent();
|
|
192
|
+
if (isString(imgData)) {
|
|
193
|
+
img.setAttribute('src', imgData);
|
|
194
|
+
}
|
|
195
|
+
return [3 /*break*/, 6];
|
|
196
|
+
case 5:
|
|
197
|
+
error_1 = _c.sent();
|
|
198
|
+
console.error("Error converting ".concat(src, " to base64:"), error_1);
|
|
199
|
+
return [3 /*break*/, 6];
|
|
200
|
+
case 6: return [2 /*return*/];
|
|
201
|
+
}
|
|
202
|
+
});
|
|
203
|
+
};
|
|
204
|
+
_i = 0, _a = Array.from(imgElements);
|
|
205
|
+
_b.label = 1;
|
|
206
|
+
case 1:
|
|
207
|
+
if (!(_i < _a.length)) return [3 /*break*/, 4];
|
|
208
|
+
img = _a[_i];
|
|
209
|
+
return [5 /*yield**/, _loop_1(img)];
|
|
210
|
+
case 2:
|
|
211
|
+
_b.sent();
|
|
212
|
+
_b.label = 3;
|
|
213
|
+
case 3:
|
|
214
|
+
_i++;
|
|
215
|
+
return [3 /*break*/, 1];
|
|
216
|
+
case 4: return [2 /*return*/];
|
|
217
|
+
}
|
|
218
|
+
});
|
|
138
219
|
});
|
|
139
|
-
|
|
140
|
-
svgElement.appendChild(foreignObjectElement);
|
|
141
|
-
return {
|
|
142
|
-
element: svgElement,
|
|
143
|
-
width: width,
|
|
144
|
-
height: height
|
|
145
|
-
};
|
|
146
|
-
};
|
|
220
|
+
}
|
|
147
221
|
var convertSVGToImage = function (svg) {
|
|
148
|
-
var richContent = svg.outerHTML.replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
|
|
222
|
+
var richContent = svg.outerHTML.replace(/<img(.*?)>/g, '<img$1/>').replace(/\n/g, '').replace(/\t/g, '').replace(/#/g, '%23');
|
|
149
223
|
return "data:image/svg+xml;charset=utf-8,".concat(richContent);
|
|
150
224
|
};
|
|
151
225
|
var getValue = function (v1, v2) {
|
|
@@ -663,12 +737,22 @@ var WatermarkCanvas = /** @class */ (function () {
|
|
|
663
737
|
resolve(ctx.canvas);
|
|
664
738
|
};
|
|
665
739
|
WatermarkCanvas.prototype.drawRichText = function (ctx, resolve) {
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
740
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
741
|
+
var obj;
|
|
742
|
+
var _this = this;
|
|
743
|
+
return __generator(this, function (_a) {
|
|
744
|
+
switch (_a.label) {
|
|
745
|
+
case 0: return [4 /*yield*/, createCustomContentSVG(ctx, this.options)];
|
|
746
|
+
case 1:
|
|
747
|
+
obj = _a.sent();
|
|
748
|
+
loadImage(convertSVGToImage(obj.element), obj.width, obj.height).then(function (image) {
|
|
749
|
+
var imagePosition = _this.getDrawImagePosition(image.width, image.height);
|
|
750
|
+
ctx.drawImage(image, imagePosition.x, imagePosition.y, image.width, image.height);
|
|
751
|
+
resolve(ctx.canvas);
|
|
752
|
+
});
|
|
753
|
+
return [2 /*return*/];
|
|
754
|
+
}
|
|
755
|
+
});
|
|
672
756
|
});
|
|
673
757
|
};
|
|
674
758
|
WatermarkCanvas.prototype.getImageRect = function (image) {
|