Git Product home page Git Product logo

exifframe's Introduction

ExifFrame

概要

ExifFrameは,画像に白枠フレームを追加し,Exif情報をフレーム内に表示するウェブアプリケーションです.ユーザーは,アップロードした画像を加工した上で,その結果をダウンロードすることができます.また,自動で取得・表示されたExif情報を後らか手動で編集することも可能です.

サンプル

機能

  • 画像に白枠フレームの追加
  • 画像のExif情報を自動取得とフレーム内に表示
  • 加工後の画像のダウンロード
  • Exif情報の手動編集

使用方法

  1. ExifFrameにアクセスします
  2. アップロードボタンをクリックして,加工したい画像を選択します
  3. 画像がアップロードされると,自動的に白枠フレームが追加され,Exif情報がフレーム内に表示されます
  4. Exif情報を編集したい場合は,画面下部の入力欄に新しい情報を入力し,修正ボタンをクリックします
  5. ダウンロードボタンをクリックして,加工後の画像をダウンロードします

開発方法

セットアップ

git clone https://github.com/ry0y4n/ExifFrame.git
cd ExifFrame
npm install

ローカルサーバー立ち上げ

# python 2.X
$ python -m SimpleHTTPServer 8080

# python 3.X
$ python -m http.server 8080

# ruby
$ ruby -run -e httpd . -p 8080

# php
$ php -S localhost:8080

フレーミング後の画像チェック

npm run playwright

必要な環境

  • Webブラウザ(Chrome, Firefox, Safari等)
  • JavaScriptが有効な環境

開発者

Ryosuke Hyakuta

貢献者

Ippei Suzuki  Minagawa Tatsuya

お問い合わせ

質問やフィードバックがある場合は,GitHubのIssueを利用してお知らせいただくか,Twitterにてお問い合わせください.

exifframe's People

Contributors

ry0y4n avatar 1heisuzuki avatar cha84rakanal avatar

Stargazers

donchan922 avatar Jeonghyeon avatar liguoqinjim avatar  avatar Yukinobu Nagayasu avatar Tomoki Akasaka avatar David Kozdra avatar blackbracken avatar TOMIKAWA Sotaro avatar  avatar Ryo YAMADA avatar naruya avatar

Watchers

 avatar

exifframe's Issues

マイセット登録機能

Exif情報が取れないレンズなどを常用する際に,毎回手打ちするのは勝手が悪いので,マイセット登録しておいてワンタッチで適用(入力欄に反映)するようにしたい

ダウンロードリンクが溜まっていってしまうバグ

Please provide us with the following information:

This issue is a: (mark with an x)

  • bug report -> please search issues before submitting
  • documentation issue or request
  • regression (a behavior that used to work and stopped in a new release)

Issue description

A clear and concise description of the observed issue.

Steps to reproduce

  1. ..
  2. ..

Expected behavior [What you expected to happen.]

Actual behavior [What actually happened.]

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context

Ex. Ex. Your environment (OS and browser, and their versions)

Accessibility issues

All of these changes are intended to expand the audience of the application and its usability

will help browsers from other languages know they need to translate them

.button:hover {
background: #444;
cursor: pointer;
}
will help make it clear to everyone this is a clickable object

alt tags are tricky cause the user adds this but letting them set their own description of the image would be a nice future function

I made a fork and will do this soon

ドラッグ&ドロップでアップロードしたい

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is

Describe the solution you'd like.
A clear and concise description of what you want to happen, any scenarios it will unblock, etc.

Describe alternatives you've considered.
A clear and concise description of any alternative solutions or features you've considered.

Additional context.
Add any other context or screenshots about the feature request here.

Exif情報の取捨選択機能

案1

現状の修正フォームの横にチェックボックス(or トグル)をつけて「ON」の項目を表示
image

ただ,表示の順序を指定する方法はどうする?
→「行」をドラッグ&ドロップで上下できるようにしておいてそれで順序を決める

表示テキストの1行目と2行目はどうやって決める?
→ 入力欄に1行目用の入力欄と2行目用の入力欄を用意して区別がつくようにする(二つの入力欄はドラッグ&ドロップで往来できるようにしないといけない)

案2

ドラッグ&ドロップで2行分配置するようなUIを作る

ただ,修正したい項目や取得できなくて空白の項目はどうする?入力するタイミングは?
→ 「新しい項目を追加」→「文字入力」→「ドラッグ&ドロップ」みたいなものが出来るようにする

Footer

  • copyright
  • 注記
  • FAQ
  • などなど

写真によってMakeやModelの前後に余計な空白が入ってしまうバグ

Please provide us with the following information:

This issue is a: (mark with an x)

  • bug report -> please search issues before submitting
  • documentation issue or request
  • regression (a behavior that used to work and stopped in a new release)

Issue description

A clear and concise description of the observed issue.

Steps to reproduce

  1. ..
  2. ..

Expected behavior [What you expected to happen.]

Actual behavior [What actually happened.]

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context

Ex. Ex. Your environment (OS and browser, and their versions)

README

きちんと書こう

Feature Request: Support EN version

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is

Describe the solution you'd like.
A clear and concise description of what you want to happen, any scenarios it will unblock, etc.

Describe alternatives you've considered.
A clear and concise description of any alternative solutions or features you've considered.

Additional context.
Add any other context or screenshots about the feature request here.

Feature Request: re-architect

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is

Describe the solution you'd like.
A clear and concise description of what you want to happen, any scenarios it will unblock, etc.

Describe alternatives you've considered.
A clear and concise description of any alternative solutions or features you've considered.

Additional context.
Add any other context or screenshots about the feature request here.

exif情報が取れないところは空欄にする

  • undefinedや'NaN`ではなく空欄にする
  • 空欄の場合,単位も残らないように消す

ラボメン < exifになかったらパラメータわからないから空欄で良いやってときに毎回消すのだるい

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.