watermark.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. const VIEW_ID = '1.23452384164.123412415';
  2. let watermarkView;
  3. export default {
  4. data() {
  5. return {
  6. showCanvas: true,
  7. canvasText: '',
  8. canvasSize: uni.upx2px(250),
  9. canvasFontSize: uni.upx2px(30),
  10. canvasTextColor: 'rgba(200, 200, 200, 0.50)',
  11. canvasRotate: -30 * Math.PI / 180,
  12. canvasTextAlign: 'left',
  13. canvasTextBaseline: 'middle',
  14. canvasTextFillX: uni.upx2px(-50),
  15. canvasTextFillY: uni.upx2px(170)
  16. }
  17. },
  18. watch: {
  19. canvasText(newVal) {
  20. this.updateWatermark()
  21. }
  22. },
  23. methods: {
  24. show() {
  25. // #ifdef APP-PLUS
  26. plus.nativeObj.View.getViewById(VIEW_ID) !== null && plus.nativeObj.View.getViewById(VIEW_ID).show();
  27. // #endif
  28. // #ifdef H5
  29. if (document.getElementById(VIEW_ID)) {
  30. document.getElementById(VIEW_ID).style.visibility = "visible";
  31. }
  32. // #endif
  33. },
  34. hide() {
  35. // #ifdef APP-PLUS
  36. plus.nativeObj.View.getViewById(VIEW_ID) !== null && plus.nativeObj.View.getViewById(VIEW_ID).hide();
  37. // #endif
  38. // #ifdef H5
  39. if (document.getElementById(VIEW_ID)) {
  40. document.getElementById(VIEW_ID).style.visibility = "hidden";
  41. }
  42. // #endif
  43. },
  44. updateWatermark() {
  45. if (!this.canvasText) throw new Error('canvasText is Requied!');
  46. // #ifdef APP-PLUS
  47. watermarkView && watermarkView.reset();
  48. this.drawAppWaterMark(VIEW_ID);
  49. // #endif
  50. // #ifdef H5
  51. this.drawH5WaterMark(VIEW_ID);
  52. // #endif
  53. },
  54. initWatermark() {
  55. if (!this.canvasText) throw new Error('canvasText is Requied!');
  56. // #ifdef APP-PLUS
  57. this.drawAppWaterMark(VIEW_ID);
  58. // #endif
  59. // #ifdef H5
  60. this.drawH5WaterMark(VIEW_ID);
  61. // #endif
  62. uni.$off('ly-show-watermar');
  63. uni.$off('ly-hide-watermark');
  64. // 全局监听事件,触发水印显示
  65. uni.$on('ly-show-watermark', () => {
  66. this.show();
  67. });
  68. // 全局监听事件,触发水印隐藏
  69. uni.$on('ly-hide-watermark', () => {
  70. this.hide();
  71. });
  72. },
  73. // #ifdef APP-PLUS
  74. drawAppWaterMark(id) {
  75. plus.nativeObj.View.getViewById(id) && plus.nativeObj.View.getViewById(id).close();
  76. let cans = uni.createCanvasContext('watermarkCanvas');
  77. cans.rotate(this.canvasRotate);
  78. cans.setFontSize(this.canvasFontSize);
  79. cans.setFillStyle(this.canvasTextColor);
  80. cans.setTextAlign(this.canvasTextAlign);
  81. cans.setTextBaseline(this.canvasTextBaseline);
  82. cans.fillText(this.canvasText, this.canvasTextFillX, this.canvasTextFillY);
  83. cans.draw(false);
  84. this.canvasDrawCallFn(id);
  85. },
  86. // 利用canvas生成水印图片
  87. canvasDrawCallFn(id) {
  88. // 适当的延时确保绘制完毕
  89. setTimeout(() => {
  90. uni.canvasToTempFilePath({
  91. canvasId: "watermarkCanvas",
  92. success: res => {
  93. let viewList = this.getWaterMarkWebview(res);
  94. watermarkView = new plus.nativeObj.View(id, {
  95. top: '0',
  96. left: '0',
  97. right: '0',
  98. bottom: '0'
  99. }, viewList);
  100. // 拦截View控件的触屏事件,将事件穿透给下一层view
  101. watermarkView.interceptTouchEvent(false);
  102. watermarkView.show();
  103. // this.showCanvas = false;
  104. }
  105. });
  106. }, 100);
  107. },
  108. // 创建webview页面水印样式
  109. getWaterMarkWebview(res) {
  110. let sysInfo = uni.getSystemInfoSync(),
  111. row = Math.ceil(sysInfo.windowHeight / this.canvasSize), // 水印排列行数
  112. imgList = [];
  113. for (let i = 0; i < row; i++) {
  114. for (let j = 0; j < 3; j++) {
  115. imgList.push({
  116. tag: 'img',
  117. src: res.tempFilePath,
  118. position: {
  119. top: (this.canvasSize * i) + 'px',
  120. left: (this.canvasSize * j) + 'px',
  121. width: this.canvasSize + 'px',
  122. height: this.canvasSize + 'px'
  123. }
  124. });
  125. }
  126. }
  127. return imgList;
  128. },
  129. // #endif
  130. // #ifdef H5
  131. drawH5WaterMark(id) {
  132. document.getElementById(id) && document.body.removeChild(document.getElementById(id));
  133. let can = document.createElement('canvas');
  134. let cans = can.getContext('2d');
  135. let div = document.createElement('div');
  136. can.width = this.canvasSize;
  137. can.height = this.canvasSize;
  138. cans.rotate(this.canvasRotate);
  139. cans.font = this.canvasFontSize + 'px sans-serif';
  140. cans.fillStyle = this.canvasTextColor;
  141. cans.textAlign = this.canvasTextAlign;
  142. cans.textBaseline = this.canvasTextBaseline;
  143. cans.fillText(this.canvasText, this.canvasTextFillX, this.canvasTextFillY);
  144. div.id = id;
  145. div.style.pointerEvents = 'none';
  146. div.style.top = '0';
  147. div.style.left = '0';
  148. div.style.bottom = '0';
  149. div.style.right = '0';
  150. div.style.position = 'fixed';
  151. div.style.zIndex = '100000';
  152. div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
  153. document.body.appendChild(div);
  154. }
  155. // #endif
  156. }
  157. }