mirrors/mue
1
0
Fork 0
mirror of https://github.com/mue/mue.git synced 2026-07-23 16:57:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: download image button (wip)

Browse Source
This commit is contained in:
David Ralph
2021-04-07 10:57:28 +01:00
parent 670f897a80
commit ee9e5d2a90
6 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/widgets/background/PhotoInformation.jsx
View File

@@ -6,6 +6,22 @@ import Camera from '@material-ui/icons/PhotoCamera';
import Resolution from '@material-ui/icons/Crop';
import Photographer from '@material-ui/icons/Person';
const toDataURL = async (url) => {
const response = await fetch(url);
const blob = await response.blob();
return URL.createObjectURL(blob);
}
const downloadImage = async (info) => {
const link = document.createElement('a');
link.href = await toDataURL(info.url);
// todo: make this a bit cleaner
link.download = `mue-${info.credit.toLowerCase().replaceAll(' ', '-')}-${info.location.toLowerCase().replaceAll(',', '').replaceAll(' ', '-')}.jpg`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
export default function PhotoInformation(props) {
const language = window.language.widgets.background;
@@ -28,7 +44,8 @@ export default function PhotoInformation(props) {
<Resolution/>
<span>{props.info.resolution}</span>
<Photographer/>
<span>{props.info.credit.split(' on Unsplash')[0]}</span>
<span>{props.info.credit.split(` ${language.unsplash}`)[0]}</span>
<button className='download' onClick={() => downloadImage(props.info)}>{language.download}</button>
</div>
</div>
);