@smallwei/avue 3.8.1 → 3.8.3

package/es/plugin/qiniu/index.mjs

@@ -0,0 +1,78 @@
+export const getToken = (accessKey, secretKey, putPolicy) => {
+    const putPolicyString = JSON.stringify(putPolicy);
+    __ENV__ === 'development' && console && console.log('put_policy = ', putPolicyString);
+    const encoded = base64encode(utf16to8(putPolicyString));
+    __ENV__ === 'development' && console && console.log('encoded = ', encoded);
+    const hash = CryptoJS.HmacSHA1(encoded, secretKey);
+    const encodedSigned = hash.toString(CryptoJS.enc.Base64);
+    __ENV__ === 'development' && console && console.log('encoded_signed=', encodedSigned);
+    const uploadToken = accessKey + ':' + safe64(encodedSigned) + ':' + encoded;
+    __ENV__ === 'development' && console && console.log('upload_token=', uploadToken);
+    return uploadToken;
+};
+function utf16to8(str) {
+    let out = '';
+    const len = str.length;
+    let c;
+    for (let i = 0; i < len; i++) {
+        c = str.charCodeAt(i);
+        if (c >= 0x0001 && c <= 0x007f) {
+            out += str.charAt(i);
+        }
+        else if (c > 0x07ff) {
+            out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
+            out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
+            out += String.fromCharCode(0x80 | (c & 0x3f));
+        }
+        else {
+            out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
+            out += String.fromCharCode(0x80 | (c & 0x3f));
+        }
+    }
+    return out;
+}
+const base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
+const base64DecodeChars = [
+    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
+    -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57,
+    58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+    19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
+    40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1,
+];
+function base64encode(str) {
+    let out = '';
+    const len = str.length;
+    let i = 0;
+    let c1;
+    let c2;
+    let c3;
+    while (i < len) {
+        c1 = str.charCodeAt(i++) & 0xff;
+        if (i == len) {
+            out += base64EncodeChars.charAt(c1 >> 2);
+            out += base64EncodeChars.charAt((c1 & 0x3) << 4);
+            out += '==';
+            break;
+        }
+        c2 = str.charCodeAt(i++);
+        if (i == len) {
+            out += base64EncodeChars.charAt(c1 >> 2);
+            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
+            out += base64EncodeChars.charAt((c2 & 0xf) << 2);
+            out += '=';
+            break;
+        }
+        c3 = str.charCodeAt(i++);
+        out += base64EncodeChars.charAt(c1 >> 2);
+        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
+        out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
+        out += base64EncodeChars.charAt(c3 & 0x3f);
+    }
+    return out;
+}
+const safe64 = function (base64) {
+    base64 = base64.replace(/\+/g, '-');
+    base64 = base64.replace(/\//g, '_');
+    return base64;
+};
+void base64DecodeChars;

package/es/plugin/qiniu/index.ts

@@ -0,0 +1,88 @@
+declare const __ENV__: string;
+declare const CryptoJS: any;
+
+export const getToken = (accessKey: string, secretKey: string, putPolicy: Record<string, any>) => {
+  const putPolicyString = JSON.stringify(putPolicy);
+  __ENV__ === 'development' && console && console.log('put_policy = ', putPolicyString);
+
+  const encoded = base64encode(utf16to8(putPolicyString));
+  __ENV__ === 'development' && console && console.log('encoded = ', encoded);
+
+  const hash = CryptoJS.HmacSHA1(encoded, secretKey);
+  const encodedSigned = hash.toString(CryptoJS.enc.Base64);
+  __ENV__ === 'development' && console && console.log('encoded_signed=', encodedSigned);
+
+  const uploadToken = accessKey + ':' + safe64(encodedSigned) + ':' + encoded;
+  __ENV__ === 'development' && console && console.log('upload_token=', uploadToken);
+
+  return uploadToken;
+};
+
+function utf16to8(str: string) {
+  let out = '';
+  const len = str.length;
+  let c;
+  for (let i = 0; i < len; i++) {
+    c = str.charCodeAt(i);
+    if (c >= 0x0001 && c <= 0x007f) {
+      out += str.charAt(i);
+    } else if (c > 0x07ff) {
+      out += String.fromCharCode(0xe0 | ((c >> 12) & 0x0f));
+      out += String.fromCharCode(0x80 | ((c >> 6) & 0x3f));
+      out += String.fromCharCode(0x80 | (c & 0x3f));
+    } else {
+      out += String.fromCharCode(0xc0 | ((c >> 6) & 0x1f));
+      out += String.fromCharCode(0x80 | (c & 0x3f));
+    }
+  }
+  return out;
+}
+
+const base64EncodeChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_';
+const base64DecodeChars = [
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
+  -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57,
+  58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
+  19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
+  40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1,
+];
+
+function base64encode(str: string) {
+  let out = '';
+  const len = str.length;
+  let i = 0;
+  let c1;
+  let c2;
+  let c3;
+  while (i < len) {
+    c1 = str.charCodeAt(i++) & 0xff;
+    if (i == len) {
+      out += base64EncodeChars.charAt(c1 >> 2);
+      out += base64EncodeChars.charAt((c1 & 0x3) << 4);
+      out += '==';
+      break;
+    }
+    c2 = str.charCodeAt(i++);
+    if (i == len) {
+      out += base64EncodeChars.charAt(c1 >> 2);
+      out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
+      out += base64EncodeChars.charAt((c2 & 0xf) << 2);
+      out += '=';
+      break;
+    }
+    c3 = str.charCodeAt(i++);
+    out += base64EncodeChars.charAt(c1 >> 2);
+    out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xf0) >> 4));
+    out += base64EncodeChars.charAt(((c2 & 0xf) << 2) | ((c3 & 0xc0) >> 6));
+    out += base64EncodeChars.charAt(c3 & 0x3f);
+  }
+  return out;
+}
+
+const safe64 = function (base64: string) {
+  base64 = base64.replace(/\+/g, '-');
+  base64 = base64.replace(/\//g, '_');
+  return base64;
+};
+
+void base64DecodeChars;

package/es/plugin/screenshot/index.mjs

@@ -0,0 +1,8 @@
+import packages from '../../core/packages.mjs';
+export default function (doc, option = {}) {
+    if (!window.html2canvas) {
+        packages.logs('Screenshot');
+        return;
+    }
+    return window.html2canvas(doc, option);
+}

package/es/plugin/screenshot/index.ts

@@ -0,0 +1,9 @@
+import packages from '../../core/packages';
+
+export default function (doc: HTMLElement, option: Record<string, any> = {}) {
+  if (!(window as any).html2canvas) {
+    packages.logs('Screenshot');
+    return;
+  }
+  return (window as any).html2canvas(doc, option);
+}

package/es/plugin/video/index.mjs

@@ -0,0 +1,52 @@
+export default class RecordVideo {
+    constructor(videoObj) {
+        this.video = videoObj;
+        this.mediaRecorder = null;
+        this.chunks = [];
+    }
+    init() {
+        return new Promise((resolve, reject) => {
+            navigator.mediaDevices
+                .getUserMedia({
+                audio: true,
+                video: true,
+            })
+                .then((stream) => {
+                if ('srcObject' in this.video) {
+                    this.video.srcObject = stream;
+                }
+                else {
+                    this.video.src = window.URL.createObjectURL(stream);
+                }
+                this.video.addEventListener('loadmetadata', () => {
+                    this.video.play();
+                });
+                this.mediaRecorder = new MediaRecorder(stream);
+                this.mediaRecorder.addEventListener('dataavailable', (e) => {
+                    this.chunks.push(e.data);
+                });
+                resolve();
+            })
+                .catch((error) => {
+                reject(error);
+            });
+        });
+    }
+    startRecord() {
+        if (this.mediaRecorder && this.mediaRecorder.state === 'inactive') {
+            this.mediaRecorder.start();
+        }
+    }
+    stopRecord() {
+        if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
+            this.mediaRecorder.stop();
+        }
+    }
+    isSupport() {
+        const flag = navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
+        if (flag) {
+            return true;
+        }
+        return false;
+    }
+}

