Prevent downloading of posted images

サポート
27

No, I have said it is not a valud option for us.
But it is the most effective way to elude image stealing completly, may be the unique.

28

This is technically doable in a theme component, should not be to expensive to build maybe a few hundred dollars, open up a topic in marketplace

「いいね！」 1
30

これまで、@awesomerobot が提供したスクリプトを使用して、コンテキストメニューが表示されないようにすることで、画像のダウンロードを困難にしていました。

<script type="text/discourse-plugin" version="0.8">
const TopicRoute = require("discourse/routes/topic").default;
TopicRoute.reopen({ activate: function() { this._super(); Em.run.next(function() { $('body').on('contextmenu', '.cooked img, .mfp-img', function(e){ return false; }); }); } });
</script>

ディスコースのテーマをカスタマイズし、各ページのヘッダーにスクリプトを追加しました。

しかし、3.2.0.beta5-dev (67244a2318) への最後のアップグレード以降、トピックを開こうとするとディスコースからエラーが発生するようになり、スクリプトを削除しなければなりませんでした。

ディスコースに変更があり、それが機能しないようにしているようです。

imagen
imagen1920×1160 110 KB

「いいね！」 1
31

修正した更新バージョンはこちらです！

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("img").on("contextmenu", function(e) {
      e.preventDefault();
    });
  });
</script>

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img", function(e) {
      e.preventDefault();
    });
  });
</script>
「いいね！」 4
32

これはEmberのアップデートによるものと予想されます。そのコードスニペットはかなり古いため、書き直す必要があります。

「いいね！」 2
33

ありがとうございます。新しいスクリプトを試してみます。

ライトボックスを使用してもコンテキストメニューが表示されなくなったので、少なくとも機能しているようです。

投稿内の埋め込みサムネイルから画像をダウンロードすることは引き続き可能です。

34

こんにちは、@davidkingham さん

私が理解している限り、あなたが書いたスクリプトのうち、2つ目のものは、ライトボックスで開かれた画像上で右クリックしたときにコンテキストメニューが開くのを防ぎます。

1つ目のものは、投稿内のサムネイルなど、画像上で右クリックしたときに同じことを行うはずです。

しかし、それは機能せず、セカンダリメニューを開いて画像を別のウィンドウで開くことができます。

CSSに次のように記述してみました。

img {
    pointer-events: none;
}

これによりコンテキストメニューが開かなくなりますが、ライトボックスを開くために画像をクリックすることもできなくなります。

何が間違っているのでしょうか？

ライトボックスの下にあるダウンロードリンクを非表示にできると素晴らしいです。

以前はCSSに次のエントリがありました。

.image-source-link {
    display: none;
}

しかし、ライトボックスの下に「ダウンロード」と「元の画像」のリンクが表示されるため、これも機能しないようです。

更新：

2つ目のスクリプトを修正して、.lightbox-wrapper も含めるようにしました。これにより、投稿内の画像上で右クリックしたときにコンテキストメニューが表示されなくなり、画像をクリックするとライトボックスが正しく開くようになりました。

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-img, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

一般的な img オブジェクトに対して同じことをしようとしている最初のスクリプトを削除すべきでしょうか？

.img-source-link の CSS を .mfp-title に置き換えると機能し、ダウンロードリンクは表示されなくなりますが、タイトルも非表示になります。リンクのみを非表示にすることが機能せず、タイトルバー全体を非表示にすると機能する理由がわかりません。

.mfp-title {
    display: none;
}
35

最初の項目については、その動作を確認できていないため、確信が持てません。しかし、画像リンクについては、こちらをご利用いただけます。

.image-source-link {
    display: none !important;
}

余分な · · が残りますが、ダウンロードリンク（およびフルサイズ表示リンク）を非表示にする方法はこれしかありませんでした。

「いいね！」 1
36

どうもありがとう。
!important が何なのかは分かりませんが、うまくいきました。末尾の .. はあまり重要ではないようです :wink:

CSS とスクリプトは現在このようになっており、望ましい動作が得られています。サイト内の画像は右クリックでダウンロードできず、ライトボックス内のダウンロードリンクは非表示になります。
ご指導ありがとうございました。

CSS

.image-source-link
{
    display: none !important;
}

ヘッダー スクリプト:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("img").on("contextmenu", function(e) {
      e.preventDefault();
    });
  });
</script>
<script type="text/discourse-plugin" version="0.8">
  api.onPageChange((url, title) => {
    $("body").on("contextmenu", ".cooked img, .mfp-figure, .lightbox-wrapper", function(e) {
      e.preventDefault();
    });
  });
</script>

最初の一つは、アイコンやアバターのサムネイルなど、サイト内の他の画像に対するコンテキストメニューを無効にするようです。

二つ目は、投稿内の画像やライトボックスで機能します。

「いいね！」 1