☰

Caption Capture

Caption Capture Merge

当前为 2017-06-20 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Caption Capture
  3. // @namespace    http://github.com/lanbin
  4. // @version      0.3
  5. // @description  Caption Capture Merge
  6. // @author       lanbin
  7. // @match        https://*.qq.com/*
  8. // @match        https://*.youtube.com/*
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     var body = document.querySelector("body");
  17.     var MAX_LOOP = 100;
  18.     var aspectRatio, capImage;
  19.     var gapDefault = 40;
  20.     var bottomGapDefault = 30;
  21.     var pressNum = 0;
  22.     var lastCapture = "";
  23.     var clicked = false;
  24.  
  25.     function init(){
  26.         var loop = 0,
  27.             sid = setInterval(function(){
  28.                 var video = getVideo();
  29.                 if(video || loop > MAX_LOOP) {
  30.                     clearInterval(sid);
  31.                     createOp();
  32.                     createImageTemp();
  33.                 }
  34.                 ++loop;
  35.             }, 100);
  36.  
  37.     }
  38.  
  39.     function getCanvas(){
  40.         return document.querySelector("#cc-screen-shot");
  41.     }
  42.  
  43.     function getContext(){
  44.         return getCanvas().getContext("2d");
  45.     }
  46.  
  47.     function getVideo(){
  48.         var videos = document.querySelectorAll("video"),
  49.             v;
  50.         for(var index = 0; index < videos.length; index++){
  51.             if(videos[index].src) {
  52.                 v = videos[index];
  53.                 v.crossOrigin = "anonymous";
  54.                 aspectRatio = v.videoWidth / v.videoHeight;
  55.                 break;
  56.             }
  57.         }
  58.         return v;
  59.     }
  60.  
  61.     function createOp(){
  62.         var capBtn = document.querySelector("#cc-caption-bar");
  63.         if(capBtn) {
  64.             return;
  65.         }
  66.         capBtn = document.createElement("div");
  67.         capBtn.id = "cc-caption-bar";
  68.         capBtn.style="position: absolute;right: 0;top: 100px;width: 90px;background-color: rgb(204, 204, 204);cursor: pointer;z-index: 999999;font-size: 20px;text-align: center;padding: 10px 0;color: black;font-weight: bolder;border-radius: 4px 0 0 4px;";
  69.         capBtn.innerHTML = "Caption";
  70.         body.appendChild(capBtn);
  71.         capBtn.addEventListener("click", function(){
  72.             createPanel();
  73.         });
  74.     }
  75.  
  76.     function createImageTemp(){
  77.         capImage = document.querySelector("#cc-caption-image");
  78.         if(capImage) {
  79.             return;
  80.         }
  81.         capImage = document.createElement("img");
  82.         capImage.id = "cc-caption-image";
  83.         capImage.crossOrigin = "anonymous";
  84.         body.appendChild(capImage);
  85.     }
  86.  
  87.     function createPanel() {
  88.         var capPanel = document.querySelector("#cc-caption-panel");
  89.         if(capPanel) {
  90.             capPanel.style.display = capPanel.style.display === "block" ? "none" : "block";
  91.             return;
  92.         }
  93.  
  94.         var capCanvas = document.createElement("canvas"),
  95.             canvasBox = document.createElement("div"),
  96.             video = getVideo();
  97.  
  98.         if(video.videoWidth === 0 || video.videoHeight === 0) {
  99.             alert("等5秒再点");
  100.             return;
  101.         }
  102.         capCanvas.width = video.videoWidth;
  103.         capCanvas.height = video.videoHeight;
  104.  
  105.         canvasBox.id = "cc-canvas-box";
  106.         var boxStyle = "max-height:600px;overflow-y:scroll;";
  107.  
  108.         if(window.screen.availWidth < 2000) {
  109.             boxStyle += "zoom:0.6;";
  110.         }
  111.         canvasBox.style = boxStyle;
  112.         canvasBox.appendChild(capCanvas);
  113.  
  114.         capPanel = document.createElement("div");
  115.         capPanel.id = "cc-caption-panel";
  116.         capPanel.style="position: fixed; right: 100px; bottom:20px;background-color: #ccc;display:block;z-index:9999999;padding-bottom:80px;box-shadow: 0 0 15px #000000;";
  117.  
  118.         var addScreenShotBtn = document.createElement("div");
  119.         addScreenShotBtn.id = "cc-screen-shot-btn";
  120.         addScreenShotBtn.style="background-color:#ff920b;color:white;text-align:center;font-size:14px;height:40px;line-height:40px;cursor:pointer;";
  121.         addScreenShotBtn.innerHTML = "截图";
  122.  
  123.         var clearScreenShotBtn = document.createElement("div");
  124.         clearScreenShotBtn.id = "cc-clear-screen-shot";
  125.         clearScreenShotBtn.style="background-color:#000;color:white;text-align:center;font-size:14px;height:40px;line-height:40px;cursor:pointer;";
  126.         clearScreenShotBtn.innerHTML = "清空";
  127.  
  128.         var inputBox = document.createElement("div");
  129.         var btnBox = document.createElement("div");
  130.         var bottomBox = document.createElement("div");
  131.         btnBox.style="float:left;width:70%;height:80px;";
  132.         inputBox.style="float:left;width:30%;height:80px;";
  133.         bottomBox.style = "position:absolute;left:0;right:0;";
  134.  
  135.         var bottomHeightLabel = document.createElement("label");
  136.         var bottomHeightInput = document.createElement("input");
  137.         var bottomHeightDiv = document.createElement("div");
  138.  
  139.         bottomHeightInput.id = "cc-bottom-gap";
  140.         bottomHeightLabel.innerHTML = "字幕底部边距：";
  141.         bottomHeightLabel.style = "padding: 0 5px;vertical-align:middle;";
  142.         bottomHeightInput.style = "width:50px;height:30px;vertical-align:middle;text-align:center;";
  143.         bottomHeightInput.value = bottomGapDefault;
  144.  
  145.         var captionHeightLabel = document.createElement("label");
  146.         var captionHeightInput = document.createElement("input");
  147.         var captionHeightDiv = document.createElement("div");
  148.  
  149.         captionHeightInput.id = "cc-caption-height";
  150.         captionHeightLabel.innerHTML = "字幕本身高度：";
  151.         captionHeightLabel.style = "padding: 0 5px;vertical-align:middle;";
  152.         captionHeightInput.style = "width:50px;height:30px;vertical-align:middle;text-align:center;";
  153.         captionHeightDiv.style = "height:40px;";
  154.         captionHeightInput.value = gapDefault;
  155.  
  156.  
  157.         captionHeightDiv.appendChild(captionHeightLabel);
  158.         captionHeightDiv.appendChild(captionHeightInput);
  159.         inputBox.appendChild(captionHeightDiv);
  160.  
  161.         bottomHeightDiv.appendChild(bottomHeightLabel);
  162.         bottomHeightDiv.appendChild(bottomHeightInput);
  163.         inputBox.appendChild(bottomHeightDiv);
  164.  
  165.  
  166.         capCanvas.id = "cc-screen-shot";
  167.  
  168.  
  169.  
  170.         btnBox.appendChild(addScreenShotBtn);
  171.         btnBox.appendChild(clearScreenShotBtn);
  172.         bottomBox.appendChild(inputBox);
  173.         bottomBox.appendChild(btnBox);
  174.         capPanel.appendChild(canvasBox);
  175.         capPanel.appendChild(bottomBox);
  176.  
  177.         body.appendChild(capPanel);
  178.  
  179.         addScreenShotBtn.addEventListener("click", function(){
  180.             addScreenShot();
  181.         });
  182.  
  183.         clearScreenShotBtn.addEventListener("click", function() {
  184.             clearScreenShot();
  185.         });
  186.     }
  187.  
  188.     function clearScreenShot(){
  189.         pressNum = 0;
  190.         var canvas = getCanvas(),
  191.             video = getVideo();
  192.         canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
  193.         canvas.width = video.videoWidth;
  194.         canvas.height = video.videoHeight;
  195.         clicked = false;
  196.     }
  197.  
  198.     function addScreenShot() {
  199.         if(clicked) return;
  200.  
  201.         var canvas = getCanvas(),
  202.             context = getContext(),
  203.             video = getVideo(),
  204.             vWidth = video.videoWidth,
  205.             vHeight = video.videoHeight,
  206.             gap = document.querySelector("#cc-caption-height").value || gapDefault,
  207.             bottomGap = document.querySelector("#cc-bottom-gap").value || bottomGapDefault;
  208.  
  209.         clicked = true;
  210.         if(pressNum === 0){
  211.             context.drawImage(video, 0, 0, vWidth, vHeight- bottomGap, 0, 0, vWidth, vHeight - bottomGap);
  212.             // context.font = "13px Arial";
  213.             // context.fillStyle = "white";
  214.             // context.fillText("Screen Shot by Caption Capture",10,20);
  215.             pressNum++;
  216.             clicked = false;
  217.         }else{
  218.             var dataURL = getCanvas().toDataURL("image/png");
  219.  
  220.             var image = new Image();
  221.             image.onload = function() {
  222.                 clicked = false;
  223.                 var offset = pressNum * gap;
  224.                 canvas.width = vWidth;
  225.                 canvas.height = vHeight + offset;
  226.  
  227.                 getContext().drawImage(video, 0,    0, vWidth, vHeight - bottomGap,  0, offset, vWidth,      vHeight - bottomGap);
  228.                 getContext().drawImage(image, 0,    0);
  229.                 pressNum++;
  230.                 document.querySelector("#cc-canvas-box").scrollTop = document.querySelector("#cc-canvas-box").scrollHeight;
  231.             };
  232.             image.src = dataURL;
  233.         }
  234.     }
  235.  
  236.     init();
  237. })();