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

**URL:** https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936
**Category:** Theme component
**Tags:** pr-welcome
**Created:** [2020 年 8 月 24 日午後 7:43 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936 "2020-08-24T19:43:08Z")
**Posts on this page:** 20
**Page:** 2

<div class="post-metadata">

### Author: ![Nam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nam/32/383046_2.png) [@Nam](https://meta.discourse.org/u/Nam)
#### Post date: [2021 年 6 月 14 日午後 8:31 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/28 "2021-06-14T20:31:16Z")

</div>

markerjs2 に更新し、コードを整理しました。  
PR のリンクはこちらです：

> <https://github.com/discourse/discourse-image-annotator/pull/52>
>
> Update to markerjs2 and clean up the unnecessary codes on .js, .css, and .html f…iles.

---

<div class="post-metadata">

### Author: ![markvanlan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/markvanlan/32/160087_2.png) [@markvanlan](https://meta.discourse.org/u/markvanlan)
#### Post date: [2021 年 6 月 15 日午後 1:37 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/29 "2021-06-15T13:37:49Z")

</div>

エディターの改善は素晴らしく、多くのコードが削除されました 👏

残念ながら、編集を保存した後、投稿が表示されなくなりました。マークダウンが完全に正しくないためです。文字列の解析が正しく行われていないようです。

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/3/b34af568a062ce8ea240ba759b68a5d8c1a69fc2.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/d/ed33107a4b5e209859dcff5653324d13e9cbf8c7.png)

上の画像のマークダウンは編集前のファイルです。編集後、コンポーネントがファイル名の ` (1)` に混乱し、それをアップロードパスに含めてしまっていることがわかります（`(1upload` を参照）。テーマに JS テストを追加できるようになったので、ファイル名の解析に関するテストを追加しましょう。

この問題が修正されるまで、Meta 上でテーマコンポーネントを一時的に無効化します。すでに #customization:theme:broken-theme としてマークされているので、新しい問題ではありません 🙂

---

<div class="post-metadata">

### Author: ![Nam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nam/32/383046_2.png) [@Nam](https://meta.discourse.org/u/Nam)
#### Post date: [2021 年 6 月 16 日午後 5:02 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/30 "2021-06-16T17:02:39Z")

</div>

画像 URL の検出時に誤った括弧を拾うバグを修正しました。  
PR のリンクはこちらです：

> <https://github.com/discourse/discourse-image-annotator/pull/53>
>
> Fixed a bug catching wrong parentheses when finding img url

また、画像にカーソルを合わせた際に、注釈を追加するか、切り取り（回転/反転）するかを選択できる機能を追加する予定です。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 6 月 24 日午前 6:18 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/34 "2021-06-24T06:18:21Z")

</div>

Nam さん、こんにちは。

コンポーネントが meta にインストールされ、テストを行いました！

フィードバックをいくつか：

1. エディタを開く方法がわかりません。プレビュー領域に「編集」という単語を浮かべるか、鉛筆のアイコンを表示するなどの指示を入れることをお勧めします。

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/b/fbe797d4fe7e7c58867e62825617d2217840784f.jpeg)

1. コンポーザーと画像の z-index の競合が大きく、画像がコンポーザーの背後に隠れてしまいます。すべてを表示するには、コンポーザーを大幅に縮小する必要があります。

2. 編集対象の画像が非常に大きくなっています。編集中の画像のサイズを維持する方法はありませんか？

---

<div class="post-metadata">

### Author: ![Nam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nam/32/383046_2.png) [@Nam](https://meta.discourse.org/u/Nam)
#### Post date: [2021 年 6 月 24 日午後 7:33 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/35 "2021-06-24T19:33:44Z")

</div>

フィードバックをいただき、誠にありがとうございます！  
フィードバック #1 について対応中です。スタイルは変更しますが、「ANNOTATE」または「CROP」ボタンを押した際は、引き続きリクエストされたツールが開くようにします。

 ![Screen Shot 2021-06-24 at 2.20.41 PM](https://global.discourse-cdn.com/meta/original/3X/4/4/44771fabc8cf43bb9350ec37d99b690cc32978e6.jpeg)

フィードバック #2 については、問題の詳細についてもう少し詳しく教えていただけますか？

#3 については、まもなく着手します。

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 6 月 25 日午前 3:18 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/36 "2021-06-25T03:18:47Z")

</div>

> [@Nam](#):
>
> フィードバック #2 について、問題点を詳しく教えていただけますか？

はい、こちらです：

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/9/c921699ebb8f91c63e998aa9bef702136f2d463e.jpeg)

私の環境では、コンポーザーが画像エディターの上に表示されてしまい、コンポーザーを縮めるまで正常に編集できません。

ここでの素晴らしい作業に心から感謝しています！

---

<div class="post-metadata">

### Author: ![Nam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nam/32/383046_2.png) [@Nam](https://meta.discourse.org/u/Nam)
#### Post date: [2021 年 6 月 28 日午後 3:24 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/37 "2021-06-28T15:24:31Z")

</div>

ご clarification をありがとうございます！  
どのデバイス、ブラウザ、バージョンをお使いか教えていただけますか？  
私の環境では、エディタが画像エディタの上にポップアップして表示されます。私の環境では以下のようになります：

 ![Screen Shot 2021-06-28 at 10.17.44 AM](https://global.discourse-cdn.com/meta/original/3X/0/d/0d5d247922c5ef6cc62ebc54def093c14003348d.jpeg)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2021 年 6 月 29 日午前 2:00 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/38 "2021-06-29T02:00:26Z")

</div>

ああ、ここで何が起こっているのか分かりました。「フォーカスされたサイドバー」テーマでテストしていただけますか？このテーマは Discourse チーム（および Discourse for Teams の一部）でのみ有効になっています。

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/4/f49a70e1410be55285ae7e6e2834fb28dc0b78d1.png)

