// ==UserScript==
// @name         网页自定义截图工具
// @namespace    https://github.com/2019-02-18
// @version      0.1
// @description  根据页面中的id或者class使用html2canvas-pro实现网页长截图，支持多元素拼接
// @author       2019-02-18
// @match        *://*/*
// @grant        none
// @license MIT
// @require https://update.greasyfork.org/scripts/457525/1134363/html2canvas%20141.js
// @downloadURL none
// ==/UserScript==

(function() {
  'use strict';

  // 创建控制面板
  const panel = document.createElement('div');
  panel.style.cssText = 'position:fixed;top:10px;right:10px;z-index:9999;background:#fff;padding:10px;border:1px solid #ccc;';
  
  // 创建输入框
  const input = document.createElement('textarea');
  input.placeholder = '输入目标元素的id或class，多个元素用逗号分隔';
  input.style.marginRight = '10px';
  input.style.width = '200px';
  input.style.height = '60px';
  
  // 创建截图按钮
  const button = document.createElement('button');
  button.textContent = '截图';
  button.style.display = 'block';
  button.style.marginTop = '5px';
  
  // 创建单元素截图按钮
  const singleButton = document.createElement('button');
  singleButton.textContent = '单元素截图';
  singleButton.style.display = 'block';
  singleButton.style.marginTop = '5px';
  
  // 添加元素到面板
  panel.appendChild(input);
  panel.appendChild(singleButton);
  panel.appendChild(button);
  document.body.appendChild(panel);

  // 单元素截图功能
  singleButton.addEventListener('click', async () => {
      const selector = input.value.trim();
      if (!selector) {
          alert('请输入选择器');
          return;
      }
      
      let target;
      
      // 查找目标元素
      if (selector.startsWith('#')) {
          target = document.getElementById(selector.slice(1));
      } else if (selector.startsWith('.')) {
          target = document.querySelector(selector);
      } else {
          alert('请输入正确的id或class选择器（以#或.开头）');
          return;
      }

      if (!target) {
          alert('未找到目标元素');
          return;
      }

      try {
          await captureAndDownload([target]);
      } catch (error) {
          console.error('截图失败:', error);
          alert('截图失败，请检查控制台获取详细信息');
      }
  });

  // 多元素拼接截图功能
  button.addEventListener('click', async () => {
      const selectors = input.value.split(',').map(s => s.trim()).filter(s => s);
      
      if (selectors.length === 0) {
          alert('请输入至少一个选择器');
          return;
      }
      
      const targets = [];
      
      // 查找所有目标元素
      for (const selector of selectors) {
          let target;
          
          if (selector.startsWith('#')) {
              target = document.getElementById(selector.slice(1));
          } else if (selector.startsWith('.')) {
              target = document.querySelector(selector);
          } else {
              alert(`请输入正确的id或class选择器（以#或.开头）: ${selector}`);
              return;
          }
          
          if (!target) {
              alert(`未找到目标元素: ${selector}`);
              return;
          }
          
          targets.push(target);
      }

      try {
          await captureAndDownload(targets);
      } catch (error) {
          console.error('截图失败:', error);
          alert('截图失败，请检查控制台获取详细信息');
      }
  });
  
  // 截图并下载函数
  async function captureAndDownload(elements) {
      if (!elements || elements.length === 0) return;
      
      // 如果只有一个元素，直接截图并下载
      if (elements.length === 1) {
          const canvas = await html2canvas(elements[0], {
              useCORS: true,
              scrollX: 0,
              scrollY: 0,
              windowWidth: document.documentElement.offsetWidth,
              windowHeight: document.documentElement.offsetHeight,
              scale: window.devicePixelRatio
          });
          
          downloadImage(canvas);
          return;
      }
      
      // 多个元素，需要拼接
      const canvases = [];
      let totalHeight = 0;
      let maxWidth = 0;
      
      // 先截取所有元素
      for (const element of elements) {
          const canvas = await html2canvas(element, {
              useCORS: true,
              scrollX: 0,
              scrollY: 0,
              windowWidth: document.documentElement.offsetWidth,
              windowHeight: document.documentElement.offsetHeight,
              scale: window.devicePixelRatio
          });
          
          canvases.push(canvas);
          totalHeight += canvas.height;
          maxWidth = Math.max(maxWidth, canvas.width);
      }
      
      // 创建新画布并拼接
      const finalCanvas = document.createElement('canvas');
      finalCanvas.width = maxWidth;
      finalCanvas.height = totalHeight;
      
      const ctx = finalCanvas.getContext('2d');
      let currentY = 0;
      
      // 将每个画布绘制到最终画布上
      for (const canvas of canvases) {
          // 居中绘制
          const x = (maxWidth - canvas.width) / 2;
          ctx.drawImage(canvas, x, currentY);
          currentY += canvas.height;
      }
      
      // 下载拼接后的图片
      downloadImage(finalCanvas);
  }
  
  // 下载图片函数
  function downloadImage(canvas) {
      const image = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      //文件名称使用当前日期加页面标题
      let date = new Date();
      let year = date.getFullYear();
      let month = (date.getMonth() + 1).toString().padStart(2, '0');
      let day = date.getDate().toString().padStart(2, '0');
      let filename = year + '-' + month + '-' + day + '-' + document.title + '.png';
      link.download = filename;
      link.href = image;
      link.click();
  }
})();