x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-11 05:26:15 -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="item">
<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 class="item">
<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 class="item">
<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 class="item">
<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 class="item">
<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 class="btns">
docs/thumbnail/js/common.js
+2 -1
View File
@@ -66,9 +66,10 @@
thumbnail.on('canvas', function(canvas) {
console.log('Build canvas successfully');
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) + '%');
$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) {
_this2.errorHandle(typeof _this2.option[item] === 'number', "The '".concat(item, "' is not a number"));
});
this.option.delay = clamp(delay, 100, 1000);
this.option.number = clamp(number, 10, 100);
this.option.width = clamp(width, 100, 500);
this.option.height = clamp(height, 100, 500);
this.option.column = clamp(column, 10, 100);
this.option.delay = clamp(delay, 10, 1000);
this.option.number = clamp(number, 10, 1000);
this.option.width = clamp(width, 10, 1000);
this.option.height = clamp(height, 10, 1000);
this.option.column = clamp(column, 1, 1000);
return this;
}
}, {
@@ -269,6 +269,8 @@
this.video.src = videoUrl;
sleep(delay).then(function () {
_this3.emit('video', _this3.video);
}).catch(function (err) {
console.error(err);
});
}
}
@@ -277,13 +279,15 @@
value: function start() {
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,
width = _this$option2.width,
height = _this$option2.height,
number = _this$option2.number,
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 canvas = this.creatCanvas();
var context2D = canvas.getContext('2d');
@@ -296,18 +300,24 @@
canvas.toBlob(function (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;
runPromisesInSeries(promiseList).then(function () {
sleep(delay).then(function () {
sleep(delay * 2).then(function () {
_this4.processing = false;
_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.font = '14px Georgia';
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;
}
}, {
key: "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...');
var elink = document.createElement('a');
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.option.delay = clamp(delay, 100, 1000);
this.option.number = clamp(number, 10, 100);
this.option.width = clamp(width, 100, 500);
this.option.height = clamp(height, 100, 500);
this.option.column = clamp(column, 10, 100);
this.option.delay = clamp(delay, 10, 1000);
this.option.number = clamp(number, 10, 1000);
this.option.width = clamp(width, 10, 1000);
this.option.height = clamp(height, 10, 1000);
this.option.column = clamp(column, 1, 1000);
return this;
}
@@ -68,37 +68,55 @@ class ArtplayerToolThumbnail extends Emitter {
this.file = file;
this.emit('file', this.file);
this.video.src = videoUrl;
sleep(delay).then(() => {
this.emit('video', this.video);
});
sleep(delay)
.then(() => {
this.emit('video', this.video);
})
.catch(err => {
console.error(err);
});
}
}
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.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 canvas = this.creatCanvas();
const context2D = canvas.getContext('2d');
this.emit('canvas', canvas);
const promiseList = screenshotDate.map((item, index) => () => {
this.video.currentTime = item.time;
return sleep(delay).then(() => {
context2D.drawImage(this.video, item.x, item.y, width, height);
canvas.toBlob(blob => {
this.thumbnailUrl = URL.createObjectURL(blob);
this.emit('update', (index + 1) / number, this.thumbnailUrl);
return sleep(delay)
.then(() => {
context2D.drawImage(this.video, item.x, item.y, width, height);
canvas.toBlob(blob => {
this.thumbnailUrl = URL.createObjectURL(blob);
this.emit('update', this.thumbnailUrl, (index + 1) / number);
});
})
.catch(err => {
console.error(err);
});
});
});
this.processing = true;
runPromisesInSeries(promiseList).then(() => {
sleep(delay).then(() => {
this.processing = false;
this.emit('done');
runPromisesInSeries(promiseList)
.then(() => {
sleep(delay * 2)
.then(() => {
this.processing = false;
this.emit('done');
})
.catch(err => {
console.error(err);
});
})
.catch(err => {
console.error(err);
});
});
}
creatScreenshotDate() {
@@ -130,13 +148,16 @@ class ArtplayerToolThumbnail extends Emitter {
context2D.fillText(
`From: https://artplayer.org/thumbnail, Number: ${number}, Width: ${width}, Height: ${height}, Column: ${column}`,
10,
canvas.height - 12,
canvas.height - 11,
);
return canvas;
}
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...');
const elink = document.createElement('a');
const name = `${getFileName(this.file.name)}.png`;