package/es/plugin/video/index.ts

@@ -0,0 +1,60 @@
+export default class RecordVideo {
+  video: HTMLMediaElement & { srcObject?: MediaStream | null };
+  mediaRecorder: MediaRecorder | null;
+  chunks: Blob[];
+
+  constructor(videoObj: HTMLMediaElement & { srcObject?: MediaStream | null }) {
+    this.video = videoObj;
+    this.mediaRecorder = null;
+    this.chunks = [];
+  }
+
+  init() {
+    return new Promise<void>((resolve, reject) => {
+      navigator.mediaDevices
+        .getUserMedia({
+          audio: true,
+          video: true,
+        })
+        .then((stream) => {
+          if ('srcObject' in this.video) {
+            this.video.srcObject = stream;
+          } else {
+            (this.video as any).src = window.URL.createObjectURL(stream as any);
+          }
+
+          this.video.addEventListener('loadmetadata', () => {
+            this.video.play();
+          });
+          this.mediaRecorder = new MediaRecorder(stream);
+          this.mediaRecorder.addEventListener('dataavailable', (e) => {
+            this.chunks.push(e.data);
+          });
+          resolve();
+        })
+        .catch((error) => {
+          reject(error);
+        });
+    });
+  }
+
+  startRecord() {
+    if (this.mediaRecorder && this.mediaRecorder.state === 'inactive') {
+      this.mediaRecorder.start();
+    }
+  }
+
+  stopRecord() {
+    if (this.mediaRecorder && this.mediaRecorder.state === 'recording') {
+      this.mediaRecorder.stop();
+    }
+  }
+
+  isSupport() {
+    const flag = navigator.mediaDevices && navigator.mediaDevices.getUserMedia;
+    if (flag) {
+      return true;
+    }
+    return false;
+  }
+}

