natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

透過画像のレンダリングを改善

This commit is contained in:
syuilo 2018-05-18 15:31:28 +09:00
parent dad8fff12d
commit 1075e3a005
9 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/app/common/views/components/avatar.vue
View File

@ -23,7 +23,7 @@ export default Vue.extend({
computed: { computed: {
style(): any { style(): any {
return { return {
backgroundColor: this.user.avatarColor ? `rgb(${ this.user.avatarColor.join(',') })` : null, backgroundColor: this.user.avatarColor && this.user.avatarColor.length == 3 ? `rgb(${ this.user.avatarColor.join(',') })` : null,
backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`, backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`,
borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null
}; };

4
src/client/app/desktop/views/components/drive.file.vue
View File

@ -50,7 +50,7 @@ export default Vue.extend({
return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.datasize)}`; return `${this.file.name}\n${this.file.type} ${Vue.filter('bytes')(this.file.datasize)}`;
}, },
background(): string { background(): string {
return this.file.properties.avgColor return this.file.properties.avgColor && this.file.properties.avgColor.length == 3
? `rgb(${this.file.properties.avgColor.join(',')})` ? `rgb(${this.file.properties.avgColor.join(',')})`
: 'transparent'; : 'transparent';
} }
@ -129,7 +129,7 @@ export default Vue.extend({
}, },
onThumbnailLoaded() { onThumbnailLoaded() {
if (this.file.properties.avgColor) { if (this.file.properties.avgColor && this.file.properties.avgColor.length == 3) {
anime({ anime({
targets: this.$refs.thumbnail, targets: this.$refs.thumbnail,
backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`, backgroundColor: `rgba(${this.file.properties.avgColor.join(',')}, 0)`,

2
src/client/app/desktop/views/components/media-image.vue
View File

@ -26,7 +26,7 @@ export default Vue.extend({
computed: { computed: {
style(): any { style(): any {
return { return {
'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', 'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)` 'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
}; };
} }

2
src/client/app/desktop/views/pages/user/user.header.vue
View File

@ -29,7 +29,7 @@ export default Vue.extend({
style(): any { style(): any {
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
return { return {
backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null, backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
backgroundImage: `url(${ this.user.bannerUrl })` backgroundImage: `url(${ this.user.bannerUrl })`
}; };
} }

2
src/client/app/mobile/views/components/drive.file-detail.vue
View File

@ -86,7 +86,7 @@ export default Vue.extend({
return this.file.type.split('/')[0]; return this.file.type.split('/')[0];
}, },
style(): any { style(): any {
return this.file.properties.avgColor ? { return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? {
'background-color': `rgb(${ this.file.properties.avgColor.join(',') })` 'background-color': `rgb(${ this.file.properties.avgColor.join(',') })`
} : {}; } : {};
} }

2
src/client/app/mobile/views/components/drive.file.vue
View File

@ -42,7 +42,7 @@ export default Vue.extend({
}, },
thumbnail(): any { thumbnail(): any {
return { return {
'background-color': this.file.properties.avgColor ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent', 'background-color': this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? `rgb(${this.file.properties.avgColor.join(',')})` : 'transparent',
'background-image': `url(${this.file.url}?thumbnail&size=128)` 'background-image': `url(${this.file.url}?thumbnail&size=128)`
}; };
} }

2
src/client/app/mobile/views/components/media-image.vue
View File

@ -18,7 +18,7 @@ export default Vue.extend({
computed: { computed: {
style(): any { style(): any {
return { return {
'background-color': this.image.properties.avgColor ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent', 'background-color': this.image.properties.avgColor && this.image.properties.avgColor.length == 3 ? `rgb(${this.image.properties.avgColor.join(',')})` : 'transparent',
'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)` 'background-image': this.raw ? `url(${this.image.url})` : `url(${this.image.url}?thumbnail&size=512)`
}; };
} }

2
src/client/app/mobile/views/pages/user.vue
View File

@ -84,7 +84,7 @@ export default Vue.extend({
style(): any { style(): any {
if (this.user.bannerUrl == null) return {}; if (this.user.bannerUrl == null) return {};
return { return {
backgroundColor: this.user.bannerColor ? `rgb(${ this.user.bannerColor.join(',') })` : null, backgroundColor: this.user.bannerColor && this.user.bannerColor.length == 3 ? `rgb(${ this.user.bannerColor.join(',') })` : null,
backgroundImage: `url(${ this.user.bannerUrl })` backgroundImage: `url(${ this.user.bannerUrl })`
}; };
} }

5
src/services/drive/add-file.ts
View File

@ -171,6 +171,9 @@ const addFile = async (
log('calculate average color...'); log('calculate average color...');
const info = await prominence(gm(fs.createReadStream(path), name)).identify();
const isTransparent = info ? info['Channel depth'].Alpha != null : false;
const buffer = await prominence(gm(fs.createReadStream(path), name) const buffer = await prominence(gm(fs.createReadStream(path), name)
.setFormat('ppm') .setFormat('ppm')
.resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック .resize(1, 1)) // 1pxのサイズに縮小して平均色を取得するというハック
@ -182,7 +185,7 @@ const addFile = async (
log(`average color is calculated: ${r}, ${g}, ${b}`); log(`average color is calculated: ${r}, ${g}, ${b}`);
return [r, g, b]; return isTransparent ? [r, g, b, 255] : [r, g, b];
})(), })(),
// folder // folder
(async () => { (async () => {