@tntd/react-watermark - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

dist/components/Watermark.js

@@ -9,2 +9,3 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
     rotate: 30,
+    backgroundColor: "#fff",
     color: "rgba(0, 0, 0, 0.1)",
@@ -21,2 +22,3 @@ width: "100%",
     text: PropTypes.string.isRequired,
+    subtext: PropTypes.string,
     options: PropTypes.object
@@ -27,2 +29,4 @@ };
     var text = props.text,
+        _props$subtext = props.subtext,
+        subtext = _props$subtext === undefined ? "" : _props$subtext,
         _props$options = props.options,
@@ -38,6 +42,15 @@ options = _props$options === undefined ? defaultOptions : _props$options;
         drawerWatermark(props);
-    }, [props.text, props.options]);
+    }, [props.text, props.subtext, props.options]);
 
     var drawerWatermark = function drawerWatermark() {
+        if (!text) {
+            console.log("text value is undefined");
+            return;
+        }
         var canvas = document.createElement("canvas");
+        if (!canvas.getContext) {
+            //你的浏览器不支持canvas!
+            return;
+        }
+
         var _options$rotate = options.rotate,
@@ -62,19 +75,35 @@ rotate = _options$rotate === undefined ? defaultOptions.rotate : _options$rotate,
 
-        var textAlign = {
-            x: 0,
-            y: calcHeight
-        };
+        if (subtext && subtext !== "") {
+            var subtextLength = subtext.length * fontSize * fontAjust;
+            var subCalcWidth = parseInt(subtextLength * Math.cos(rotatePI)) + offsetX;
+            var subCalcHeight = parseInt(subtextLength * Math.cos(rotatePI)) + offsetY;
+            var subtextAlign = {
+                x: calcWidth > subCalcWidth ? calcWidth / 2 - subCalcWidth / 2 : 0,
+                y: calcHeight + fontSize + 8
+            };
+            var textAlign = {
+                x: subCalcWidth > calcWidth ? subCalcWidth / 2 - calcWidth / 2 : 0,
+                y: calcHeight
+            };
 
-        canvas.width = calcWidth;
-        canvas.height = calcHeight;
-
-        if (!canvas.getContext) {
-            //你的浏览器不支持canvas!
-            return;
+            canvas.width = Math.max(calcWidth, subCalcWidth);
+            canvas.height = calcHeight + subCalcHeight;
+            ctx.font = fontSize + "px serif";
+            ctx.rotate(-("" + rotate) * Math.PI / 180); // 逆时针方向
+            ctx.fillStyle = color;
+            ctx.fillText("" + text, textAlign.x, textAlign.y);
+            ctx.fillText("" + subtext, subtextAlign.x, subtextAlign.y);
+        } else {
+            var _textAlign = {
+                x: 0,
+                y: calcHeight
+            };
+            canvas.width = calcWidth;
+            canvas.height = calcHeight;
+            ctx.font = fontSize + "px serif";
+            ctx.rotate(-("" + rotate) * Math.PI / 180); // 逆时针方向
+            ctx.fillStyle = color;
+            ctx.fillText("" + text, _textAlign.x, _textAlign.y);
         }
 
-        ctx.font = fontSize + "px serif";
-        ctx.rotate(-("" + rotate) * Math.PI / 180); // 逆时针方向
-        ctx.fillStyle = color;
-        ctx.fillText("" + text, textAlign.x, textAlign.y);
         var url = ctx.canvas.toDataURL();
@@ -87,3 +116,5 @@ setUrl(url);
         _options$height = options.height,
-        height = _options$height === undefined ? defaultOptions.height : _options$height;
+        height = _options$height === undefined ? defaultOptions.height : _options$height,
+        _options$backgroundCo = options.backgroundColor,
+        backgroundColor = _options$backgroundCo === undefined ? defaultOptions.backgroundColor : _options$backgroundCo;
 
@@ -94,2 +125,3 @@ return React.cloneElement(props.children, Object.assign({}, props, {
             height: height,
+            backgroundColor: backgroundColor,
             backgroundImage: "url(" + url + ")",
@@ -96,0 +128,0 @@ backgroundRepeat: "repeat"

package.json

 {
   "name": "@tntd/react-watermark",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "main": "dist/index.js",
@@ -5,0 +5,0 @@ "module": "dist/index.js",

README.md

@@ -17,2 +17,3 @@ ## 水印插件
     text="Hello World"
+    subtext="xiaoming"
     options={{
@@ -24,5 +25,3 @@ color: "#ddd",
       offsetX: 100,
-      offsetY: 50,
-      width: 1200,
-      height: 300
+      offsetY: 50
     }}
@@ -36,5 +35,6 @@ >
  
- ### 参数说明
+### 参数说明
 
-- text 为必传参数
+- text 主文本，为必传参数
+- subtext 副文本，非必传参数
 - options 设有默认值，可根据自己的需求配置一个或多个项
@@ -44,2 +44,3 @@ ```
     rotate: 30,
+    backgroundColor: "#fff",
     color: "rgba(0, 0, 0, 0.1)",
@@ -46,0 +47,0 @@ width: "100%",

No alert changes

Improved metrics

Total package byte prevSize

7237

30.14%

Lines of code

114

39.02%

Number of lines in readme file

51

2%

No dependency changes