Image Annotator - プレビュー画面で画像に注釈を付けられます

こんにちは、皆さん!

チームメイトの @vliboolean1010 と共に、新しく作成した Discourse テーマコンポーネント「Image Annotator」をご紹介できることを大変嬉しく思います。

エディタ内の画像をクリックすると、以下の機能が有効になります。

  • 四角形、図形、矢印、テキストの追加
  • 画像の一部のハイライト表示またはぼかし処理
  • アノテーションの色を選択して変更
  • 保存をクリックすると、アノテーションされた画像が自動的に更新されます
  • Safari、Firefox、Chrome、iOS Safari などのブラウザに対応
  • (画像切り取り機能は現在開発中です)

インストール画面

リポジトリ: GitHub - discourse/discourse-image-annotator: image annotation theme component · GitHub

デモ動画

「いいね!」 46

素晴らしい仕事ですね!S3 にホストされた画像でテストは行われましたか?S3 を有効にすると、クロスオリジンリクエストエラーが発生しています。

「いいね!」 9

どうもありがとうございます。素晴らしいですね。

「いいね!」 7

@davidkingham さん、こんにちは

問題の詳細なご報告をありがとうございます。この問題の解決に取り組んでいる最中ですが、オンラインソースからアップロードする代わりに、ローカルデバイスから画像をアップロードするという代替案もございます。:slight_smile:

「いいね!」 4

Chun さん、ありがとうございます。しかし、それは同じことではありません。私はローカルデバイスからアップロードしていますが、画像は S3 エンドポイントにアップロードされており、問題はその部分で発生しています。

「いいね!」 8

これは、ユーザー名で写真を自動的に透かし入れるために使えるかもしれないと考えていますが、その方法がわかりません。もしかすると、[ユーザー名]@[サイトドメイン] を出力する別のボタンがあるといいかもしれませんね?

「いいね!」 3

写真に落書きできる機能はありますか?

「いいね!」 4

さて、私の問題点をお伝えします。大きな画像(例えば、チュートリアル用のフォーラムのスクリーンショットなど)をアップロードすると、私の最大画像設定に基づいて画像の表示が自動的に制限されてしまいます。これは問題で、大きな画像の場合、不可能なほど小さくリサイズされてしまい、元の大きなバージョンを編集することができません。

つまり、これはワンボックス設定よりも小さい画像にしか役立たない状態に制限されてしまいます。例えば、私たちの設定は 400 x 400 です。

この画像では、同じ 2 つの画像が表示されています。1 つはこのコンポーネントで編集されたものです。コンポーネントによって読み取り不能になっています。

もし、ワンボックス版ではなく、元画像を編集できるように設定していただければ、それは本当に素晴らしいことです。

とはいえ、素晴らしいスタートですね。その有用性は間違いなく感じられます!

「いいね!」 4

投稿を保存した後、注釈を編集することは可能ですか?

「いいね!」 3

IT はそうは見えません。編集が完了すると、画像が再保存されます。

「いいね!」 4

現在、そのような機能はありません。

「いいね!」 4

画像の書き出しエラー

ftOaYJktEr

「いいね!」 2

これを #theme:broken-theme に移動し、pr-welcome タグを追加しました。

適切な推奨テーマコンポーネントとして機能するには、まだ相当な作業とサポートが必要だと感じています。

「いいね!」 6

画像のアノテーションに関するいくつかの問題を修正しました。
PR のリンクは以下の通りです:

「いいね!」 6

素晴らしいです、ナムさん、ありがとう。もうエラーが出なくなり、画像も保存されるようになったので、それは良いですね。

上記の傑作を作成している際に気づいたのですが、このツールを使うと結構な数の小さなイライラする問題があります。何度か注釈が間違った場所に初期化されてしまいました。ツールバーも編集領域も、ページの半分ほど下にずれて表示されてしまうのです。なぜこのようなことが起こるのか、原因を特定していただけませんか?

「いいね!」 6

jQueryを削除するPRのリンクはこちらです:

「いいね!」 7

コンポーネントに「切り抜き」や「回転」のコントロールを追加できるか気になるな。とても役立つ機能になりそうだ。

「いいね!」 9

できるだけ早く確認いたします!

「いいね!」 6

全く急ぎません。このコンポーネントが注目されることをとても楽しみにしています。可能性に満ちています。

「いいね!」 9

@markvanlan と共同作業をしている際、markerjs の新バージョンがあることに気づきました。
ポップアップ内で画像を編集できるようになり、多くの問題が解決します。
現在、PR の作成を進めています。

「いいね!」 9