おそらく、z-index を少しだけ上げる必要があると思います。@markvanlan がここでサポートしてくれています。

---

<div class="post-metadata">

### Author: ![markvanlan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/markvanlan/32/160087_2.png) [@markvanlan](https://meta.discourse.org/u/markvanlan)
#### Post date: [2021 年 7 月 1 日午後 3:42 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/39 "2021-07-01T15:42:34Z")

</div>

@Nam 画像の切り抜き・回転を可能にする素晴らしい変更をマージしてくれました。ローカルアップロードの画像をクリックすると、注釈付けまたは切り抜き・回転を選択できる選択ステージが追加されました。👏

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/4/848d5888938381a576c41e6412187b929efbc599.png)

現在の唯一の問題は、切り抜きモーダルにおける z-index の問題です（注釈付けモーダルの z-index は正常です）。切り抜きモーダルの外側要素に安定した className がないため、cropro ライブラリにそれを追加するための [PR を提出](https://github.com/ailon/cropro/pull/4)しています。

追記：  
リポジトリをフォークして必要な小さな変更を加えました。これで z-index の問題は解消されました。

---

<div class="post-metadata">

### Author: ![Nam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nam/32/383046_2.png) [@Nam](https://meta.discourse.org/u/Nam)
#### Post date: [2021 年 7 月 1 日午後 5:29 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/40 "2021-07-01T17:29:26Z")

</div>

画像の編集時に画像サイズが大きすぎるという問題に対して、解決策はなさそうです。  
これは、MarkerJs と Cropro が画像を編集する際に画像サイズを設定しているためです。

---

<div class="post-metadata">

### Author: ![Bank\_Live](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bank_live/32/75893_2.png) [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [2021 年 8 月 8 日午前 4:30 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/41 "2021-08-08T04:30:46Z")

</div>

問題が発生し、解決できません。

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/6/76a9b3a2aaf7f51cdf5e2c5e7666856fb43c5263.png)

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2021 年 8 月 8 日午後 2:27 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/42 "2021-08-08T14:27:53Z")

</div>

もう1年経ってしまったので、この機能には本当に可能性を感じているため、再び切実に伺いたいのですが、S3 にホストされた画像や CDN の利用について、何か見込みはありますか？😁

 ![CleanShot 2021-08-08 at 08.25.23@2x](https://global.discourse-cdn.com/meta/original/3X/7/d/7d45951840b7201a77ceb670fa13b254f4045de6.jpeg)

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021 年 8 月 8 日午後 6:42 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/43 "2021-08-08T18:42:07Z")

</div>

Meta は S3 と CDN を使用しており、画像をアップロードするのと同時に編集する場合は問題なく機能します。既存の画像を編集している間は機能しないようです（AFAIK）。

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2021 年 8 月 8 日午後 7:37 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/44 "2021-08-08T19:37:38Z")

</div>

興味深いことに、プラグインと TC がすべて無効化されている別のサイトでも同じ問題が発生しましたが、S3 を無効にすると動作します。何か心当たりはありますか？また、画像も不自然に引き伸ばされており、本来は 2:3 の比率であるべきなのに、画面幅いっぱいに引き伸ばされてしまっています。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021 年 8 月 9 日午後 7:26 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/45 "2021-08-09T19:26:26Z")

</div>

`DISCOURSE_ENABLE_CORS: true` を app.yml に設定していますか？

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2021 年 8 月 9 日午後 9:33 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/46 "2021-08-09T21:33:30Z")

</div>

いいえ、その行はありませんし、`cors-origins` サイト設定にも何も設定されていません。

---

<div class="post-metadata">

### Author: ![Falco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/falco/32/179432_2.png) [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [2021 年 8 月 9 日午後 9:34 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/47 "2021-08-09T21:34:13Z")

</div>

その設定を行って、再構築してください。

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [2021 年 8 月 9 日午後 10:12 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/48 "2021-08-09T22:12:35Z")

</div>

有効化・再ビルド後も発生しています。`cors-origins` や `DISCOURSE_CORS_ORIGIN` に対して何か設定が必要でしょうか？

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/5/d5c183577519d7c84e4d83452a24725926e603a0.png)

---

<div class="post-metadata">

### Author: ![Bank\_Live](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bank_live/32/75893_2.png) [@Bank\_Live](https://meta.discourse.org/u/Bank_Live)
#### Post date: [2021 年 9 月 20 日午前 9:48 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/49 "2021-09-20T09:48:41Z")

</div>

編集が完了できない問題が発生しています。

![2021-09-20_16-46-24](https://global.discourse-cdn.com/meta/original/3X/b/8/b8944bc064e80dbe3276ad37566786d3d4a3b992.gif)

---

<div class="post-metadata">

### Author: ![cmdntd](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cmdntd/32/192008_2.png) [@cmdntd](https://meta.discourse.org/u/cmdntd)
#### Post date: [2021 年 11 月 5 日午前 3:00 UTC](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936/50 "2021-11-05T03:00:33Z")

</div>

スマートフォンで試すと、現在の画像が編集されず、次の画像（現在の画像の隣）が置き換わってしまいます。

これを確認していただけますか？

[前のページ](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936.md?page=1)

[次のページ](https://meta.discourse.org/t/image-annotator-allows-you-to-annotate-images-in-the-previewer/161936.md?page=3)
