Instagram 帖子生成�?- WebUtils

👤 用户信息

👤

用户�?/label>

位置（可选）

显示认证徽章

🖼�?帖子图片

点击上传图片�?:1 比例最佳）

📝 帖子内容

文字内容

这是一个用 WebUtils 生成的示例帖�?�?/textarea
              >
            </div>

<div class="section">
            <div class="section-title">❤️ 互动数据</div>

<div class="form-row">
              <div class="form-group">
                <label class="form-label">点赞�?/label>
                <input
                  type="text"
                  class="form-input"
                  id="likes"
                  value="1,234"
                  oninput="updatePreview()"
                />
              </div>
              <div class="form-group">
                <label class="form-label">评论�?/label>
                <input
                  type="text"
                  class="form-input"
                  id="comments"
                  value="56"
                  oninput="updatePreview()"
                />
              </div>
            </div>

<div class="section">
            <div class="section-title">🎨 主题</div>
            <div class="toggle-group">
              <button class="toggle-btn active" data-theme="light" onclick="setTheme('light')">
                ☀�?浅色
              </button>
              <button class="toggle-btn" data-theme="dark" onclick="setTheme('dark')">
                🌙 深色
              </button>
            </div>
          </div>

<div class="action-buttons">
            <button class="action-btn secondary" onclick="resetForm()">🔄 重置</button>
            <button class="action-btn primary" onclick="downloadImage()">📥 下载图片</button>
          </div>
        </div>

<div class="preview-panel">
          <div class="preview-container">
            <div class="preview-title">预览</div>

<div class="ig-post" id="igPost">
              <div class="ig-header">
                <div class="ig-avatar">
                  <img
                    id="igAvatar"
                    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E"
                    alt="avatar"
                  />
                </div>
                <div class="ig-user-info">
                  <div class="ig-username">
                    <span id="igUsername">webutils</span>
                    <svg
                      class="ig-verified"
                      id="igVerified"
                      style="display: none"
                      viewBox="0 0 40 40"
                      fill="#3897f0"
                    >
                      <path
                        d="M19.998 3.094L14.638 0l-2.972 5.15H5.432v6.354L0 14.64l3.094 5.36L0 25.36l5.432 3.137v6.353h6.234L14.638 40l5.36-3.094L25.358 40l2.97-5.149h6.239v-6.353L40 25.36l-3.094-5.36L40 14.64l-5.432-3.137V5.15h-6.239L25.358 0l-5.36 3.094z"
                      />
                      <path
                        d="M17.796 27.29l-6.035-6.036 2.828-2.828 3.207 3.207 8.414-8.414 2.828 2.828z"
                        fill="#fff"
                      />
                    </svg>
                  </div>
                  <div class="ig-location" id="igLocation"></div>
                </div>
                <div class="ig-more">••�?/div>
              </div>

<div class="ig-image-container" id="igImageContainer">
                <span class="placeholder">点击左侧上传图片</span>
              </div>

<div class="ig-caption" id="igCaption">
                <span class="ig-caption-username">webutils</span>
                <span id="igCaptionText">这是一个用 WebUtils 生成的示例帖�?�?/span>
                <span class="ig-hashtag" id="igHashtags">#webutils #工具</span>
              </div>

<div class="disclaimer">
              <strong>免责声明�?/strong>
              此工具仅供娱乐和教育目的。请勿用于冒充他人或传播虚假信息。Instagram �?Meta
              公司的注册商标�?
            </div>
          </div>
        </div>
      </div>
    </div>

// 更新预览
      function updatePreview() {
        const username = document.getElementById("username").value || "username";
        const location = document.getElementById("location").value;
        const verified = document.getElementById("verified").checked;
        const caption = document.getElementById("caption").value;
        const hashtags = document.getElementById("hashtags").value;
        const likes = document.getElementById("likes").value || "0";
        const comments = document.getElementById("comments").value || "0";
        const postTime = document.getElementById("postTime").value || "刚刚";

// 更新 DOM
        document.getElementById("igUsername").textContent = username;
        document.getElementById("igLocation").textContent = location;
        document.getElementById("igVerified").style.display = verified ? "inline" : "none";
        document.getElementById("igCaptionText").textContent = caption;
        document.getElementById("igHashtags").textContent = hashtags;
        document.getElementById("igLikes").textContent = `${likes} 次赞`;
        document.getElementById("igComments").textContent =
          comments !== "0" ? `查看全部 ${comments} 条评论` : "";
        document.getElementById("igTime").textContent = postTime;

// 更新用户�?
        document.querySelector(".ig-caption-username").textContent = username + " ";
      }

