{"id":919,"date":"2024-03-01T15:45:07","date_gmt":"2024-03-01T07:45:07","guid":{"rendered":"http:\/\/gjweb.top\/?p=919"},"modified":"2024-03-01T15:54:41","modified_gmt":"2024-03-01T07:54:41","slug":"%e5%89%8d%e7%ab%af%e9%98%b2%e5%88%a0%e6%b0%b4%e5%8d%b0%e5%ba%94%e7%94%a8%e6%a1%88%e4%be%8b","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=919","title":{"rendered":"\u524d\u7aef\u9632\u5220\u6c34\u5370\u5e94\u7528\u6848\u4f8b"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u98de\u4e66\u6587\u6863\u6c34\u5370\u65b9\u6848<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='http:\/\/gjweb.top\/wp-content\/uploads\/2024\/03\/\u98de\u4e66\u6c34\u5370-00_00_00-00_00_30-2.gif'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  loading=\"lazy\" decoding=\"async\" width=\"936\" height=\"480\" data-original=\"http:\/\/gjweb.top\/wp-content\/uploads\/2024\/03\/\u98de\u4e66\u6c34\u5370-00_00_00-00_00_30-2.gif\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"\" class=\"wp-image-926\"\/><\/div><\/figure>\n\n\n\n<p><strong>\u95ee\u9898<\/strong>\uff1a\u5f53\u7528\u6237\u5728F12\u4e2d\u4fee\u6539 css \u4e3a <code>display:none<\/code> \/ <code>opacity: 0<\/code>\u6216\u8005\u5220\u9664\u5143\u7d20\uff0c\u6c34\u5370\u4f5c\u7528\u5c06\u5931\u6548<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u9632\u5220\u6c34\u5370\u89e3\u51b3\u65b9\u6848\uff1a<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='http:\/\/gjweb.top\/wp-content\/uploads\/2024\/03\/\u9632\u5220\u6c34\u5370-00_00_00-00_00_30.gif'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"480\" data-original=\"http:\/\/gjweb.top\/wp-content\/uploads\/2024\/03\/\u9632\u5220\u6c34\u5370-00_00_00-00_00_30.gif\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"\" class=\"wp-image-929\"\/><\/div><\/figure>\n\n\n\n<p><strong>\u601d\u8def<\/strong>\uff1a\u5229\u7528 MutationObserver API \u76d1\u542c\u6c34\u5370\u5143\u7d20\u7684\u53d8\u5316\uff0c\u53ea\u8981\u76d1\u542c\u6c34\u5370\u5143\u7d20\u88ab\u7528\u6237\u64cd\u4f5c\u4e86\u5c31\u624b\u52a8\u5220\u9664\u91cd\u65b0\u521b\u5efa\u6c34\u5370\u5143\u7d20<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">vue3\u7ec4\u4ef6\u5b9e\u73b0<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script lang=\"ts\" setup&gt;\nimport { onMounted } from \"vue\";\nconst props = defineProps&lt;{\n  targeContent:string\n}&gt;()\n\nonMounted(() =&gt; {\n  \/** \u9875\u9762\u521d\u59cb\u5316\u65f6\u521b\u5efa canvas \u5143\u7d20,\u5e76\u56de\u6267\u753b\u5e03*\/\n  createCanvasContainer();\n  \/** \u76d1\u542c dom \u6587\u6863,\u5982\u679c\u5f53\u5b50\u5143\u7d20\u53d1\u751f\u589e\u5220\u6539\u90fd\u4f1a\u89e6\u53d1\u8be5\u76d1\u542c\u65f6\u95f4 *\/\n  observer.observe(document.body, {\n    attributes: true, \/**\u8868\u793a\u89c2\u5bdf\u8282\u70b9\u548c\u5b50\u8282\u70b9\u5c5e\u6027\u53d1\u751f\u53d8\u5316,\u89e6\u53d1\u56de\u8c03 *\/\n    childList: true,\/**\u89c2\u5bdf\u76ee\u6807\u8282\u70b9\u548c\u5b50\u8282\u70b9\u6807\u7b7e\u589e\u5220\u6539\u7684\u65f6\u5019\u89e6\u53d1 *\/\n    subtree: true,\/**\u89c2\u5bdf\u76ee\u6807\u8282\u70b9\u7684\u6574\u4e2a\u5b50\u6811 *\/\n  });\n});\n\n\/**\u5b9e\u4f8b\u5316\u89c2\u5bdf\u6807\u7b7e\u5b9e\u4f8b *\/\nconst observer = new MutationObserver((mutations) =&gt; {\n  \/**\u5f53\u89c2\u5bdf\u5230\u5143\u7d20\u5c5e\u6027\u53d1\u751f\u53d8\u5316\u7684\u65f6\u5019,\u5220\u9664\u5f53\u524d\u5143\u7d20 *\/\n  if (\n    mutations&#91;0].type === \"attributes\" &amp;&amp;\n    (mutations&#91;0].target as any).id === \"watermarkCanvas\"\n  ) {\n    document.getElementById(\"watermarkCanvas\")?.remove();\n  }\n  \/**\u5f53\u89c2\u5bdf\u5143\u7d20\u6807\u7b7e\u88ab\u5220\u9664\u540e\u91cd\u65b0\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u6c34\u5370\u6807\u7b7e *\/\n  if(mutations&#91;0].type === \"childList\" &amp;&amp; (mutations&#91;0].removedNodes&#91;0] as any)?.id === \"watermarkCanvas\"){\n    createCanvasContainer();\n  }\n});\n\n\/**\u521b\u5efa canvas *\/\nconst createCanvas = () =&gt; {\n  var canvas = document.getElementById(\"watermarkCanvas\");\n  var ctx = (canvas as any).getContext(\"2d\");\n  \/\/ \u8bbe\u7f6eCanvas\u5c3a\u5bf8\u4e3a\u7a97\u53e3\u5927\u5c0f\n  (canvas as any).width = window.innerWidth;\n  (canvas as any).height = window.innerHeight;\n  \/\/ \u8bbe\u7f6e\u6c34\u5370\u6837\u5f0f\n  var fontSize = 15;\n  ctx.font = fontSize + \"px Arial\";\n  ctx.fillStyle = \"rgba(0, 0, 0, 0.1)\";\n  ctx.textAlign = \"center\";\n  ctx.textBaseline = \"middle\";\n  \/\/ \u89d2\u5ea6\u8f6c\u5f27\u5ea6\n  var angle = (-45 * Math.PI) \/ 180;\n  \/\/ \u8ba1\u7b97\u6c34\u5370\u5bc6\u5ea6\n  var density = 100; \/\/ \u6bcf100\u50cf\u7d20\u95f4\u9694\u4e00\u4e2a\u6c34\u5370\n  \/\/ \u7ed8\u5236\u6c34\u5370\n  for (\n    var x = -(canvas as any).width;\n    x &lt; (canvas as any).width;\n    x += density\n  ) {\n    for (\n      var y = -(canvas as any).height;\n      y &lt; (canvas as any).height;\n      y += density\n    ) {\n      ctx.save();\n      ctx.translate(x, y);\n      ctx.rotate(angle);\n      ctx.fillText(props.targeContent, 0, 0);\n      ctx.restore();\n    }\n  }\n};\n\n\/**\u521b\u5efa canvas \u5bb9\u5668 *\/\nconst createCanvasContainer = () =&gt; {\n  const canvas: any = document.createElement(\"Canvas\");\n  canvas.width = 100;\n  canvas.height = 300;\n  canvas.id = \"watermarkCanvas\";\n  canvas.style.position = \"fixed\";\n  canvas.style.top = \"0\";\n  canvas.style.left = \"0\";\n  canvas.style.zIndex = \"9999\";\n  canvas.style.pointerEvents = \"none\";\n  document.body.appendChild(canvas);\n  createCanvas();\n};\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>\u8be5\u7ec4\u4ef6\u9700\u8981\u4f20\u9012\u4e00\u4e2a <code>targeContent<\/code> \u5c5e\u6027\uff0c\u4f5c\u4e3a\u6c34\u5370\u7684\u5185\u5bb9\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4f7f\u7528\u7ec4\u4ef6<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template&gt;\n    &lt;div class=\"Container\"&gt;\n        &lt;Watermark targeContent=\"\u9f9a\u7bad\u524d\u7aef\"&gt;&lt;\/Watermark&gt;\n    &lt;\/div&gt;\n&lt;\/template&gt;\n&lt;style scoped&gt;\n    .Container{\n        width:100vw;\n        height:100vh;\n    }\n&lt;\/style&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u98de\u4e66\u6587\u6863\u6c34\u5370\u65b9\u6848 \u95ee\u9898\uff1a\u5f53\u7528\u6237\u5728F12\u4e2d\u4fee\u6539 css \u4e3a display:none \/ opacity: 0\u6216 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38],"tags":[],"class_list":["post-919","post","type-post","status-publish","format-standard","hentry","category-38"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=919"}],"version-history":[{"count":4,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/919\/revisions"}],"predecessor-version":[{"id":931,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/919\/revisions\/931"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}