feat native canvas/svg

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 package-lock.json
 src/animate/
 *.bat
+*.map
 
 # misc
 .DS_Store

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brian-walker-toretto/watermark",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "canvas/svg watermark",
   "main": "/dist/watermark.js",
   "keywords": [

src/app.js

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
 import { AppContainer } from 'react-hot-loader';
 import Vue from 'vue';
 // components
-import Index, { VueWaterMark } from '.';
+import Index, { VueWaterMark, NativeWaterMark } from '.';
 // 注册组件库
 Vue.config.productionTip = false
 

src/index.js

@@ -1,9 +1,11 @@
 import ReactWaterMark from './watermark/react';
 import VueWaterMark from './watermark/vue';
+import NativeWaterMark from './watermark/native';
 
 export default ReactWaterMark;
 
 export {
   ReactWaterMark,
-  VueWaterMark
+  VueWaterMark,
+  NativeWaterMark
 }

src/utils/drawCanvas.js

@@ -2,7 +2,10 @@ export default function drawCanvas() {
   const { ctx } = this;
   this.can.width = this.width * this.ratio;
       this.can.height = this.height * this.ratio;
-      this.can.style = `width: ${this.width}px;height: ${this.height}px;`;
+      // this.can.style = `width: ${this.width}px;height: ${this.height}px;`;
+      // strict 模式下不允许分配到只读属性
+      this.can.style.width = `${this.width - (this.ie ? 8 : 0)}px`;
+      this.can.style.height = `${this.height - (this.ie ? 8 : 0)}px`;
       ctx.beginPath();
       ctx.fillStyle = 'transparent';
       ctx.font = '200 14px 微软雅黑';

src/watermark/native/index.js

@@ -0,0 +1,77 @@
+import debounce from '@utils/debounce';
+import style from '@styles';
+import { canRedraw, drawCanvas, drawSvg } from '@utils/draw';
+import { getDevicePixelRatio } from '@utils/devicePixelRatio';
+import { addEventListen, DOMContentLoaded } from '@utils/eventListener';
+
+window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){
+  window.setTimeout(callback, 1000 / 60);
+};
+
+function NativeWaterMark(props = {}){
+  if(!props || typeof props !== 'object'){
+    return console.warn('error');
+  }
+  if(this instanceof NativeWaterMark){
+    return this.init(props);
+  }
+  return new NativeWaterMark(props);
+}
+NativeWaterMark.prototype = {
+  constructor: NativeWaterMark,
+  canvas: document.createElement('canvas'),
+  init: function(props){
+    document.body.appendChild(this.canvas);
+    this.login = props.login;
+    this.code = props.code;
+    this.ie = !!window['ActiveXObject'] || 'ActiveXObject' in window;
+    // ie11以下不兼容pointer-event,故使用svg
+    this.draw = !!window['ActiveXObject'] ? drawSvg : drawCanvas;
+    this.canvas.className = style.waterMark;
+    this.initWaterMark();
+    this.loadWaterMark();
+  },
+  initWaterMark() {
+    this.can = this.canvas;
+    if (!this.can){
+      return requestAnimationFrame(() => {
+        this.initWaterMark();
+      });
+    }
+    if (this.ctx) return;
+    this.ctx = this.can.getContext('2d'); // eslint-disable-line
+    this.ratio = getDevicePixelRatio(this.ctx);
+    // 每个小块的宽高
+    this.w = 100;
+    this.h = 80;
+    this.waterMark();
+  },
+  loadWaterMark() {
+    let isLoad = true;
+    DOMContentLoaded(() => {
+      isLoad && this.waterMark()
+      isLoad = null;
+    });
+    addEventListen('load', () => {
+      isLoad && this.waterMark();
+      isLoad = null;
+    });
+
+    const redraw = canRedraw.bind(this);
+    addEventListen('resize', debounce(() => {
+      redraw() && this.waterMark();
+    }, 200))
+  },
+  waterMark() {
+    if (!this.can){
+      this.initWaterMark();
+      return false;
+    }
+    // 更新屏幕宽高
+    this.width = window.innerWidth || document.documentElement.clientWidth || document.documentElement.offsetHeight || document.body.clientWidth;
+    this.height = window.innerHeight || document.documentElement.clientWidth || document.documentElement.offsetHeight || document.body.clientHeight;
+    this.draw();
+  }
+}
+
+export default NativeWaterMark;

src/watermark/react/index.jsx

@@ -4,6 +4,11 @@ import { canRedraw, drawCanvas, drawSvg } from '@utils/draw';
 import { getDevicePixelRatio } from '@utils/devicePixelRatio';
 import { addEventListen, DOMContentLoaded } from '@utils/eventListener';
 import style from '@styles';
+
+window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){
+  window.setTimeout(callback, 1000 / 60);
+};
+
 /**
  * pages.github.com
  * {
@@ -38,8 +43,9 @@ export default class WaterMark extends React.PureComponent {
      * 注意：只有ie支持ActiveXObject，但是在ie11中window.ActiveXObject 和 typeof ActiveXObject的值为undefined，只能通过"ActiveXObject" in window来判断浏览器为ie
      * 但是可以通过这个特性来区分ie11和其他ie浏览器
      **/
