完成截图工具

docs/thumbnail/css/common.css

@@ -90,7 +90,8 @@ html, body {
 }
 
 .left-part .setup .item .name{
-    width: 50px;
+    width: 65px;
+    text-align: right;
 }
 
 .left-part .setup .item .input {
@@ -122,6 +123,10 @@ html, body {
     background: #97a8be;
 }
 
+.left-part .btns .btn.create {
+    background: #3ca5ea;
+}
+
 .left-part .btns .btn.download {
     background: #3ca5ea;
 }
@@ -131,17 +136,29 @@ html, body {
 }
 
 .rigth-part {
+    display: flex;
+    flex-direction: column;
     flex: 1;
-    padding: 20px;
-    box-sizing: border-box;
+    overflow: hidden;
 }
 
-.rigth-part .img {
+.rigth-part .preview {
     width: 100%;
-    height: 100%;
+    height: 70%;
     border: 2px dashed #d9d9d9;
     background-color: #f5f5f5;
     background-repeat: no-repeat;
     background-position: center center;
     background-size: contain;
-}
+    box-sizing: border-box;
+}
+
+.rigth-part .preview canvas {
+    max-width: 100%;
+}
+
+.rigth-part .console {
+    position: relative;
+    height: 30%;
+  }
+  

docs/thumbnail/css/consola.css

@@ -0,0 +1 @@
+.consola-container{opacity:.9;display:flex;flex-direction:column;position:absolute;background-color:#242424}.consola-container.right{top:0;right:0;bottom:0;height:100%;width:0}.consola-container.bottom{left:0;right:0;bottom:0;width:100%;height:0}.consola-container .consola-tools{left:0;right:0;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;flex-direction:row;height:30px;padding:0 10px;color:hsla(0,0%,100%,.8);background-color:#141618;border-bottom:1px solid rgba(0,0,0,.3);font-size:12px;box-sizing:border-box}.consola-container .consola-tools .consola-clean{cursor:pointer}.consola-container .consola-wrap{flex:1;position:relative;z-index:1;overflow-y:auto;word-break:break-word;box-sizing:border-box}.consola-container .consola-wrap .method.method-log{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-log .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABpSURBVChTY6A92LNnj96uXbvKoVzsYMeOHVbbt29/D1T4eP/+/QJQYVSwe/duD6CCr0B8A8iWgwqjAqBk2NatW38B6bPbtm0TBYkBFbsA+c9ANFgRCBCtEASAAoSthgGiPAMD2IOHgQEA521bM7uG52wAAAAASUVORK5CYII=)}.consola-container .consola-wrap .method.method-info{position:relative;display:flex;color:hsla(0,0%,100%,.9);background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-info .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADISURBVChTY4ABp/AztmZBZ07qe538rO114rOa8+GTskYHbKHSEOARd6nLIOTsf61gIA46U6kVePYQiK3uc/K/hPG+LrCi8IyrtkZh5yCKgk/80w46ba0RdGYGhH/2v6rXyf88qtttGVwSLp2ECQLxeiAu1wo6uwpJ7L+o2f6TDA6xZz8jCyqFnuHXCj4djywmZXHoM/EK0azGqhBsNYpngL6VCTnGqRF4xgKo+D5IDO4ZEEAKnjcQBafvqwWf/YoSPDCAP8AZGAC7mLM81zgOTQAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-warn{position:relative;display:flex;color:#ffdc9e;background-color:#332b00;border-top:1px solid #650;border-bottom:1px solid #650;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-warn .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACkSURBVChTbY7BCoJQFERn0Q/3BX1JuxQjsSCXiV8gtCgxhCIrKIRIqKDVzXl5w5cNHBjm6eGinXiAXu5inY2xYm/mbpIh+vcFhLA3sx0athNUhymEsP+10lAEEA17x8o/9wFuNGnYuVlWve0SQl7P0sBu3aq2R1Q/1JzSkYGd29eqNv2wjdnUuvNRciC/N+qe+7gidbA8zyHkOINsvA/sumcOkjcabcBmw2+mMgAAAABJRU5ErkJggg==)}.consola-container .consola-wrap .method.method-error{position:relative;display:flex;color:#ff8080;background-color:#290000;border-top:1px solid #5b0000;border-bottom:1px solid #5b0000;margin-top:-1px;margin-bottom:1px;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-error .method-icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADESURBVChTY4CB7ZI8tmfU5E6e01b+DMIgNkgMKg0BR9Vkux6YWPx/bemIgkFiIDmwogOaqrYPzazAEm8DwuGKYGyQHEgNw0VT05Mwib9v3v7/kJEHxiA2TDFIDcNNU4vPMFPACj58/P/v40cwGyYOUsNwy8IZRSFIEUgxskKQGoZrzp4ErQapYbgYHG371M4dLACTQGaD5EBqwD6/FpzQ9dTBE64IhkFiIDmwIhi4mlJqey8o4eR9r8jPIAxig8QgsgwMAFZz1YtGPXgjAAAAAElFTkSuQmCC)}.consola-container .consola-wrap .method.method-debug{position:relative;display:flex;color:#4d88ff;background-color:transparent;border-top:1px solid hsla(0,0%,100%,.05);border-bottom:1px solid hsla(0,0%,100%,.05);margin-top:-1px;margin-bottom:0;padding-left:10px;box-sizing:border-box}.consola-container .consola-wrap .method.method-debug .method-icon{background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3e%3cpath fill='%234D88FF' d='M433.5 127.5h-71.4a177.7 177.7 0 0 0-45.9-51L357 35.7 321.3 0l-56.1 56.1c-10.2-2.6-23-5.1-35.7-5.1s-25.5 2.5-35.7 5.1L137.7 0 102 35.7l40.8 40.8a177.7 177.7 0 0 0-45.9 51H25.5v51H79c-2.5 7.7-2.5 17.9-2.5 25.5v25.5h-51v51h51V306a88 88 0 0 0 2.5 25.5H25.5v51h71.4A152.2 152.2 0 0 0 229.5 459c56.1 0 107.1-30.6 132.6-76.5h71.4v-51H380c2.5-7.7 2.5-17.9 2.5-25.5v-25.5h51v-51h-51V204c0-7.7 0-17.9-2.5-25.5h53.5v-51zm-153 204h-102v-51h102v51zm0-102h-102v-51h102v51z'/%3e%3c/svg%3e")}.consola-container .consola-wrap .method *{vertical-align:top;box-sizing:border-box;font-family:Consolas,Lucida Console,Courier New,monospace;white-space:pre-wrap;font-size:12px}.consola-container .consola-wrap .method .method-icon{width:10px;height:18px;background-image:noneLine truncated

docs/thumbnail/index.html

@@ -11,55 +11,52 @@
     <link rel="shortcut icon" href="./img/favicon.ico">
     <link rel="stylesheet" href="./css/normalize.css">
     <link rel="stylesheet" href="./css/common.css">
+    <link rel="stylesheet" href="./css/consola.css">
     <link rel="stylesheet" href="../uncompiled/artplayer.css">    
-    <link rel="stylesheet" href="../uncompiled/artplayer-tool-thumbnail.css">    
 </head>
 
 <body>
     <div class="container">
         <div class="left-part">
             <div class="upload">
-                点击上传视频文件, 支持格式：mp4、ogg、webm
+                Click to upload video file, support format: mp4, ogg, webm
                 <input class="file" type="file">
             </div>
             <div class="artplayer"></div>
-            <div class="result">
-                <div class="item">
-                    <div class="name">长宽：</div>
-                    <span class="aspectRatio">0 x 0</span>
-                </div>
-                <div class="item">
-                    <div class="name">时长：</div>
-                    <span class="duration">0s</span>
-                </div>
-            </div>
             <div class="setup">
                 <div class="item">
-                    <div class="name">数量：</div>
-                    <input class="input number" type="number" min="10" max="100" placeholder="10 - 100" value="100">
+                    <div class="name">Delay：</div>
+                    <input class="input delay" type="number" min="100" max="1000" placeholder="100 - 1000" value="300">
                 </div>
                 <div class="item">
-                    <div class="name">宽度：</div>
-                    <input class="input width" type="number" min="10" max="100" placeholder="100 - 500" value="100">
+                    <div class="name">Number：</div>
+                    <input class="input number" type="number" min="10" max="100" placeholder="10 - 100" value="60">
                 </div>
                 <div class="item">
-                    <div class="name">高度：</div>
-                    <input class="input height" type="number" min="10" max="100" placeholder="100 - 500" value="100">
+                    <div class="name">Width：</div>
+                    <input class="input width" type="number" min="100" max="500" placeholder="100 - 500" value="160">
                 </div>
                 <div class="item">
-                    <div class="name">纵数：</div>
+                    <div class="name">Height：</div>
+                    <input class="input height" type="number" min="100" max="500" placeholder="100 - 500" value="90">
+                </div>
+                <div class="item">
+                    <div class="name">Column：</div>
                     <input class="input column" type="number" min="10" max="100" placeholder="10 - 100" value="10">
                 </div>
             </div>
             <div class="btns">
-                <div class="btn reset">重置</div>
-                <div class="btn download">下载</div>
+                <div class="btn reset">Reset</div>
+                <div class="btn download">Download</div>
+                <div class="btn create">Create</div>
             </div>
         </div>
         <div class="rigth-part">
-            <div class="img"></div>
+            <div class="preview"></div>
+            <div class="console"></div>
         </div>
     </div>
+    <script src="./js/consola.js"></script>
     <script src="../uncompiled/artplayer.js"></script>
     <script src="../uncompiled/artplayer-tool-thumbnail.js"></script>
     <script src="./js/common.js"></script>

docs/thumbnail/js/common.js

@@ -1,59 +1,102 @@
+'use strict';
+
 (function() {
-    var $img = document.querySelector('.img');
+    var $preview = document.querySelector('.preview');
     var $upload = document.querySelector('.upload');
     var $file = document.querySelector('.file');
+    var $reset = document.querySelector('.reset');
+    var $create = document.querySelector('.create');
+    var $download = document.querySelector('.download');
     var $artplayer = document.querySelector('.artplayer');
-    var $aspectRatio = document.querySelector('.aspectRatio');
-    var $duration = document.querySelector('.duration');
+    var $delay = document.querySelector('.delay');
     var $number = document.querySelector('.number');
     var $width = document.querySelector('.width');
     var $height = document.querySelector('.height');
     var $column = document.querySelector('.column');
 
-    var thumbnail = new ArtplayerToolThumbnail({
-        fileInput: $file,
-        callbackVideoUrl: function(url) {
-            $upload.style.display = 'none';
-            $artplayer.style.display = 'block';
-            restartArtplayer();
-        },
-        callbackThumbnailUrl: function(url) {
-            $img.style.backgroundImage = `url(${url})`;
-        },
-        callbackDone: function(videoUrl, thumbnailUrl) {
-            restartArtplayer();
-        },
+    function getConfig() {
+        return {
+            delay: Number($delay.value),
+            number: Number($number.value),
+            width: Number($width.value),
+            height: Number($height.value),
+            column: Number($column.value),
+        };
+    }
+
+    consola.creat({
+        target: '.console',
+        size: '100%',
+        zIndex: 99,
     });
 
-    function restartArtplayer() {
+    console.info('Welcome to this tool, if you like it, consider star it, thank you.');
+    console.info('https://github.com/zhw2590582/ArtPlayer');
+
+    window.addEventListener('error', function(err) {
+        console.error(err.message);
+    });
+
+    var thumbnail = new ArtplayerToolThumbnail({
+        fileInput: $file,
+    });
+
+    $reset.addEventListener('click', function() {
+        window.location.reload();
+    });
+
+    $create.addEventListener('click', function() {
+        thumbnail.setup(getConfig()).start();
+    });
+
+    $download.addEventListener('click', function() {
+        thumbnail.download();
+    });
+
+    thumbnail.on('file', function(file) {
+        console.log('Read video successfully: ' + file.name);
+    });
+
+    thumbnail.on('video', function(video) {
+        console.log('Video size: ' + video.videoWidth + ' x ' + video.videoHeight);
+        console.log('Video duration: ' + video.duration + 's');
+        thumbnail.setup(getConfig()).start();
+    });
+
+    thumbnail.on('canvas', function(canvas) {
+        console.log('Build canvas successfully');
+        console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
+    });
+
+    thumbnail.on('update', function(percentage, url) {
+        console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
+        $preview.style.backgroundImage = 'url(' + url + ')';
+    });
+
+    thumbnail.on('download', function(name) {
+        console.log('Start download preview: ' + name);
+    });
+
+    thumbnail.on('done', function() {
+        console.log('Build preview image complete');
+        $upload.style.display = 'none';
+        $artplayer.style.display = 'block';
+
         Artplayer.instances.forEach(function(art) {
             art.destroy(true);
         });
 
-        var option = {
+        new Artplayer({
             container: $artplayer,
             url: thumbnail.videoUrl,
-        };
-
-        if (thumbnail.thumbnailUrl) {
-            option.thumbnails = {
+            thumbnails: {
                 url: thumbnail.thumbnailUrl,
-            };
-        }
-
-        var art = new Artplayer(option);
-
-        art.on('firstCanplay', function() {
-            var $video = art.template.$video;
-            $aspectRatio.textContent = $video.videoWidth + ' x ' + $video.videoHeight;
-            $duration.textContent = $video.duration + 's';
-            thumbnail.mergeOption({
-                videoElement: $video,
-            });
-
-            if (!thumbnail.thumbnailUrl) {
-                thumbnail.getThumbnailUrl();
-            }
+                number: thumbnail.option.number,
+                width: thumbnail.option.width,
+                height: thumbnail.option.height,
+                column: thumbnail.option.column,
+            },
         });
-    }
+        console.log('Build player complete');
+    });
 })();

docs/thumbnail/js/consola.js

@@ -0,0 +1 @@
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var n=t();for(var o in n)("object"==typeof exports?exports:e)[o]=n[o]}}(window,function(){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},r=c(n(1));n(2);var i=c(n(4));function c(e){return e&&e.__esModule?e:{default:e}}var l={},u={target:"body",position:"bottom",size:"300px",zIndex:99},a=["log","warn","error","info","debug"],s=void 0,f=void 0,d=void 0;l.creat=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(e=o({},u,e),!document.querySelector(".consola-container"))return s=document.querySelector(e.target),i.default.insertHtml(s,"beforeend",'<div class="consola-container '+e.position+'" style="z-index: '+e.zIndex+"; "+("bottom"===e.position?"height":"width")+": "+e.size+'">\n      <div class="consola-tools">\n        <div class="consola-count">Console <span>0</span></div>\n        <div class="consola-clean">Clean</div>\n      </div>\n      <div class="consola-wrap"></div>\n    </div>'),f=s.querySelector(".consola-wrap"),d=s.querySelector(".consola-count span"),s.querySelector(".consola-clean").addEventListener("click",l.clean),function(e,t,n){var o=function(t){var o=e[t];e[t]=function(){o.apply(this,arguments),n(t,[].concat(Array.prototype.slice.call(arguments)))}},r=!0,i=!1,c=void 0;try{for(var l,u=t[Symbol.iterator]();!(r=(l=u.next()).done);r=!0){o(l.value)}}catch(e){i=!0,c=e}finally{try{!r&&u.return&&u.return()}finally{if(i)throw c}}}(window.console,a,function(e,t){i.default.insertHtml(f,"beforeend",'<div data-method="'+e+'" class="method method-'+e+'">\n        <div class="method-icon"></div>\n        <div class="method-text">'+function(e){var t=document.createElement("div");e=e.map(function(e){return(0,r.default)(e)}),t.textContent=e;var n=t.innerHTML;return t=null,n}(t)+"</div>\n      </div>"),d.innerHTML=f.children.length,f.scrollTo(0,f.scrollHeight)}),l},l.clean=function(){return f.innerHTML="",d.innerHTML="0",l},window.consola=l,e.exports=l},function(e,t){e.exports=function e(t){switch(typeof t){case"undefined":return"undefined";case"object":let n=Object.prototype.toString.call(t).slice(8,-1).toLowerCase();switch(n){case"null":return"null";case"array":return"["+t.map(t=>e(t)).join(", ")+"]";case"object":return"{ "+Object.keys(t).map(n=>n+": "+e(t[n])).join(", ")+" }";default:try{return t.toString()}catch(e){return"[Unknown type: "+n+"]"}}default:return t.toString()}}},function(e,t,n){},,function(e,t,n){"use strict";function o(e){for(var t=e.length,n=[],o=0;o<t;o+=1)n.push(e[o]);return n}e.exports={select:function(e){return document.querySelector(e)},selectAll:function(e){return o((arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelectorAll(e))},find:function(e,t){return o(e.querySelectorAll(t))},removeClass:function(e,t){e.classList.remove(t)},addClass:function(e,t){e.classList.add(t)},hasClass:function(e,t){return e.classList.contains(t)},removeElement:function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},closest:function(e,t){for(var n=e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector;e&&!n.call(e,t);)e=e.parentElement;return e},getStyle:function(e,t,n){var o=window.getComputedStyle(e,null).getPropertyValue(t);return n?Number.parseFloat(o,10):o},blur:function(){document.activeElement&&document.activeElement.blur()},insertHtml:function(e,t,n){var o=["beforebegin","afterbegin","beforeend","afterend"];if(!o.includes(t))throw new TypeError("'position' must be one of them: "+o.join("、"));e.insertAdjacentHTML(t,n)},setAttributes:function(e,t){Object.keys(t).forEach(function(n){!1!==t[n]?e.setAttribute(n,t[n]):e.removeAttribute(n)})},setStyles:function(e,t){Object.keys(t).forEach(function(n){e.style[n]=t[n]})}}}])});