From 5a6e72a5047afac1d570714d778a1877a94c640b Mon Sep 17 00:00:00 2001 From: BrianWalkerToretto Date: Tue, 5 Nov 2019 20:07:43 +0800 Subject: [PATCH] feat native canvas/svg --- .gitignore | 1 + dist/native/index.js | 2 + dist/react/index.js | 2 + dist/vue/index.js | 2 + dist/watermark.js | 3 +- package.json | 2 +- src/app.js | 2 +- src/index.js | 4 +- src/utils/drawCanvas.js | 5 ++- src/watermark/index.js | 0 src/watermark/native/index.js | 77 +++++++++++++++++++++++++++++++++ src/watermark/react/index.jsx | 10 ++++- src/watermark/vue/watermark.vue | 9 +++- webpack/getAllWaterMark.js | 17 ++++++++ webpack/prod.config.js | 6 ++- 15 files changed, 131 insertions(+), 11 deletions(-) create mode 100644 dist/native/index.js create mode 100644 dist/react/index.js create mode 100644 dist/vue/index.js delete mode 100644 src/watermark/index.js create mode 100644 src/watermark/native/index.js create mode 100644 webpack/getAllWaterMark.js diff --git a/.gitignore b/.gitignore index 59c9618..661ba65 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ node_modules/ package-lock.json src/animate/ *.bat +*.map # misc .DS_Store diff --git a/dist/native/index.js b/dist/native/index.js new file mode 100644 index 0000000..e07e031 --- /dev/null +++ b/dist/native/index.js @@ -0,0 +1,2 @@ +!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("watermark",[],n):"object"==typeof exports?exports.watermark=n():t.watermark=n()}(window,(function(){return e={},t.m=n={"/EgQ":function(t,n){var e={}.toString;t.exports=function(t){return e.call(t).slice(8,-1)}},"379a":function(t,n,e){"use strict";function r(t){void 0===t&&(t=50);var n=window.innerWidth||document.documentElement.clientWidth||document.documentElement.offsetHeight||document.body.clientWidth,e=window.innerHeight||document.documentElement.clientWidth||document.documentElement.offsetHeight||document.body.clientHeight,r=this.width!==n,i=this.height>e+t||this.heighte+t||this.heightdocument.F=Object<\/script>"),t.close(),p=t.F;e--;)delete p[l][c[e]];return p()};t.exports=Object.create||function(t,n){var e;return null!==t?(r[l]=o(t),e=new r,r[l]=null,e[f]=t):e=p(),void 0===n?e:i(e,n)},u[f]=!0},Y4Ys:function(t,n,e){function r(t){return function(n,e,r){var u,a=o(n),s=i(a.length),f=c(r,s);if(t&&e!=e){for(;fa;)r(u,e=n[a++])&&(~i(s,e)||s.push(e));return s}},tbMQ:function(t,n,e){t.exports=e("jP3w")},"u+ON":function(t,n,e){"use strict";var r=e("pevS"),o=e("Y4Ys").indexOf,i=e("M5eE"),c=[].indexOf,u=!!c&&1/[1].indexOf(1,-0)<0,a=i("indexOf");r({target:"Array",proto:!0,forced:u||a},{indexOf:function(t,n){return u?c.apply(this,arguments)||0:o(this,t,1e+t||this.heightdocument.F=Object<\/script>"),t.close(),d=t.F;e--;)delete d[l][c[e]];return d()};t.exports=Object.create||function(t,n){var e;return null!==t?(r[l]=o(t),e=new r,r[l]=null,e[f]=t):e=d(),void 0===n?e:i(e,n)},a[f]=!0},"V/Y1":function(t,n,e){var r=e("iwyV");"string"==typeof r&&(r=[[t.i,r,""]]);e("LboF")(r,{insert:"head",singleton:!1}),r.locals&&(t.exports=r.locals)},Y4Ys:function(t,n,e){function r(t){return function(n,e,r){var a,u=o(n),s=i(u.length),f=c(r,s);if(t&&e!=e){for(;fu;)r(a,e=n[u++])&&(~i(s,e)||s.push(e));return s}},tbMQ:function(t,n,e){t.exports=e("jP3w")},tjUo:function(t,n,e){"use strict";e.r(n);var r=e("rPUy"),o=e.n(r),i=e("eLKs"),c=e.n(i),a=e("cDcd"),u=e.n(a),s=e("Kwsy"),f=e.n(s);function l(t,n){void 0===t&&(t=console.log),void 0===n&&(n=500);var e=null;return function(){null!==e&&clearTimeout(e),e=f()(t,n)}}function d(t){void 0===t&&(t=50);var n=window.innerWidth||document.documentElement.clientWidth||document.documentElement.offsetHeight||document.body.clientWidth,e=window.innerHeight||document.documentElement.clientWidth||document.documentElement.offsetHeight||document.body.clientHeight,r=this.width!==n,o=this.height>e+t||this.heighte+t||this.heightdocument.F=Object<\/script>"),t.close(),l=t.F;e--;)delete l[d][a[e]];return l()};t.exports=Object.create||function(t,n){var e;return null!==t?(r[d]=i(t),e=new r,r[d]=null,e[f]=t):e=l(),void 0===n?e:o(e,n)},c[f]=!0},Y4Ys:function(t,n,e){function r(t){return function(n,e,r){var c,u=i(n),s=o(u.length),f=a(r,s);if(t&&e!=e){for(;fu;)r(c,e=n[u++])&&(~o(s,e)||s.push(e));return s}},tbMQ:function(t,n,e){t.exports=e("jP3w")},tjUo:function(t,n,e){"use strict";e.r(n);var r=e("+Oj+");e.d(n,"ReactWaterMark",(function(){return r.default}));var i=e("BsL6");e.d(n,"VueWaterMark",(function(){return i.default}));var o=e("jP1q");e.d(n,"NativeWaterMark",(function(){return o.default})),n.default=r.default},"u+ON":function(t,n,e){"use strict";var r=e("pevS"),i=e("Y4Ys").indexOf,o=e("M5eE"),a=[].indexOf,c=!!a&&1/[1].indexOf(1,-0)<0,u=o("indexOf");r({target:"Array",proto:!0,forced:c||u},{indexOf:function(t,n){return c?a.apply(this,arguments)||0:i(this,t,1 { + 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; diff --git a/src/watermark/react/index.jsx b/src/watermark/react/index.jsx index 2654cda..f0bfccf 100644 --- a/src/watermark/react/index.jsx +++ b/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(); } diff --git a/src/watermark/vue/watermark.vue b/src/watermark/vue/watermark.vue index bd0f37d..f81c808 100644 --- a/src/watermark/vue/watermark.vue +++ b/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; diff --git a/webpack/getAllWaterMark.js b/webpack/getAllWaterMark.js new file mode 100644 index 0000000..11d78dc --- /dev/null +++ b/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; +} diff --git a/webpack/prod.config.js b/webpack/prod.config.js index 361b9a4..193cbba 100644 --- a/webpack/prod.config.js +++ b/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 }),