您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Caption Capture Merge
当前为
- // ==UserScript==
- // @name Caption Capture
- // @namespace http://github.com/lanbin
- // @version 0.3
- // @description Caption Capture Merge
- // @author lanbin
- // @match https://*.qq.com/*
- // @match https://*.youtube.com/*
- // @grant GM_setValue
- // @grant GM_getValue
- // ==/UserScript==
- (function() {
- 'use strict';
- var body = document.querySelector("body");
- var MAX_LOOP = 100;
- var aspectRatio, capImage;
- var gapDefault = 40;
- var bottomGapDefault = 30;
- var pressNum = 0;
- var lastCapture = "";
- var clicked = false;
- function init(){
- var loop = 0,
- sid = setInterval(function(){
- var video = getVideo();
- if(video || loop > MAX_LOOP) {
- clearInterval(sid);
- createOp();
- createImageTemp();
- }
- ++loop;
- }, 100);
- }
- function getCanvas(){
- return document.querySelector("#cc-screen-shot");
- }
- function getContext(){
- return getCanvas().getContext("2d");
- }
- function getVideo(){
- var videos = document.querySelectorAll("video"),
- v;
- for(var index = 0; index < videos.length; index++){
- if(videos[index].src) {
- v = videos[index];
- v.crossOrigin = "anonymous";
- aspectRatio = v.videoWidth / v.videoHeight;
- break;
- }
- }
- return v;
- }
- function createOp(){
- var capBtn = document.querySelector("#cc-caption-bar");
- if(capBtn) {
- return;
- }
- capBtn = document.createElement("div");
- capBtn.id = "cc-caption-bar";
- 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;";
- capBtn.innerHTML = "Caption";
- body.appendChild(capBtn);
- capBtn.addEventListener("click", function(){
- createPanel();
- });
- }
- function createImageTemp(){
- capImage = document.querySelector("#cc-caption-image");
- if(capImage) {
- return;
- }
- capImage = document.createElement("img");
- capImage.id = "cc-caption-image";
- capImage.crossOrigin = "anonymous";
- body.appendChild(capImage);
- }
- function createPanel() {
- var capPanel = document.querySelector("#cc-caption-panel");
- if(capPanel) {
- capPanel.style.display = capPanel.style.display === "block" ? "none" : "block";
- return;
- }
- var capCanvas = document.createElement("canvas"),
- canvasBox = document.createElement("div"),
- video = getVideo();
- if(video.videoWidth === 0 || video.videoHeight === 0) {
- alert("等5秒再点");
- return;
- }
- capCanvas.width = video.videoWidth;
- capCanvas.height = video.videoHeight;
- canvasBox.id = "cc-canvas-box";
- var boxStyle = "max-height:600px;overflow-y:scroll;";
- if(window.screen.availWidth < 2000) {
- boxStyle += "zoom:0.6;";
- }
- canvasBox.style = boxStyle;
- canvasBox.appendChild(capCanvas);
- capPanel = document.createElement("div");
- capPanel.id = "cc-caption-panel";
- 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;";
- var addScreenShotBtn = document.createElement("div");
- addScreenShotBtn.id = "cc-screen-shot-btn";
- addScreenShotBtn.style="background-color:#ff920b;color:white;text-align:center;font-size:14px;height:40px;line-height:40px;cursor:pointer;";
- addScreenShotBtn.innerHTML = "截图";
- var clearScreenShotBtn = document.createElement("div");
- clearScreenShotBtn.id = "cc-clear-screen-shot";
- clearScreenShotBtn.style="background-color:#000;color:white;text-align:center;font-size:14px;height:40px;line-height:40px;cursor:pointer;";
- clearScreenShotBtn.innerHTML = "清空";
- var inputBox = document.createElement("div");
- var btnBox = document.createElement("div");
- var bottomBox = document.createElement("div");
- btnBox.style="float:left;width:70%;height:80px;";
- inputBox.style="float:left;width:30%;height:80px;";
- bottomBox.style = "position:absolute;left:0;right:0;";
- var bottomHeightLabel = document.createElement("label");
- var bottomHeightInput = document.createElement("input");
- var bottomHeightDiv = document.createElement("div");
- bottomHeightInput.id = "cc-bottom-gap";
- bottomHeightLabel.innerHTML = "字幕底部边距:";
- bottomHeightLabel.style = "padding: 0 5px;vertical-align:middle;";
- bottomHeightInput.style = "width:50px;height:30px;vertical-align:middle;text-align:center;";
- bottomHeightInput.value = bottomGapDefault;
- var captionHeightLabel = document.createElement("label");
- var captionHeightInput = document.createElement("input");
- var captionHeightDiv = document.createElement("div");
- captionHeightInput.id = "cc-caption-height";
- captionHeightLabel.innerHTML = "字幕本身高度:";
- captionHeightLabel.style = "padding: 0 5px;vertical-align:middle;";
- captionHeightInput.style = "width:50px;height:30px;vertical-align:middle;text-align:center;";
- captionHeightDiv.style = "height:40px;";
- captionHeightInput.value = gapDefault;
- captionHeightDiv.appendChild(captionHeightLabel);
- captionHeightDiv.appendChild(captionHeightInput);
- inputBox.appendChild(captionHeightDiv);
- bottomHeightDiv.appendChild(bottomHeightLabel);
- bottomHeightDiv.appendChild(bottomHeightInput);
- inputBox.appendChild(bottomHeightDiv);
- capCanvas.id = "cc-screen-shot";
- btnBox.appendChild(addScreenShotBtn);
- btnBox.appendChild(clearScreenShotBtn);
- bottomBox.appendChild(inputBox);
- bottomBox.appendChild(btnBox);
- capPanel.appendChild(canvasBox);
- capPanel.appendChild(bottomBox);
- body.appendChild(capPanel);
- addScreenShotBtn.addEventListener("click", function(){
- addScreenShot();
- });
- clearScreenShotBtn.addEventListener("click", function() {
- clearScreenShot();
- });
- }
- function clearScreenShot(){
- pressNum = 0;
- var canvas = getCanvas(),
- video = getVideo();
- canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
- canvas.width = video.videoWidth;
- canvas.height = video.videoHeight;
- clicked = false;
- }
- function addScreenShot() {
- if(clicked) return;
- var canvas = getCanvas(),
- context = getContext(),
- video = getVideo(),
- vWidth = video.videoWidth,
- vHeight = video.videoHeight,
- gap = document.querySelector("#cc-caption-height").value || gapDefault,
- bottomGap = document.querySelector("#cc-bottom-gap").value || bottomGapDefault;
- clicked = true;
- if(pressNum === 0){
- context.drawImage(video, 0, 0, vWidth, vHeight- bottomGap, 0, 0, vWidth, vHeight - bottomGap);
- // context.font = "13px Arial";
- // context.fillStyle = "white";
- // context.fillText("Screen Shot by Caption Capture",10,20);
- pressNum++;
- clicked = false;
- }else{
- var dataURL = getCanvas().toDataURL("image/png");
- var image = new Image();
- image.onload = function() {
- clicked = false;
- var offset = pressNum * gap;
- canvas.width = vWidth;
- canvas.height = vHeight + offset;
- getContext().drawImage(video, 0, 0, vWidth, vHeight - bottomGap, 0, offset, vWidth, vHeight - bottomGap);
- getContext().drawImage(image, 0, 0);
- pressNum++;
- document.querySelector("#cc-canvas-box").scrollTop = document.querySelector("#cc-canvas-box").scrollHeight;
- };
- image.src = dataURL;
- }
- }
- init();
- })();