x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-27 17:51:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

添加截图密度限制

Browse Source
This commit is contained in:
Harvey Zack committed 2018-12-05 16:03:44 +08:00
1 parent 0e4e3da5ee
commit 6d3e0b4567
4 files changed
+71 -39
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/thumbnail/index.html
+5 -5
View File
@@ -26,23 +26,23 @@
<div class="setup"> <div class="setup">
<div class="item"> <div class="item">
<div class="name">Delay：</div> <div class="name">Delay：</div>
<input class="input delay" type="number" min="100" max="1000" placeholder="100 - 1000" value="300"> <input class="input delay" type="number" min="10" max="1000" placeholder="10 - 1000" value="300">
</div> </div>
<div class="item"> <div class="item">
<div class="name">Number：</div> <div class="name">Number：</div>
<input class="input number" type="number" min="10" max="100" placeholder="10 - 100" value="60"> <input class="input number" type="number" min="10" max="1000" placeholder="10 - 1000" value="60">
</div> </div>
<div class="item"> <div class="item">
<div class="name">Width：</div> <div class="name">Width：</div>
<input class="input width" type="number" min="100" max="500" placeholder="100 - 500" value="160"> <input class="input width" type="number" min="10" max="1000" placeholder="10 - 1000" value="160">
</div> </div>
<div class="item"> <div class="item">
<div class="name">Height：</div> <div class="name">Height：</div>
<input class="input height" type="number" min="100" max="500" placeholder="100 - 500" value="90"> <input class="input height" type="number" min="10" max="1000" placeholder="10 - 1000" value="90">
</div> </div>
<div class="item"> <div class="item">
<div class="name">Column：</div> <div class="name">Column：</div>
<input class="input column" type="number" min="10" max="100" placeholder="10 - 100" value="10"> <input class="input column" type="number" min="1" max="1000" placeholder="1 - 1000" value="10">
</div> </div>
</div> </div>
<div class="btns"> <div class="btns">
docs/thumbnail/js/common.js
+2 -1
View File
@@ -66,9 +66,10 @@
thumbnail.on('canvas', function(canvas) { thumbnail.on('canvas', function(canvas) {
console.log('Build canvas successfully'); console.log('Build canvas successfully');
console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height); console.log('Canvas size: ' + canvas.width + ' x ' + canvas.height);
console.log('Preview density: ' + thumbnail.density + ' p/s');
}); });
thumbnail.on('update', function(percentage, url) { thumbnail.on('update', function(url, percentage) {
console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%'); console.log('Processing: ' + Math.floor(percentage.toFixed(2) * 100) + '%');
$preview.style.backgroundImage = 'url(' + url + ')'; $preview.style.backgroundImage = 'url(' + url + ')';
}); });
docs/uncompiled/artplayer-tool-thumbnail.js
+21 -11
View File
@@ -244,11 +244,11 @@
['delay', 'number', 'width', 'height', 'column'].forEach(function (item) { ['delay', 'number', 'width', 'height', 'column'].forEach(function (item) {
_this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number")); _this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number"));
}); });
this.option.delay = clamp(delay, 100, 1000); this.option.delay = clamp(delay, 10, 1000);
this.option.number = clamp(number, 10, 100); this.option.number = clamp(number, 10, 1000);
this.option.width = clamp(width, 100, 500); this.option.width = clamp(width, 10, 1000);
this.option.height = clamp(height, 100, 500); this.option.height = clamp(height, 10, 1000);
this.option.column = clamp(column, 10, 100); this.option.column = clamp(column, 1, 1000);
return this; return this;
} }
}, { }, {
@@ -269,6 +269,8 @@
this.video.src = videoUrl; this.video.src = videoUrl;
sleep(delay).then(function () { sleep(delay).then(function () {
_this3.emit('video', _this3.video); _this3.emit('video', _this3.video);
}).catch(function (err) {
console.error(err);
}); });
} }
} }
@@ -277,13 +279,15 @@
value: function start() { value: function start() {
var _this4 = this; var _this4 = this;
this.errorHandle(this.file && this.video, 'Please select the video file first');
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
var _this$option2 = this.option, var _this$option2 = this.option,
width = _this$option2.width, width = _this$option2.width,
height = _this$option2.height, height = _this$option2.height,
number = _this$option2.number, number = _this$option2.number,
delay = _this$option2.delay; delay = _this$option2.delay;
this.density = number / this.video.duration;
this.errorHandle(this.file && this.video, 'Please select the video file first');
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
this.errorHandle(this.density <= 1, "The preview density cannot be greater than 1, but got ".concat(this.density));
var screenshotDate = this.creatScreenshotDate(); var screenshotDate = this.creatScreenshotDate();
var canvas = this.creatCanvas(); var canvas = this.creatCanvas();
var context2D = canvas.getContext('2d'); var context2D = canvas.getContext('2d');
@@ -296,18 +300,24 @@
canvas.toBlob(function (blob) { canvas.toBlob(function (blob) {
_this4.thumbnailUrl = URL.createObjectURL(blob); _this4.thumbnailUrl = URL.createObjectURL(blob);
_this4.emit('update', (index + 1) / number, _this4.thumbnailUrl); _this4.emit('update', _this4.thumbnailUrl, (index + 1) / number);
}); });
}).catch(function (err) {
console.error(err);
}); });
}; };
}); });
this.processing = true; this.processing = true;
runPromisesInSeries(promiseList).then(function () { runPromisesInSeries(promiseList).then(function () {
sleep(delay).then(function () { sleep(delay * 2).then(function () {
_this4.processing = false; _this4.processing = false;
_this4.emit('done'); _this4.emit('done');
}).catch(function (err) {
console.error(err);
}); });
}).catch(function (err) {
console.error(err);
}); });
} }
}, { }, {
@@ -351,13 +361,13 @@
context2D.fillRect(0, 0, canvas.width, canvas.height); context2D.fillRect(0, 0, canvas.width, canvas.height);
context2D.font = '14px Georgia'; context2D.font = '14px Georgia';
context2D.fillStyle = '#fff'; context2D.fillStyle = '#fff';
context2D.fillText("From: https://artplayer.org/thumbnail, Number: ".concat(number, ", Width: ").concat(width, ", Height: ").concat(height, ", Column: ").concat(column), 10, canvas.height - 12); context2D.fillText("From: https://artplayer.org/thumbnail, Number: ".concat(number, ", Width: ").concat(width, ", Height: ").concat(height, ", Column: ").concat(column), 10, canvas.height - 11);
return canvas; return canvas;
} }
}, { }, {
key: "download", key: "download",
value: function download() { value: function download() {
this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready'); this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready, please create preview first');
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...'); this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
var elink = document.createElement('a'); var elink = document.createElement('a');
var name = "".concat(getFileName(this.file.name), ".png"); var name = "".concat(getFileName(this.file.name), ".png");
packages/artplayer-tool-thumbnail/src/index.js
+43 -22
View File
@@ -35,11 +35,11 @@ class ArtplayerToolThumbnail extends Emitter {
this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`); this.errorHandle(typeof this.option[item] === 'number', `The '${item}' is not a number`);
}); });
this.option.delay = clamp(delay, 100, 1000); this.option.delay = clamp(delay, 10, 1000);
this.option.number = clamp(number, 10, 100); this.option.number = clamp(number, 10, 1000);
this.option.width = clamp(width, 100, 500); this.option.width = clamp(width, 10, 1000);
this.option.height = clamp(height, 100, 500); this.option.height = clamp(height, 10, 1000);
this.option.column = clamp(column, 10, 100); this.option.column = clamp(column, 1, 1000);
return this; return this;
} }
@@ -68,37 +68,55 @@ class ArtplayerToolThumbnail extends Emitter {
this.file = file; this.file = file;
this.emit('file', this.file); this.emit('file', this.file);
this.video.src = videoUrl; this.video.src = videoUrl;
sleep(delay).then(() => { sleep(delay)
this.emit('video', this.video); .then(() => {
}); this.emit('video', this.video);
})
.catch(err => {
console.error(err);
});
} }
} }
start() { start() {
const { width, height, number, delay } = this.option;
this.density = number / this.video.duration;
this.errorHandle(this.file && this.video, 'Please select the video file first'); this.errorHandle(this.file && this.video, 'Please select the video file first');
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...'); this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
const { width, height, number, delay } = this.option; this.errorHandle(this.density <= 1, `The preview density cannot be greater than 1, but got ${this.density}`);
const screenshotDate = this.creatScreenshotDate(); const screenshotDate = this.creatScreenshotDate();
const canvas = this.creatCanvas(); const canvas = this.creatCanvas();
const context2D = canvas.getContext('2d'); const context2D = canvas.getContext('2d');
this.emit('canvas', canvas); this.emit('canvas', canvas);
const promiseList = screenshotDate.map((item, index) => () => { const promiseList = screenshotDate.map((item, index) => () => {
this.video.currentTime = item.time; this.video.currentTime = item.time;
return sleep(delay).then(() => { return sleep(delay)
context2D.drawImage(this.video, item.x, item.y, width, height); .then(() => {
canvas.toBlob(blob => { context2D.drawImage(this.video, item.x, item.y, width, height);
this.thumbnailUrl = URL.createObjectURL(blob); canvas.toBlob(blob => {
this.emit('update', (index + 1) / number, this.thumbnailUrl); this.thumbnailUrl = URL.createObjectURL(blob);
this.emit('update', this.thumbnailUrl, (index + 1) / number);
});
})
.catch(err => {
console.error(err);
}); });
});
}); });
this.processing = true; this.processing = true;
runPromisesInSeries(promiseList).then(() => { runPromisesInSeries(promiseList)
sleep(delay).then(() => { .then(() => {
this.processing = false; sleep(delay * 2)
this.emit('done'); .then(() => {
this.processing = false;
this.emit('done');
})
.catch(err => {
console.error(err);
});
})
.catch(err => {
console.error(err);
}); });
});
} }
creatScreenshotDate() { creatScreenshotDate() {
@@ -130,13 +148,16 @@ class ArtplayerToolThumbnail extends Emitter {
context2D.fillText( context2D.fillText(
`From: https://artplayer.org/thumbnail, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`, `From: https://artplayer.org/thumbnail, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
10, 10,
canvas.height - 12, canvas.height - 11,
); );
return canvas; return canvas;
} }
download() { download() {
this.errorHandle(this.file && this.thumbnailUrl, 'Download does not seem to be ready'); this.errorHandle(
this.file && this.thumbnailUrl,
'Download does not seem to be ready, please create preview first',
);
this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...'); this.errorHandle(!this.processing, 'There is currently a task in progress, please wait a moment...');
const elink = document.createElement('a'); const elink = document.createElement('a');
const name = `${getFileName(this.file.name)}.png`; const name = `${getFileName(this.file.name)}.png`;