package/es/plugin/watermark/index.mjs

@@ -0,0 +1,114 @@
+import WaterMark from './watermark.mjs';
+import { dataURLtoFile } from '../../utils/util.mjs';
+let canvas;
+let ctx;
+const configDefault = {
+    width: 200,
+    height: 200,
+};
+const config = {
+    text: 'avueJS',
+    fontFamily: 'microsoft yahei',
+    color: '#999',
+    fontSize: 16,
+    opacity: 100,
+    bottom: 10,
+    right: 10,
+    ratio: 1,
+};
+export default function (opt = {}) {
+    return new WaterMark(opt);
+}
+export function detailImg(file, option = {}) {
+    return new Promise((resolve) => {
+        const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = option;
+        initParams();
+        fileToBase64(file, initImg);
+        function initParams() {
+            config.text = text || config.text;
+            config.fontFamily = fontFamily || config.fontFamily;
+            config.color = color || config.color;
+            config.fontSize = fontSize || config.fontSize;
+            config.opacity = opacity || config.opacity;
+            config.bottom = bottom || config.bottom;
+            config.right = right || config.right;
+            config.ratio = ratio || config.ratio;
+        }
+        function initImg(data) {
+            const img = new Image();
+            img.src = data;
+            img.onload = function () {
+                const width = img.width;
+                const height = img.height;
+                cretedCanvas(width, height);
+                ctx === null || ctx === void 0 ? void 0 : ctx.drawImage(img, 0, 0, width, height);
+                setText(width, height);
+                const currentCanvas = document.getElementById('canvas');
+                resolve(dataURLtoFile(currentCanvas.toDataURL(file.type, config.ratio), file.name));
+            };
+        }
+        function cretedCanvas(width, height) {
+            canvas = document.getElementById('canvas');
+            if (canvas === null) {
+                canvas = document.createElement('canvas');
+                canvas.id = 'canvas';
+                canvas.className = 'avue-canvas';
+                document.body.appendChild(canvas);
+            }
+            ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+        }
+        function setText(width, height) {
+            const txt = config.text;
+            const param = calcParam(txt, width, height);
+            if (!ctx)
+                return;
+            ctx.font = param.fontSize + 'px ' + config.fontFamily;
+            ctx.fillStyle = config.color;
+            ctx.globalAlpha = config.opacity / 100;
+            ctx.fillText(txt, param.x, param.y);
+        }
+        function calcParam(txt, width, height) {
+            let x;
+            let y;
+            const calcFontSize = config.fontSize / configDefault.width;
+            const fontSize = calcFontSize * width;
+            if (config.bottom) {
+                y = configDefault.height - config.bottom;
+            }
+            else {
+                y = config.top;
+            }
+            if (config.right) {
+                x = configDefault.width - config.right;
+            }
+            else {
+                x = config.left;
+            }
+            if (!ctx) {
+                return { x: 0, y: 0, fontSize };
+            }
+            ctx.font = config.fontSize + 'px ' + config.fontFamily;
+            const txtWidth = Number(ctx.measureText(txt).width);
+            x = x - txtWidth;
+            const calcPosX = x / configDefault.width;
+            const calcPosY = y / configDefault.height;
+            x = calcPosX * width;
+            y = calcPosY * height;
+            return {
+                x,
+                y,
+                fontSize,
+            };
+        }
+        function fileToBase64(rawFile, callback) {
+            const reader = new FileReader();
+            reader.readAsDataURL(rawFile);
+            reader.onload = function (e) {
+                var _a;
+                callback((_a = e.target) === null || _a === void 0 ? void 0 : _a.result);
+            };
+        }
+    });
+}

