Bilibili-Evolved/min/screenshot.min.js
2019-05-19 13:23:39 +08:00

1 line
2.7 KiB
JavaScript

(()=>{return(e,t)=>{const{getFriendlyTitle:i}=t.import("title");class n{constructor(e,t){this.url="";this.timeStamp=(new Date).getTime();this.video=e;this.time=t;this.createUrl()}async createUrl(){const e=document.createElement("canvas");e.width=this.video.videoWidth;e.height=this.video.videoHeight;const t=e.getContext("2d");if(t===null){throw new Error("视频截图失败: canvas 未创建或创建失败.")}t.drawImage(this.video,0,0);e.toBlob(e=>{if(e===null){throw new Error("视频截图失败: 创建 blob 失败.")}this.url=URL.createObjectURL(e)},"image/png")}get filename(){return i()+" @"+this.time.toString()+".png"}get id(){return this.time.toString()+this.timeStamp.toString()}revoke(){URL.revokeObjectURL(this.url)}}const s=e=>{const t=document.createElement("canvas");t.width=e.videoWidth;t.height=e.videoHeight;const i=e.currentTime;return new n(e,i)};t.applyStyle("videoScreenshotStyle");document.body.insertAdjacentHTML("beforeend",`\n <transition-group class="video-screenshot-list" name="video-screenshot-list">\n <video-screenshot v-for="screenshot of screenshots" v-bind:filename="screenshot.filename" v-bind:object-url="screenshot.url" v-on:discard="discard(screenshot)" v-bind:key="screenshot.id"></video-screenshot>\n </transition-group>\n`);Vue.component("video-screenshot",{props:{objectUrl:String,filename:String},template:`\n <div class="video-screenshot-thumbnail">\n <img v-if="objectUrl" v-bind:src="objectUrl">\n <div class="mask" v-if="objectUrl">\n <a v-bind:href="objectUrl" v-bind:download="filename" title="保存">\n <button class="save"><i class="mdi mdi-content-save-outline"></i></button>\n </a>\n <button v-on:click="discard" title="丢弃" class="discard"><i class="mdi mdi-delete-forever-outline"></i></button>\n </div>\n <div class="loading" v-else>\n </div>\n </div>`,methods:{discard(){this.$emit("discard")}}});const o=new Vue({el:".video-screenshot-list",data:{screenshots:[]},methods:{discard(e){this.screenshots.splice(this.screenshots.indexOf(e),1);e.revoke()}}});Observer.videoChange(async()=>{const e=await SpinQuery.select("#bofqi video");const t=await SpinQuery.select(".bilibili-player-video-time");if(e===null||t===null||document.querySelector(".video-take-screenshot")){return}t.insertAdjacentHTML("afterend",`\n <div class="video-take-screenshot" title="截图">\n <span><i class="mdi mdi-camera"></i></span>\n </div>`);const i=document.querySelector(".video-take-screenshot");if(i===null){return}i.addEventListener("click",()=>{const t=s(e);o.screenshots.push(t)})});return{export:{takeScreenshot:s,screenShotsList:o}}}})();