mirror
/
pixelfed
mirror of https://github.com/pixelfed/pixelfed.git
1
0
Fork 1
Code Issues Releases Wiki Activity

Merge pull request #2461 from pixelfed/staging 

Add federated photo filters
This commit is contained in:
daniel 2020-11-28 14:20:36 -07:00 committed by GitHub
parent c6f69b99d6 37c1f34e9d
commit 5d7152a937
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 85 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -18,6 +18,7 @@
- New Discover Layout, add trending hashtags, places and posts ([c251d41b](https://github.com/pixelfed/pixelfed/commit/c251d41b))
- Add Password change email notification ([de1cca4f](https://github.com/pixelfed/pixelfed/commit/de1cca4f))
- Add shared inbox ([4733ca9f](https://github.com/pixelfed/pixelfed/commit/4733ca9f))
- Add federated photo filters ([0a5a0e86](https://github.com/pixelfed/pixelfed/commit/0a5a0e86))
### Updated
- Updated PostComponent, fix remote urls ([42716ccc](https://github.com/pixelfed/pixelfed/commit/42716ccc))

3
app/Http/Controllers/MediaController.php
View File

@ -41,6 +41,9 @@ class MediaController extends Controller
->whereNull('status_id')
->findOrFail($id);
$media->version = 2;
$media->save();
$fragments = explode('/', $media->media_path);
$name = last($fragments);
array_pop($fragments);

2
app/Transformer/Api/MediaTransformer.php
View File

@ -22,7 +22,7 @@ class MediaTransformer extends Fractal\TransformerAbstract
'is_nsfw' => $media->is_nsfw,
'orientation' => $media->orientation,
'filter_name' => $media->filter_name,
'filter_class' => $media->filter_class,
'filter_class' => $media->version == 1 ? $media->filter_class : null,
'mime' => $media->mime,
];
}

2
public/js/app.js vendored
View File

File diff suppressed because one or more lines are too long

2
public/js/compose.js vendored
View File

File diff suppressed because one or more lines are too long

4
public/mix-manifest.json
View File

@ -3,7 +3,7 @@
"/js/vendor.js": "/js/vendor.js?id=d6ba75064c2942474259",
"/js/ace.js": "/js/ace.js?id=11e5550a450fece75c33",
"/js/activity.js": "/js/activity.js?id=838e242ddbe91e559f00",
"/js/app.js": "/js/app.js?id=d1274e1bbd0cccd6089f",
"/js/app.js": "/js/app.js?id=049fdddbb594117f646e",
"/css/app.css": "/css/app.css?id=77729cabd5c8a0ad09b8",
"/css/appdark.css": "/css/appdark.css?id=995ec87dd4aff426cd1c",
"/css/landing.css": "/css/landing.css?id=3092e86721fa8b922c06",
@ -11,7 +11,7 @@
"/js/collectioncompose.js": "/js/collectioncompose.js?id=3fd79944492361ec7347",
"/js/collections.js": "/js/collections.js?id=38be4150f3d2ebb15f50",
"/js/components.js": "/js/components.js?id=88296701f1382d285031",
"/js/compose.js": "/js/compose.js?id=bd3e195dc7cf1ed0cd33",
"/js/compose.js": "/js/compose.js?id=661030734f9228389822",
"/js/compose-classic.js": "/js/compose-classic.js?id=283f19c895f4118a2a8b",
"/js/developers.js": "/js/developers.js?id=f75deca5ccf47d43eb07",
"/js/direct.js": "/js/direct.js?id=6a80114ecc453b2b994a",

43
resources/assets/js/app.js vendored
View File

@ -139,6 +139,49 @@ window.App.util = {
['Willow','filter-willow'],
['X-Pro II','filter-xpro-ii']
],
filterCss: {
'filter-1977': 'sepia(.5) hue-rotate(-30deg) saturate(1.4)',
'filter-aden': 'sepia(.2) brightness(1.15) saturate(1.4)',
'filter-amaro': 'sepia(.35) contrast(1.1) brightness(1.2) saturate(1.3)',
'filter-ashby': 'sepia(.5) contrast(1.2) saturate(1.8)',
'filter-brannan': 'sepia(.4) contrast(1.25) brightness(1.1) saturate(.9) hue-rotate(-2deg)',
'filter-brooklyn': 'sepia(.25) contrast(1.25) brightness(1.25) hue-rotate(5deg)',
'filter-charmes': 'sepia(.25) contrast(1.25) brightness(1.25) saturate(1.35) hue-rotate(-5deg)',
'filter-clarendon': 'sepia(.15) contrast(1.25) brightness(1.25) hue-rotate(5deg)',
'filter-crema': 'sepia(.5) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-2deg)',
'filter-dogpatch': 'sepia(.35) saturate(1.1) contrast(1.5)',
'filter-earlybird': 'sepia(.25) contrast(1.25) brightness(1.15) saturate(.9) hue-rotate(-5deg)',
'filter-gingham': 'contrast(1.1) brightness(1.1)',
'filter-ginza': 'sepia(.25) contrast(1.15) brightness(1.2) saturate(1.35) hue-rotate(-5deg)',
'filter-hefe': 'sepia(.4) contrast(1.5) brightness(1.2) saturate(1.4) hue-rotate(-10deg)',
'filter-helena': 'sepia(.5) contrast(1.05) brightness(1.05) saturate(1.35)',
'filter-hudson': 'sepia(.25) contrast(1.2) brightness(1.2) saturate(1.05) hue-rotate(-15deg)',
'filter-inkwell': 'brightness(1.25) contrast(.85) grayscale(1)',
'filter-kelvin': 'sepia(.15) contrast(1.5) brightness(1.1) hue-rotate(-10deg)',
'filter-juno': 'sepia(.35) contrast(1.15) brightness(1.15) saturate(1.8)',
'filter-lark': 'sepia(.25) contrast(1.2) brightness(1.3) saturate(1.25)',
'filter-lofi': 'saturate(1.1) contrast(1.5)',
'filter-ludwig': 'sepia(.25) contrast(1.05) brightness(1.05) saturate(2)',
'filter-maven': 'sepia(.35) contrast(1.05) brightness(1.05) saturate(1.75)',
'filter-mayfair': 'contrast(1.1) brightness(1.15) saturate(1.1)',
'filter-moon': 'brightness(1.4) contrast(.95) saturate(0) sepia(.35)',
'filter-nashville': 'sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg)',
'filter-perpetua': 'contrast(1.1) brightness(1.25) saturate(1.1)',
'filter-poprocket': 'sepia(.15) brightness(1.2)',
'filter-reyes': 'sepia(.75) contrast(.75) brightness(1.25) saturate(1.4)',
'filter-rise': 'sepia(.25) contrast(1.25) brightness(1.2) saturate(.9)',
'filter-sierra': 'sepia(.25) contrast(1.5) brightness(.9) hue-rotate(-15deg)',
'filter-skyline': 'sepia(.15) contrast(1.25) brightness(1.25) saturate(1.2)',
'filter-slumber': 'sepia(.35) contrast(1.25) saturate(1.25)',
'filter-stinson': 'sepia(.35) contrast(1.25) brightness(1.1) saturate(1.25)',
'filter-sutro': 'sepia(.4) contrast(1.2) brightness(.9) saturate(1.4) hue-rotate(-10deg)',
'filter-toaster': 'sepia(.25) contrast(1.5) brightness(.95) hue-rotate(-15deg)',
'filter-valencia': 'sepia(.25) contrast(1.1) brightness(1.1)',
'filter-vesper': 'sepia(.35) contrast(1.15) brightness(1.2) saturate(1.3)',
'filter-walden': 'sepia(.35) contrast(.8) brightness(1.25) saturate(1.4)',
'filter-willow': 'brightness(1.2) contrast(.85) saturate(.05) sepia(.2)',
'filter-xpro-ii': 'sepia(.45) contrast(1.25) brightness(1.75) saturate(1.3) hue-rotate(-5deg)'
},
emoji: ['😂','💯','❤️','🙌','👏','👌','😍','😯','😢','😅','😁','🙂','😎','😀','🤣','😃','😄','😆','😉','😊','😋','😘','😗','😙','😚','🤗','🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣','😥','😮','🤐','😪','😫','😴','😌','😛','😜','😝','🤤','😒','😓','😔','😕','🙃','🤑','😲','🙁','😖','😞','😟','😤','😭','😦','😧','😨','😩','🤯','😬','😰','😱','😳','🤪','😵','😡','😠','🤬','😷','🤒','🤕','🤢','🤮','🤧','😇','🤠','🤡','🤥','🤫','🤭','🧐','🤓','😈','👿','👹','👺','💀','👻','👽','🤖','💩','😺','😸','😹','😻','😼','😽','🙀','😿','😾','🤲','👐','🤝','👍','👎','👊','✊','🤛','🤜','🤞','✌️','🤟','🤘','👈','👉','👆','👇','☝️','✋','🤚','🖐','🖖','👋','🤙','💪','🖕','✍️','🙏','💍','💄','💋','👄','👅','👂','👃','👣','👁','👀','🧠','🗣','👤','👥'
],
embed: {

33
resources/assets/js/components/ComposeModal.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<input type="file" id="pf-dz" name="media" class="w-100 h-100 d-none file-input" v-bind:accept="config.uploader.media_types">
<canvas class="d-none" id="pr_canvas"></canvas>
<img class="d-none" id="pr_img">
<div class="timeline">
<div v-if="uploading">
<div class="card status-card card-md-rounded-0 w-100 h-100 bg-light py-3" style="border-bottom: 1px solid #f1f1f1">
@ -983,9 +985,40 @@ export default {
this.cameraRollMedia = res.data;
});
},
applyFilterToMedia() {
// this is where the magic happens
let medias = this.media;
let media = null;
const canvas = document.getElementById('pr_canvas');
const ctx = canvas.getContext('2d');
let image = document.getElementById('pr_img');
let blob = null;
let data = null;
for (var i = medias.length - 1; i >= 0; i--) {
media = medias[i];
if(media.filter_class) {
image.src = media.url;
image.addEventListener('load', e => {
canvas.width = image.width;
canvas.height = image.height;
ctx.filter = App.util.filterCss[media.filter_class];
ctx.drawImage(image, 0, 0, image.width, image.height);
ctx.save();
canvas.toBlob(function(blob) {
data = new FormData();
data.append('file', blob);
axios.post('/api/local/compose/media/update/'+media.id, data).then(res => {
}).catch(err => {
});
}, media.mime, 0.9);
});
ctx.clearRect(0, 0, image.width, image.height);
}
}
},
tagSearch(input) {