@tntd/react-watermark - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/components/Watermark.js

+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"); } }; }();
+
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+// default options
+var defaultOptions = {
+    rotate: 30,
+    backgroundColor: "#fff",
+    color: "rgba(0, 0, 0, 0.1)",
+    width: "100%",
+    height: "auto",
+    fontSize: 12,
+    fontWeight: 300,
+    fontFamily: "serif",
+    fontAjust: 1.2,
+    offsetX: 0,
+    offsetY: 0
+};
+
+var propTypes = {
+    text: PropTypes.string.isRequired,
+    subtext: PropTypes.string,
+    options: PropTypes.object
+};
+
+var Watermark = function Watermark(props) {
+    var text = props.text,
+        _props$subtext = props.subtext,
+        subtext = _props$subtext === undefined ? "" : _props$subtext,
+        _props$options = props.options,
+        options = _props$options === undefined ? defaultOptions : _props$options;
+
+    var _useState = useState(""),
+        _useState2 = _slicedToArray(_useState, 2),
+        url = _useState2[0],
+        setUrl = _useState2[1];
+
+    useEffect(function () {
+        drawerWatermark(props);
+    }, [props.text, props.subtext, props.options]);
+
+    // 获取字符串长度，汉字记为1.3个字符，大写字母记为1个字符，其它记为0.5个字符
+    var getStrLen = function getStrLen(str) {
+        var len = 0;
+        for (var i = 0; i < str.length; i++) {
+            var a = str.charAt(i);
+            if (a.match(/[\u4e00-\u9fa5]/g) !== null) {
+                len += 1.3;
+            } else if (a.match(/[A-Z]/g) !== null) {
+                len += 1;
+            } else {
+                len += 0.5;
+            }
+        }
+        return parseInt(len);
+    };
+
+    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,
+            rotate = _options$rotate === undefined ? defaultOptions.rotate : _options$rotate,
+            _options$color = options.color,
+            color = _options$color === undefined ? defaultOptions.color : _options$color,
+            _options$fontSize = options.fontSize,
+            fontSize = _options$fontSize === undefined ? defaultOptions.fontSize : _options$fontSize,
+            _options$fontWeight = options.fontWeight,
+            fontWeight = _options$fontWeight === undefined ? defaultOptions.fontWeight : _options$fontWeight,
+            _options$fontFamily = options.fontFamily,
+            fontFamily = _options$fontFamily === undefined ? defaultOptions.fontFamily : _options$fontFamily,
+            _options$fontAjust = options.fontAjust,
+            fontAjust = _options$fontAjust === undefined ? defaultOptions.fontAjust : _options$fontAjust,
+            _options$offsetX = options.offsetX,
+            offsetX = _options$offsetX === undefined ? defaultOptions.offsetX : _options$offsetX,
+            _options$offsetY = options.offsetY,
+            offsetY = _options$offsetY === undefined ? defaultOptions.offsetY : _options$offsetY;
+
+        var ctx = canvas.getContext("2d");
+        var textLength = getStrLen(text) * fontSize * fontAjust;
+        var rotatePI = Number(rotate) / 180 * Math.PI;
+        var calcWidth = parseInt(textLength * Math.cos(rotatePI)) + offsetX;
+        var calcHeight = parseInt(textLength * Math.sin(rotatePI)) + offsetY;
+
+        if (subtext && subtext !== "") {
+            var subtextLength = getStrLen(subtext) * fontSize * fontAjust;
+            var subCalcWidth = parseInt(subtextLength * Math.cos(rotatePI)) + offsetX;
+            var subCalcHeight = parseInt(subtextLength * Math.cos(rotatePI)) + offsetY;
+            console.log("subtextLength", getStrLen(subtext));
+            console.log("textLength", getStrLen(text));
+
+            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
+            };
+            console.log("subtextAlign", subtextAlign);
+            console.log("textAlign", textAlign);
+
+            canvas.width = Math.max(calcWidth, subCalcWidth);
+            canvas.height = calcHeight + subCalcHeight;
+            ctx.font = fontWeight + " " + fontSize + "px " + fontFamily;
+            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 " + fontFamily;
+            ctx.rotate(-("" + rotate) * Math.PI / 180); // 逆时针方向
+            ctx.fillStyle = color;
+            ctx.fillText("" + text, _textAlign.x, _textAlign.y);
+        }
+
+        var url = ctx.canvas.toDataURL();
+        setUrl(url);
+    };
+
+    var _options$width = options.width,
+        width = _options$width === undefined ? defaultOptions.width : _options$width,
+        _options$height = options.height,
+        height = _options$height === undefined ? defaultOptions.height : _options$height,
+        _options$backgroundCo = options.backgroundColor,
+        backgroundColor = _options$backgroundCo === undefined ? defaultOptions.backgroundColor : _options$backgroundCo;
+
+    return React.cloneElement(props.children, Object.assign({}, props, {
+        style: Object.assign({}, props.style, {
+            width: width,
+            height: height,
+            backgroundColor: backgroundColor,
+            backgroundImage: "url(" + url + ")",
+            backgroundRepeat: "repeat"
+        })
+    }));
+};
+
+Watermark.propTypes = propTypes;
+
+export default Watermark;

dist/index.js

+import Watermark from "./components/Watermark";
+
+export default Watermark;

package.json

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

README.md

@@ -22,2 +22,3 @@ ## 水印插件
       fontSize: 16,
+      fontWeight: 300,
       fontFamily: "黑体",
@@ -24,0 +25,0 @@ fontAjust: 1,

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8596

384.01%

Number of package files

4

100%

Lines of code

139

Infinity%

Number of lines in readme file

55

1.85%

Number of medium supply chain risk alerts

0

-100%

No dependency changes