{"id":906,"date":"2026-04-08T15:01:13","date_gmt":"2026-04-08T07:01:13","guid":{"rendered":"http:\/\/47.100.88.125\/?page_id=906"},"modified":"2026-04-09T15:24:10","modified_gmt":"2026-04-09T07:24:10","slug":"%e5%9b%be%e7%89%87%e5%8a%a0%e6%b0%b4%e5%8d%b0","status":"publish","type":"page","link":"https:\/\/www.05621997.xyz\/index.php\/tools\/%e5%9b%be%e7%89%87%e5%8a%a0%e6%b0%b4%e5%8d%b0\/","title":{"rendered":"\u56fe\u7247\u52a0\u6c34\u5370"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"906\" class=\"elementor elementor-906\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef23a71 e-con-full e-flex e-con e-parent\" data-id=\"ef23a71\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fdb35be elementor-widget elementor-widget-heading\" data-id=\"fdb35be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">\u56fe\u7247\u52a0\u6c34\u5370<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bce3cd3 e-con-full e-flex e-con e-parent\" data-id=\"bce3cd3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea1b677 elementor-widget elementor-widget-html\" data-id=\"ea1b677\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"custom_watermark_container\">\r\n  <div class=\"custom_watermark_panel\">\r\n    <div class=\"custom_watermark_item\">\r\n      <label class=\"custom_watermark_label\">\u4e0a\u4f20\u672c\u5730\u56fe\u7247<\/label>\r\n      <input type=\"file\" id=\"custom_watermark_file\" accept=\"image\/*\" class=\"custom_watermark_upload\">\r\n    <\/div>\r\n\r\n    <div class=\"custom_watermark_item\">\r\n      <label class=\"custom_watermark_label\">\u6c34\u5370\u6587\u5b57\u5185\u5bb9<\/label>\r\n      <input type=\"text\" id=\"custom_watermark_text\" placeholder=\"\u8bf7\u8f93\u5165\u6c34\u5370\u6587\u5b57\" class=\"custom_watermark_input\">\r\n    <\/div>\r\n\r\n    <div class=\"custom_watermark_item\">\r\n      <label class=\"custom_watermark_label\">\u5355\u6c34\u5370\u4f4d\u7f6e<\/label>\r\n      <div class=\"custom_watermark_radio_group\">\r\n        <label><input type=\"radio\" name=\"custom_watermark_pos\" value=\"center\" checked> \u5c45\u4e2d<\/label>\r\n        <label><input type=\"radio\" name=\"custom_watermark_pos\" value=\"top-left\"> \u5de6\u4e0a\u89d2<\/label>\r\n        <label><input type=\"radio\" name=\"custom_watermark_pos\" value=\"bottom-right\"> \u53f3\u4e0b\u89d2<\/label>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"custom_watermark_item\">\r\n      <label class=\"custom_watermark_check_label\">\r\n        <input type=\"checkbox\" id=\"custom_watermark_full\"> \u5f00\u542f\u6ee1\u5c4f\u6c34\u5370\r\n      <\/label>\r\n    <\/div>\r\n\r\n    <div class=\"custom_watermark_item\" id=\"custom_watermark_density_box\" style=\"display:none;\">\r\n      <label class=\"custom_watermark_label\">\u6c34\u5370\u758f\u5bc6\u7a0b\u5ea6<\/label>\r\n      <input type=\"range\" id=\"custom_watermark_density\" min=\"2\" max=\"10\" value=\"5\" class=\"custom_watermark_slider\">\r\n    <\/div>\r\n\r\n    <div class=\"custom_watermark_item\" id=\"custom_watermark_angle_box\" style=\"display:none;\">\r\n      <label class=\"custom_watermark_label\">\u6c34\u5370\u503e\u659c\u89d2\u5ea6<\/label>\r\n      <input type=\"range\" id=\"custom_watermark_angle\" min=\"0\" max=\"45\" value=\"20\" class=\"custom_watermark_slider\">\r\n    <\/div>\r\n\r\n    <div class=\"custom_watermark_btns\">\r\n      <button id=\"custom_watermark_generate\" class=\"custom_watermark_btn primary\">\u751f\u6210\u6c34\u5370\u56fe\u7247<\/button>\r\n      <button id=\"custom_watermark_download\" class=\"custom_watermark_btn success\" disabled>\u4e0b\u8f7d\u56fe\u7247<\/button>\r\n      <button id=\"custom_watermark_reset\" class=\"custom_watermark_btn default\">\u91cd\u7f6e<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"custom_watermark_preview_box\">\r\n    <canvas id=\"custom_watermark_canvas\"><\/canvas>\r\n    <div class=\"custom_watermark_tip\" id=\"custom_watermark_tip\">\u8bf7\u4e0a\u4f20\u56fe\u7247\u5f00\u59cb\u64cd\u4f5c<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n.custom_watermark_container * {\r\n  all: unset;\r\n  box-sizing: border-box;\r\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\r\n}\r\n\r\n.custom_watermark_container {\r\n  width: 1000px;\r\n  max-width: 100%;\r\n  margin: 0 auto;\r\n  padding: 25px;\r\n  display: flex;\r\n  gap: 30px;\r\n  align-items: flex-start;\r\n}\r\n\r\n.custom_watermark_panel {\r\n  width: 380px;\r\n  background: #f8f9fa;\r\n  border-radius: 12px;\r\n  padding: 25px;\r\n  box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 20px;\r\n}\r\n\r\n.custom_watermark_item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 10px;\r\n}\r\n\r\n.custom_watermark_label {\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  color: #222;\r\n}\r\n\r\n.custom_watermark_input {\r\n  height: 44px;\r\n  padding: 0 15px;\r\n  border: 1px solid #dee2e6;\r\n  border-radius: 6px;\r\n  background: #fff;\r\n  font-size: 15px;\r\n  color: #333;\r\n}\r\n.custom_watermark_input:focus {\r\n  border-color: #0d6efd;\r\n  outline: none;\r\n}\r\n\r\n.custom_watermark_upload {\r\n  height: 44px;\r\n  padding: 10px 15px;\r\n  border: 1px dashed #0d6efd;\r\n  border-radius: 6px;\r\n  background: #fff;\r\n  cursor: pointer;\r\n  text-align: center;\r\n  color: #0d6efd;\r\n}\r\n\r\n.custom_watermark_radio_group {\r\n  display: flex;\r\n  gap: 15px;\r\n  align-items: center;\r\n}\r\n.custom_watermark_radio_group label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n}\r\n.custom_watermark_radio_group input[type=\"radio\"] {\r\n  appearance: auto;\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.custom_watermark_check_label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 8px;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  color: #222;\r\n}\r\n.custom_watermark_check_label input[type=\"checkbox\"] {\r\n  appearance: auto;\r\n  width: 16px;\r\n  height: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.custom_watermark_slider {\r\n  width: 100%;\r\n  height: 6px;\r\n  background: #dee2e6;\r\n  border-radius: 3px;\r\n  cursor: pointer;\r\n}\r\n\r\n.custom_watermark_btns {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 12px;\r\n  margin-top: 10px;\r\n}\r\n.custom_watermark_btn {\r\n  height: 46px;\r\n  border-radius: 6px;\r\n  text-align: center;\r\n  font-size: 15px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: 0.2s;\r\n}\r\n.custom_watermark_btn.primary { background: #0d6efd; color: #fff; }\r\n.custom_watermark_btn.success { background: #198754; color: #fff; }\r\n.custom_watermark_btn.success:disabled { background: #6c757d; cursor: not-allowed; opacity: 0.7; }\r\n.custom_watermark_btn.default { background: #fff; color: #333; border: 1px solid #dee2e6; }\r\n\r\n.custom_watermark_preview_box {\r\n  flex: 1;\r\n  background: #fff;\r\n  border-radius: 12px;\r\n  padding: 20px;\r\n  box-shadow: 0 4px 20px rgba(0,0,0,0.08);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 400px;\r\n  position: relative;\r\n}\r\n#custom_watermark_canvas {\r\n  max-width: 100%;\r\n  max-height: 500px;\r\n  border-radius: 8px;\r\n  display: none;\r\n  object-fit: contain;\r\n}\r\n.custom_watermark_tip {\r\n  font-size: 16px;\r\n  color: #6c757d;\r\n  text-align: center;\r\n}\r\n\r\n@media (max-width: 1020px) {\r\n  .custom_watermark_container { flex-direction: column; align-items: center; }\r\n  .custom_watermark_panel, .custom_watermark_preview_box { width: 100%; }\r\n}\r\n<\/style>\r\n\r\n<script>\r\nconst canvas = document.getElementById('custom_watermark_canvas');\r\nconst ctx = canvas.getContext('2d');\r\nconst fileInput = document.getElementById('custom_watermark_file');\r\nconst watermarkText = document.getElementById('custom_watermark_text');\r\nconst fullWatermark = document.getElementById('custom_watermark_full');\r\nconst densityBox = document.getElementById('custom_watermark_density_box');\r\nconst densitySlider = document.getElementById('custom_watermark_density');\r\nconst angleBox = document.getElementById('custom_watermark_angle_box');\r\nconst angleSlider = document.getElementById('custom_watermark_angle');\r\nconst generateBtn = document.getElementById('custom_watermark_generate');\r\nconst downloadBtn = document.getElementById('custom_watermark_download');\r\nconst resetBtn = document.getElementById('custom_watermark_reset');\r\nconst tip = document.getElementById('custom_watermark_tip');\r\n\r\nlet originalImage = null;\r\nlet canvasWidth = 0, canvasHeight = 0;\r\n\r\nfullWatermark.addEventListener('change', () => {\r\n  densityBox.style.display = fullWatermark.checked ? 'flex' : 'none';\r\n  angleBox.style.display = fullWatermark.checked ? 'flex' : 'none';\r\n});\r\n\r\nfileInput.addEventListener('change', (e) => {\r\n  const file = e.target.files[0];\r\n  if (!file) return;\r\n  const reader = new FileReader();\r\n  reader.onload = function(event) {\r\n    const img = new Image();\r\n    img.onload = function() {\r\n      originalImage = img;\r\n      canvasWidth = img.width;\r\n      canvasHeight = img.height;\r\n      canvas.width = canvasWidth;\r\n      canvas.height = canvasHeight;\r\n      ctx.clearRect(0,0,canvasWidth,canvasHeight);\r\n      ctx.drawImage(img, 0, 0);\r\n      canvas.style.display = 'block';\r\n      tip.style.display = 'none';\r\n      downloadBtn.disabled = true;\r\n    };\r\n    img.src = event.target.result;\r\n  };\r\n  reader.readAsDataURL(file);\r\n});\r\n\r\ngenerateBtn.addEventListener('click', () => {\r\n  if (!originalImage) { alert('\u8bf7\u5148\u4e0a\u4f20\u56fe\u7247'); return; }\r\n  const text = watermarkText.value.trim() || '\u6c34\u5370\u6587\u5b57';\r\n  const isFull = fullWatermark.checked;\r\n  const density = parseInt(densitySlider.value);\r\n  const angle = parseInt(angleSlider.value);\r\n  const position = document.querySelector('input[name=\"custom_watermark_pos\"]:checked').value;\r\n  \r\n  ctx.clearRect(0,0,canvasWidth,canvasHeight);\r\n  ctx.drawImage(originalImage, 0, 0);\r\n  \r\n  ctx.font = 'bold 26px Microsoft YaHei';\r\n  ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';\r\n  ctx.strokeStyle = 'rgba(0, 0, 0, 0.2)';\r\n  ctx.lineWidth = 1;\r\n  \r\n  isFull ? drawFullWatermark(text, density, angle) : drawSingleWatermark(text, position);\r\n  downloadBtn.disabled = false;\r\n});\r\n\r\nfunction drawSingleWatermark(text, position) {\r\n  const padding = 50;\r\n  let x, y;\r\n  ctx.textAlign = 'center';\r\n  \r\n  switch(position) {\r\n    case 'center': x=canvasWidth\/2; y=canvasHeight\/2; break;\r\n    case 'top-left': x=padding; y=padding+14; ctx.textAlign='left'; break;\r\n    case 'bottom-right': x=canvasWidth-padding; y=canvasHeight-padding; ctx.textAlign='right'; break;\r\n  }\r\n  ctx.strokeText(text, x, y);\r\n  ctx.fillText(text, x, y);\r\n}\r\n\r\nfunction drawFullWatermark(text, density, angle) {\r\n  const step = 140 * (10 \/ density);\r\n  ctx.textAlign = 'left';\r\n  ctx.globalAlpha = 0.6;\r\n  \r\n  for (let y = 0; y < canvasHeight + step; y += step) {\r\n    for (let x = 0; x < canvasWidth + step; x += step) {\r\n      ctx.save();\r\n      ctx.translate(x, y);\r\n      ctx.rotate(-angle * Math.PI \/ 180);\r\n      ctx.strokeText(text, 0, 0);\r\n      ctx.fillText(text, 0, 0);\r\n      ctx.restore();\r\n    }\r\n  }\r\n  ctx.globalAlpha = 1;\r\n}\r\n\r\ndownloadBtn.addEventListener('click', () => {\r\n  const link = document.createElement('a');\r\n  link.download = 'watermark_' + new Date().getTime() + '.png';\r\n  link.href = canvas.toDataURL('image\/png');\r\n  link.click();\r\n});\r\n\r\nresetBtn.addEventListener('click', () => window.location.reload());\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u56fe\u7247\u52a0\u6c34\u5370 \u4e0a\u4f20\u672c\u5730\u56fe\u7247 \u6c34\u5370\u6587\u5b57\u5185\u5bb9 \u5355\u6c34\u5370\u4f4d\u7f6e \u5c45\u4e2d \u5de6\u4e0a\u89d2 \u53f3\u4e0b\u89d2 \u5f00\u542f\u6ee1\u5c4f\u6c34\u5370 \u6c34\u5370\u758f\u5bc6\u7a0b\u5ea6 \u6c34\u5370\u503e\u659c\u89d2\u5ea6 \u751f\u6210\u6c34\u5370\u56fe\u7247 \u4e0b\u8f7d\u56fe\u7247 \u91cd\u7f6e \u8bf7\u4e0a\u4f20\u56fe\u7247\u5f00\u59cb\u64cd\u4f5c<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":19,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-906","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/906","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/comments?post=906"}],"version-history":[{"count":13,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/906\/revisions"}],"predecessor-version":[{"id":1111,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/906\/revisions\/1111"}],"up":[{"embeddable":true,"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/pages\/19"}],"wp:attachment":[{"href":"https:\/\/www.05621997.xyz\/index.php\/wp-json\/wp\/v2\/media?parent=906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}