package/es/plugin/watermark/index.ts

@@ -0,0 +1,127 @@
+import WaterMark from './watermark';
+import { dataURLtoFile } from '../../utils/util';
+
+let canvas: HTMLCanvasElement | null;
+let ctx: CanvasRenderingContext2D | null;
+
+const configDefault = {
+  width: 200,
+  height: 200,
+};
+
+const config: Record<string, any> = {
+  text: 'avueJS',
+  fontFamily: 'microsoft yahei',
+  color: '#999',
+  fontSize: 16,
+  opacity: 100,
+  bottom: 10,
+  right: 10,
+  ratio: 1,
+};
+
+export default function (opt: Record<string, any> = {}) {
+  return new WaterMark(opt);
+}
+
+export function detailImg(file: File, option: Record<string, any> = {}) {
+  return new Promise<File>((resolve) => {
+    const { text, fontFamily, color, fontSize, opacity, bottom, right, ratio } = option;
+    initParams();
+    fileToBase64(file, initImg);
+
+    function initParams() {
+      config.text = text || config.text;
+      config.fontFamily = fontFamily || config.fontFamily;
+      config.color = color || config.color;
+      config.fontSize = fontSize || config.fontSize;
+      config.opacity = opacity || config.opacity;
+      config.bottom = bottom || config.bottom;
+      config.right = right || config.right;
+      config.ratio = ratio || config.ratio;
+    }
+
+    function initImg(data: string) {
+      const img = new Image();
+      img.src = data;
+      img.onload = function () {
+        const width = img.width;
+        const height = img.height;
+        cretedCanvas(width, height);
+        ctx?.drawImage(img, 0, 0, width, height);
+        setText(width, height);
+        const currentCanvas = document.getElementById('canvas') as HTMLCanvasElement | null;
+        resolve(dataURLtoFile(currentCanvas!.toDataURL(file.type, config.ratio), file.name));
+      };
+    }
+
+    function cretedCanvas(width: number, height: number) {
+      canvas = document.getElementById('canvas') as HTMLCanvasElement | null;
+      if (canvas === null) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'canvas';
+        canvas.className = 'avue-canvas';
+        document.body.appendChild(canvas);
+      }
+      ctx = canvas.getContext('2d');
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    function setText(width: number, height: number) {
+      const txt = config.text;
+      const param = calcParam(txt, width, height);
+      if (!ctx) return;
+      ctx.font = param.fontSize + 'px ' + config.fontFamily;
+      ctx.fillStyle = config.color;
+      ctx.globalAlpha = config.opacity / 100;
+      ctx.fillText(txt, param.x, param.y);
+    }
+
+    function calcParam(txt: string, width: number, height: number) {
+      let x;
+      let y;
+
+      const calcFontSize = config.fontSize / configDefault.width;
+      const fontSize = calcFontSize * width;
+
+      if (config.bottom) {
+        y = configDefault.height - config.bottom;
+      } else {
+        y = config.top;
+      }
+
+      if (config.right) {
+        x = configDefault.width - config.right;
+      } else {
+        x = config.left;
+      }
+      if (!ctx) {
+        return { x: 0, y: 0, fontSize };
+      }
+      ctx.font = config.fontSize + 'px ' + config.fontFamily;
+      const txtWidth = Number(ctx.measureText(txt).width);
+
+      x = x - txtWidth;
+
+      const calcPosX = x / configDefault.width;
+      const calcPosY = y / configDefault.height;
+
+      x = calcPosX * width;
+      y = calcPosY * height;
+      return {
+        x,
+        y,
+        fontSize,
+      };
+    }
+
+    function fileToBase64(rawFile: File, callback: (data: string) => void) {
+      const reader = new FileReader();
+      reader.readAsDataURL(rawFile);
+      reader.onload = function (e) {
+        callback(e.target?.result as string);
+      };
+    }
+  });
+}