-    this.ie = !!window['ActiveXObject']; // eslint-disable-line
-    this.draw = this.ie ? drawSvg : drawCanvas;
+    this.ie = !!window['ActiveXObject'] || 'ActiveXObject' in window; // eslint-disable-line
+    // ie11以下不兼容pointer-event,故使用svg
+    this.draw = !!window['ActiveXObject'] ? drawSvg : drawCanvas;
     this.initWaterMark();
     this.loadWaterMark();
   }

src/watermark/vue/watermark.vue

@@ -8,6 +8,10 @@ import { canRedraw, drawCanvas, drawSvg } from '@utils/draw';
 import { getDevicePixelRatio } from '@utils/devicePixelRatio';
 import { addEventListen, DOMContentLoaded } from '@utils/eventListener';
 
+window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){
+  window.setTimeout(callback, 1000 / 60);
+};
+
 export default {
   name: 'WaterMark',
   data() {
@@ -24,8 +28,9 @@ export default {
     },
   },
   beforeCreate: function(){
-    this.ie = !!window['ActiveXObject'];
-    this.draw =  this.ie ? drawSvg : drawCanvas;
+    this.ie = !!window['ActiveXObject'] || 'ActiveXObject' in window; // eslint-disable-line
+    // ie11以下不兼容pointer-event,故使用svg
+    this.draw = !!window['ActiveXObject'] ? drawSvg : drawCanvas;
   },
   created: function(){
     let isLoad = true;

webpack/getAllWaterMark.js

@@ -0,0 +1,17 @@
+const fs = require('fs');
+
+export default dir => {
+  if(!dir || typeof dir !== 'string'){
+    return {};
+  }
+  const path = dir + (dir.endsWith('/') ? '' : '/');
+  let allEntry = {};
+  const files = fs.readdirSync(path);
+  files.forEach(item => {
+    let stat = fs.lstatSync(path + item)
+    if (stat.isDirectory() === true) {
+      allEntry[item + '/index'] = `${path}${item}`;
+    }
+  });
+  return allEntry;
+}

webpack/prod.config.js

@@ -1,7 +1,8 @@
 // starter/webpack.config.js
 const os = require('os');
-import WebpackCommonConfig, { resolve } from './common.config';
 import webpack from 'webpack';
+import WebpackCommonConfig, { resolve } from './common.config';
+import getAllWaterMark from './getAllWaterMark'
 const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const merge = require('webpack-merge');
 // const nodeExternals  = require('webpack-node-externals');
@@ -10,6 +11,7 @@ const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 // const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = merge(WebpackCommonConfig, {
+  entry: getAllWaterMark(resolve('/src/watermark')),
   plugins: [
     new UglifyJSPlugin({
       exclude: /\.min\.js$/, // 过滤掉以".min.js"结尾的文件，我们认为这个后缀本身就是已经压缩好的代码，没必要进行二次压缩
@@ -36,7 +38,7 @@ module.exports = merge(WebpackCommonConfig, {
         }
       },
       extractComments: false, // 移除注释
-      sourceMap: false,
+      sourceMap: true,
       cache: true,
       parallel: os.cpus().length
   }),