// 处理头像上传
      function handleAvatarUpload(event) {
        const file = event.target.files[0];
        if (!file) return;

const reader = new FileReader();
        reader.onload = (e) => {
          avatarData = e.target.result;
          const avatarPreview = document.getElementById("avatarPreview");
          avatarPreview.innerHTML = "";
          const img = document.createElement("img");
          img.src = avatarData;
          img.alt = "avatar";
          avatarPreview.appendChild(img);
          document.getElementById("igAvatar").src = avatarData;
        };
        reader.readAsDataURL(file);
      }

// 处理帖子图片上传
      function handleImageUpload(event) {
        const file = event.target.files[0];
        if (!file) return;

const reader = new FileReader();
        reader.onload = (e) => {
          postImageData = e.target.result;
          const uploadZone = document.getElementById("imageUploadZone");
          uploadZone.innerHTML = "";
          const previewImg = document.createElement("img");
          previewImg.src = postImageData;
          previewImg.alt = "post image";
          uploadZone.appendChild(previewImg);
          uploadZone.classList.add("has-image");

const igContainer = document.getElementById("igImageContainer");
          igContainer.innerHTML = "";
          const postImg = document.createElement("img");
          postImg.src = postImageData;
          postImg.alt = "post";
          igContainer.appendChild(postImg);
        };
        reader.readAsDataURL(file);
      }

// 设置主题
      function setTheme(theme) {
        currentTheme = theme;
        const post = document.getElementById("igPost");

if (theme === "dark") {
          post.classList.add("dark");
        } else {
          post.classList.remove("dark");
        }

// 更新按钮状�?
        document.querySelectorAll(".toggle-btn").forEach((btn) => {
          btn.classList.remove("active");
          if (btn.dataset.theme === theme) {
            btn.classList.add("active");
          }
        });
      }

// 下载图片
      async function downloadImage() {
        const post = document.getElementById("igPost");

try {
          const canvas = await html2canvas(post, {
            scale: 2,
            backgroundColor: currentTheme === "dark" ? "#000" : "#fff",
            useCORS: true
          });

const link = document.createElement("a");
          link.download = "instagram-post.png";
          link.href = canvas.toDataURL("image/png");
          link.click();
        } catch (err) {
          console.error("导出失败:", err);
          alert("导出失败，请重试");
        }
      }

// 重置表单
      function resetForm() {
        document.getElementById("username").value = "webutils";
        document.getElementById("location").value = "";
        document.getElementById("verified").checked = false;
        document.getElementById("caption").value = "这是一个用 WebUtils 生成的示例帖�?�?;
        document.getElementById("hashtags").value = "#webutils #工具";
        document.getElementById("likes").value = "1,234";
        document.getElementById("comments").value = "56";
        document.getElementById("postTime").value = "2小时�?;

// 重置头像
        avatarData = null;
        document.getElementById("avatarPreview").innerHTML = '<span class="placeholder">👤</span>';
        document.getElementById("igAvatar").src =
          "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E";

// 重置帖子图片
        postImageData = null;
        document.getElementById("imageUploadZone").innerHTML =
          '<span class="placeholder-text">点击上传图片�?:1 比例最佳）</span>';
        document.getElementById("imageUploadZone").classList.remove("has-image");
        document.getElementById("igImageContainer").innerHTML =
          '<span class="placeholder">点击左侧上传图片</span>';

setTheme("light");
        updatePreview();
      }

// 初始�?
      updatePreview();

// Theme toggle
      function toggleTheme() {
        const html = document.documentElement;
        const currentTheme = html.getAttribute("data-theme");
        const newTheme = currentTheme === "light" ? "dark" : "light";
        html.setAttribute("data-theme", newTheme);
        document.getElementById("theme-icon").textContent = newTheme === "light" ? "☀�? : "🌙";
        localStorage.setItem("theme", newTheme);
      }

// Load saved theme
      const savedTheme = localStorage.getItem("theme") || "dark";
      if (savedTheme === "light") {
        document.documentElement.setAttribute("data-theme", "light");
        document.getElementById("theme-icon").textContent = "☀�?;
      }
    </script>
  </body>
</html>

📸 Instagram 帖子生成�?/h1> 生成 Instagram 风格的帖子截图，自定义所有内�?/p>

📸 Instagram 帖子生成�?/h1>
生成 Instagram 风格的帖子截图，自定义所有内�?/p>