package/es/plugin/watermark/watermark.mjs

@@ -0,0 +1,109 @@
+import { randomId } from '../../utils/util.mjs';
+class WaterMark {
+    constructor(opt = {}) {
+        this.CONTAINERID = randomId();
+        this.drawCanvas = this.drawCanvas.bind(this);
+        this.parentObserver = this.parentObserver.bind(this);
+        this.Repaint = this.Repaint.bind(this);
+        this.styleStr = '';
+        this.isOberserve = false;
+        this.init(opt);
+        this.drawCanvas();
+        this.parentObserver();
+    }
+    init(opt) {
+        this.option = Object.assign({
+            width: 400,
+            height: 200,
+            text: 'avueJS',
+            fontSize: '30px',
+            fontStyle: 'microsoft yahei',
+            textAlign: 'center',
+            color: 'rgba(100,100,100,0.15)',
+            degree: -20,
+        }, opt);
+    }
+    drawCanvas() {
+        this.isOberserve = true;
+        const divContainer = document.createElement('div');
+        const canvas = document.createElement('canvas');
+        const context = canvas.getContext('2d');
+        divContainer.id = this.CONTAINERID;
+        canvas.width = this.option.width;
+        canvas.height = this.option.height;
+        if (!context)
+            return;
+        context.font = `${this.option.fontSize} ${this.option.fontStyle}`;
+        context.textAlign = this.option.textAlign;
+        context.fillStyle = this.option.color;
+        context.translate(canvas.width / 2, canvas.height / 2);
+        context.rotate((this.option.degree * Math.PI) / 180);
+        context.fillText(this.option.text, 0, 0);
+        const backgroundUrl = canvas.toDataURL('image/png');
+        const flag = this.option.id;
+        let el = null;
+        if (flag)
+            el = document.getElementById(flag);
+        this.styleStr = `
+      position:${flag ? 'absolute' : 'fixed'};
+      top:0;
+      left:0;
+      width:${flag && el ? el.offsetWidth + 'px' : '100%'};
+      height:${flag && el ? el.offsetHeight + 'px' : '100%'};
+      z-index:9999;
+      pointer-events:none;
+      background-repeat:repeat;
+      background-image:url('${backgroundUrl}')`;
+        divContainer.setAttribute('style', this.styleStr);
+        if (flag && el) {
+            el.appendChild(divContainer);
+        }
+        else {
+            document.body.appendChild(divContainer);
+        }
+        this.wmObserver(divContainer);
+        this.isOberserve = false;
+    }
+    wmObserver(divContainer) {
+        const wmConf = { attributes: true, childList: true, characterData: true };
+        const wmObserver = new MutationObserver((mo) => {
+            if (!this.isOberserve) {
+                const target = mo[0].target;
+                target.setAttribute('style', this.styleStr);
+                target.setAttribute('id', this.CONTAINERID);
+                wmObserver.takeRecords();
+            }
+        });
+        wmObserver.observe(divContainer, wmConf);
+    }
+    parentObserver() {
+        var _a;
+        const bodyObserver = new MutationObserver(() => {
+            if (!this.isOberserve) {
+                const wm = document.querySelector(`#${this.CONTAINERID}`);
+                if (!wm) {
+                    this.drawCanvas();
+                }
+                else if (wm.getAttribute('style') !== this.styleStr) {
+                    wm.setAttribute('style', this.styleStr);
+                }
+            }
+        });
+        const parentNode = (_a = document.querySelector(`#${this.CONTAINERID}`)) === null || _a === void 0 ? void 0 : _a.parentNode;
+        if (parentNode) {
+            bodyObserver.observe(parentNode, { childList: true });
+        }
+    }
+    Repaint(opt = {}) {
+        this.remove();
+        this.init(opt);
+        this.drawCanvas();
+    }
+    remove() {
+        var _a;
+        this.isOberserve = true;
+        const wm = document.querySelector(`#${this.CONTAINERID}`);
+        (_a = wm === null || wm === void 0 ? void 0 : wm.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(wm);
+    }
+}
+export default WaterMark;