☰

JsonCrawler

获取截图及json

  1. // ==UserScript==
  2. // @name         JsonCrawler
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3
  5. // @description  获取截图及json
  6. // @author       You
  7. // @match        *://*/*
  8. // @license MIT
  9. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  10. // @grant        none
  11. // ==/UserScript==
  12. (function () {
  13.     'use strict';
  14.  
  15.     // * 在本地进行文件保存
  16.     // * @param  {String} data     要保存到本地的图片数据/或路径
  17.     // * @param  {String} filename 文件名
  18.     // */
  19.     function saveFile(data, filename) {
  20.         // 创建一个<a>标签
  21.         let save_link = document.createElement('a');
  22.         save_link.href = data;
  23.         save_link.download = filename;
  24.         let event = document.createEvent('MouseEvents');
  25.         event.initMouseEvent('click', true, false, window, 0,
  26.             0, 0, 0, 0, false, false,
  27.             false, false, 0, null);
  28.         save_link.dispatchEvent(event);
  29.     }
  30.  
  31.  
  32.     //本地下载快照  ，name是文件的部分名称
  33.     function doLoadQR(name) {
  34.         //新建一个画布元素
  35.         let canvas2 = document.createElement("canvas");
  36.         //获取该元素区块的本身宽高
  37.         let w = 3000;
  38.         let h = 2000;
  39.         // console.log(w+"======"+h);
  40.         //因为直接用默认画布会模糊，因此自定义画布，设置画布尺寸为容器的两倍大小，再将内容放大两倍画上去，
  41.         // 修改偏移量，就可以解决模糊问题
  42.         //画布真实宽高
  43.         canvas2.width = w;
  44.         canvas2.height = h;
  45.         //宽高宽高
  46.         canvas2.style.width = w + "px";
  47.         canvas2.style.height = h + "px";
  48.         //设置画布的内容
  49.         let context = canvas2.getContext("2d");
  50.         //x,y轴放大两倍
  51.         //context.scale(2, 2);
  52.         //获取容器边距对象
  53.         let rect = document.getElementsByTagName('body')[0];
  54.         //设置偏移量
  55.         context.translate('-' + rect.left, '-' + rect.top);
  56.         //调用库
  57.         html2canvas(document.getElementsByTagName('body')[0]
  58.             , {
  59.                 useCORS: true,
  60.                 scale: 2,
  61.                 width: w,
  62.                 height: h,
  63.                 //使用自定义的画布
  64.                 canvas: canvas2,
  65.                 // window.devicePixelRatio是设备像素比
  66.                 dpi: window.devicePixelRatio,//* 2,
  67.  
  68.             }
  69.         ).then(function (canvas) {
  70.             // 回调生成的画布canvas对象
  71.             // 获取生成的图片的相对url，其实将bese64加密的数据 的数据类型image/png换成image/octet-stream
  72.             let imgUri = canvas.toDataURL("image/png")
  73.                 .replace("image/png", "image/octet-stream");
  74.             //文件名称
  75.             let filename = (new Date()).getTime() + "_" + name + '.png';
  76.             //下载
  77.             saveFile(imgUri, filename);
  78.         });
  79.     }
  80.  
  81.     var script = document.createElement('script');
  82.     script.src = "http://html2canvas.hertzen.com/dist/html2canvas.min.js";
  83.     document.getElementsByTagName('head')[0].appendChild(script);
  84.  
  85.  
  86.     var input = document.createElement("input");
  87.     input.type = "text";
  88.     input.style.width = "300px";
  89.     input.style.height = "50px";
  90.     input.style.borderRadius = "10px";
  91.     input.style.textAlign = "center";
  92.     input.value = (new Date()).getTime() + '默认名称';
  93.     input.style.borderColor = "#444654";
  94.     input.style.marginBottom = "20px";
  95.  
  96.     var button = document.createElement("button"); //创建一个input对象（提示框按钮）
  97.     button.id = "id001";
  98.     button.textContent = "DownLoad";
  99.     button.style.width = "200px";
  100.     button.style.height = "50px";
  101.     button.style.color = "#000"
  102.     button.style.alignItems = "center";
  103.     button.style.borderRadius = "15px";
  104.     button.style.backgroundColor = "#ECF8FF";
  105.     button.style.border = "none";
  106.     button.style.marginBottom = "20px";
  107.  
  108.     var isOnButton = document.createElement("button");
  109.     isOnButton.textContent = "已开启跳转";
  110.     isOnButton.style.width = "200px";
  111.     isOnButton.style.height = "50px";
  112.     isOnButton.style.color = "#000"
  113.     isOnButton.style.alignItems = "center";
  114.     isOnButton.style.borderRadius = "15px";
  115.     isOnButton.style.backgroundColor = "#ECF8FF";
  116.     isOnButton.style.border = "none";
  117.     isOnButton.style.marginBottom = "20px";
  118.  
  119.  
  120.     var DownloadPicture = document.createElement("button");
  121.     DownloadPicture.textContent = "下载快照";
  122.     DownloadPicture.style.width = "200px";
  123.     DownloadPicture.style.height = "50px";
  124.     DownloadPicture.style.color = "#000"
  125.     DownloadPicture.style.alignItems = "center";
  126.     DownloadPicture.style.borderRadius = "15px";
  127.     DownloadPicture.style.backgroundColor = "#ECF8FF";
  128.     DownloadPicture.style.border = "none";
  129.     DownloadPicture.style.marginBottom = "20px";
  130.  
  131.     var container = document.createElement("div");
  132.     container.appendChild(input);
  133.     container.appendChild(button);
  134.     container.appendChild(DownloadPicture);
  135.     container.appendChild(isOnButton);
  136.     container.style.display = "flex";
  137.     container.style.flexDirection = "column";
  138.     container.style.justifyContent = "center";
  139.     container.style.alignItems = "center";
  140.  
  141.     var isOn = true;
  142.     isOnButton.onclick = function () {
  143.         isOn = !isOn;
  144.         if (isOn) {
  145.             isOnButton.textContent = '已开启跳转';
  146.             isOnButton.style.backgroundColor = '#ECF8FF';
  147.             isOnButton.style.color = '#000';
  148.         } else {
  149.             isOnButton.textContent = '已关闭跳转';
  150.             isOnButton.style.backgroundColor = '#ECF8FF';
  151.             isOnButton.style.color = '#000';
  152.         }
  153.     }
  154.  
  155.     DownloadPicture.onclick = function () {
  156.         function isEmpty(s) {
  157.             return s == undefined || s === '';
  158.  
  159.         }
  160.         var iframe = document.getElementsByTagName('iframe')[0];
  161.         if (isOn && !isEmpty(iframe)) {
  162.             var iframeSrc = iframe.getAttribute('src');
  163.             window.location.href = iframeSrc;
  164.             // 创建消息提示框元素
  165.             var alertBox = document.createElement('div');
  166.             alertBox.setAttribute('class', 'alert-box');
  167.             alertBox.style.position = 'fixed';
  168.             alertBox.style.top = '0';
  169.             alertBox.style.width = '100%';
  170.             alertBox.style.padding = '10px';
  171.             alertBox.style.backgroundColor = '#007bff';
  172.             alertBox.style.color = '#fff';
  173.             alertBox.style.textAlign = 'center';
  174.             alertBox.style.zIndex = '9999';
  175.             alertBox.style.transition = 'transform .5s ease-in-out';
  176.  
  177.             // 创建消息提示框文本元素
  178.             var alertText = document.createElement('span');
  179.             alertText.setAttribute('class', 'alert-text');
  180.             alertBox.appendChild(alertText);
  181.  
  182.             // 添加消息提示框到页面
  183.             document.body.appendChild(alertBox);
  184.  
  185.             // 显示消息提示框
  186.             function showAlert(message) {
  187.                 alertText.innerHTML = message;
  188.                 alertBox.style.transform = 'translateY(0)';
  189.                 setTimeout(function () {
  190.                     alertBox.style.transform = 'translateY(-100%)';
  191.                 }, 3000);
  192.             }
  193.  
  194.             // 示例调用代码
  195.             showAlert('~已跳转到子文档对应网站~');
  196.  
  197.             return;
  198.         }
  199.         doLoadQR(input.value);
  200.     };
  201.  
  202.  
  203.     //绑定按键点击功能
  204.     button.onclick = function () {
  205.         //如果有iframe元素,则跳转到对应网站,可以选择是否跳转
  206.         var iframe = document.getElementsByTagName('iframe')[0];
  207.         if (isOn && !isEmpty(iframe)) {
  208.             var iframeSrc = iframe.getAttribute('src');
  209.             window.location.href = iframeSrc;
  210.             // 创建消息提示框元素
  211.             var alertBox = document.createElement('div');
  212.             alertBox.setAttribute('class', 'alert-box');
  213.             alertBox.style.position = 'fixed';
  214.             alertBox.style.top = '0';
  215.             alertBox.style.width = '100%';
  216.             alertBox.style.padding = '10px';
  217.             alertBox.style.backgroundColor = '#007bff';
  218.             alertBox.style.color = '#fff';
  219.             alertBox.style.textAlign = 'center';
  220.             alertBox.style.zIndex = '9999';
  221.             alertBox.style.transition = 'transform .5s ease-in-out';
  222.  
  223.             // 创建消息提示框文本元素
  224.             var alertText = document.createElement('span');
  225.             alertText.setAttribute('class', 'alert-text');
  226.             alertBox.appendChild(alertText);
  227.  
  228.             // 添加消息提示框到页面
  229.             document.body.appendChild(alertBox);
  230.  
  231.             // 显示消息提示框
  232.             function showAlert(message) {
  233.                 alertText.innerHTML = message;
  234.                 alertBox.style.transform = 'translateY(0)';
  235.                 setTimeout(function () {
  236.                     alertBox.style.transform = 'translateY(-100%)';
  237.                 }, 3000);
  238.             }
  239.  
  240.             // 示例调用代码
  241.             showAlert('~已跳转到子文档对应网站~');
  242.  
  243.             return;
  244.         }
  245.  
  246.         // Your code here...
  247.         var json = "{\"container\":{\"height\":" + document.documentElement.scrollHeight + "},\"blocks\":[";
  248.         var reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
  249.         var numReg = /[1-9][0-9]*/g;
  250.  
  251.  
  252.         // 遍历所有子元素
  253.         var nodes;
  254.  
  255.         nodes = document.all;
  256.  
  257.         //var pageWidth = document.documentElement.scrollWidth;
  258.         var pageHeight = document.documentElement.scrollHeight;
  259.  
  260.         function isEmpty(s) {
  261.             return s == undefined || s === '';
  262.  
  263.         }
  264.  
  265.         function getElementPosInfo(width, height, left, top) {
  266.             return "\"width\":" + width +
  267.                 ",\"height\":" + height +
  268.                 ",\"left\":" + left +
  269.                 ",\"top\":" + top + ",";
  270.         }
  271.  
  272.         function getElementLeft(element) {
  273.             var actualLeft = element.offsetLeft;
  274.             var current = element.offsetParent;
  275.             while (current !== null) {
  276.                 actualLeft += current.offsetLeft;
  277.                 current = current.offsetParent;
  278.             }
  279.             return actualLeft;
  280.         }
  281.  
  282.         function getElementTop(element) {
  283.             var actualTop = element.offsetTop;
  284.             var current = element.offsetParent;
  285.             while (current !== null) {
  286.                 actualTop += current.offsetTop;
  287.                 current = current.offsetParent;
  288.             }
  289.             return actualTop;
  290.         }
  291.  
  292.         for (var i = 0; i < nodes.length; i++) {
  293.             var o = nodes[i];
  294.             if (isEmpty(o)) {
  295.                 continue;
  296.             }
  297.             var text = o.innerText;
  298.  
  299.             var style = getComputedStyle(o);
  300.             var color = style.getPropertyValue('color');
  301.             var fontSize = style.getPropertyValue('font-size').match(numReg);
  302.             var backImg = style.getPropertyValue('background-image').match(reg);
  303.             var textAlign = style.getPropertyValue('text-align');
  304.             var backgroundColor = style.getPropertyValue('background-color');
  305.  
  306.  
  307.             var error = 0;
  308.             try {
  309.                 var otop = getElementTop(o);
  310.                 var oleft = getElementLeft(o);
  311.                 var owidth = o.offsetWidth;
  312.                 var oheight = o.offsetHeight;
  313.             } catch (error) {
  314.                 console.log("Find exception");
  315.                 error = 1;
  316.             }
  317.  
  318.             if (error === 1) {
  319.                 continue;
  320.             }
  321.  
  322.  
  323.             if (owidth <= 0 || oheight <= 0 || otop < 0 || oleft < 0) {
  324.                 continue;
  325.             }
  326.  
  327.             var posInfo = getElementPosInfo(owidth, oheight, oleft, otop);
  328.             if (/*(o.tagName === 'A' && o.href != null) ||*/ o.tagName === 'btn') {
  329.                 // add a button
  330.                 var p = o;
  331.                 while (p.firstElementChild !== null) {
  332.                     p = p.firstElementChild;
  333.                 }
  334.                 text = p.innerHTML;
  335.                 var src = p.src;
  336.                 json = json + "{\"key\":\"默认按钮\",\"componentProps\":{},"
  337.                     + posInfo
  338.                     + "\"text\":\"" + text
  339.                     + "\"";
  340.                 //+ "\",\"font\":\""+font
  341.                 if (src !== undefined) {
  342.                     json = json + ",\"src\":\"" + src + "\"";
  343.                 }
  344.                 json = json + ",\"zIndex\":3},";
  345.             } else if ((text != null && o.firstElementChild === null && (o.tagName === 'H1' || o.tagName === 'H2' || o.tagName === 'H3' || o.tagName === 'H4' || o.tagName === 'H5' || o.tagName === 'H6' ||
  346.                 o.tagName === 'A' || o.tagName === 'SPAN' || o.tagName === 'DIV' || o.tagName === 'P' || o.tagName === 'LI' || o.tagName === 'Q' || o.tagName === 'FONT' || o.tagName === 'B'))) {
  347.                 // add a label
  348.                 json = json + "{\"key\":\"文本框\",\"componentProps\":{},"
  349.                     + posInfo
  350.                     + "\"text\":\"" + text
  351.                     + "\",\"fontColor\":\"" + color
  352.                     + "\",\"size\":\"" + fontSize
  353.                     + "\",\"textAlign\":\"" + textAlign
  354.                     + "\",\"zIndex\":3},";
  355.                 //              "\",\"font\":\""+font+
  356.             } else if (o.tagName === 'IMG') {
  357.                 // add an image
  358.                 json = json + "{\"key\":\"图片\","
  359.                     + posInfo
  360.                     + "\"componentProps\":{"
  361.                     + "\"src\":\"" + o.src
  362.                     + "\"},\"zIndex\":3},";
  363.                 // + "\",\"font\":\""+font
  364.                 // + "\"text\":\""+text
  365.             } else if (!isEmpty(backImg)) {
  366.                 // add a background image
  367.                 json = json + "{\"key\":\"网站模块背景\",\"componentProps\":{},"
  368.                     + posInfo
  369.                     + "\"bgcImage\":\"" + backImg
  370.                     + "\",\"bgcColor\":\"rgba(252, 214, 41, 0)\",\"zIndex\":1},";
  371.             } else if ((o.tagName === 'DIV' || o.tagName === 'SECTION' || o.tagName === 'FOOTER' || o.tagName === 'BLOCKQUOTE')
  372.                 && backgroundColor != 'rgb(255, 255, 255)'
  373.                 && backgroundColor != 'rgba(255, 255, 255, 1)'
  374.                 && backgroundColor != 'rgba(255, 255, 255, 0)'
  375.                 && backgroundColor != 'rgba(0, 0, 0, 0)'
  376.                 && !isEmpty(o)) {
  377.                 // add a color block
  378.                 json = json + "{\"key\":\"网站模块背景\",\"componentProps\":{},"
  379.                     + posInfo
  380.                     + "\"bgcColor\":\"" + backgroundColor + "\",\"zIndex\":1},";
  381.             }
  382.         }
  383.  
  384.         json = json.substr(0, json.length - 1) + "],\"focusData\":{}}";
  385.  
  386.         var downelem = document.createElement('a');
  387.         downelem.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(json));
  388.         downelem.setAttribute('download', input.value);
  389.  
  390.         downelem.style.display = 'none';
  391.         document.body.appendChild(downelem);
  392.  
  393.         downelem.click();
  394.  
  395.         document.body.removeChild(downelem);
  396.  
  397.         /*var url = "http://121.36.109.90:8000/api/spider/add";
  398.         var httpRequest = new XMLHttpRequest();
  399.         httpRequest.open('POST', url, true);
  400.         httpRequest.setRequestHeader("Content-type", "application/json");
  401.         var obj = {
  402.             "json": json,
  403.         };
  404.  
  405.         httpRequest.send(JSON.stringify(obj));
  406.  
  407.         // 响应后的回调函数
  408.         httpRequest.onreadystatechange = function () {
  409.             if (httpRequest.readyState == 4 && httpRequest.status == 200) {
  410.                 var json = httpRequest.responseText;
  411.                 console.log(json);
  412.             }
  413.         };*/
  414.  
  415.     };
  416.  
  417.  
  418.     window.top.document.getElementsByTagName('body')[0].appendChild(container);
  419. })();