is there any code to prevent other people from saving image by right click ?? can we disable it ??

[OLIV1]

Hi everyone

How can we do a " Right Click " to avoid saving image ?

is there any code to do it ??

website : www.kantorku.co.id

Theme : Xtra

Thank you

[pawankumar · Accepted solution]

Hi @OLIV1 
I hope you are doing well,
You can put this code in theme.liquid before closing head tag </head>

<script>
  document.addEventListener('contextmenu', event => event.preventDefault());
</script>

It will disable the right click on the entire page, if you want to disable it only for images then you can try this code

<script>
  document.addEventListener('contextmenu', function(e) {
    if (e.target.tagName === 'IMG') {
      e.preventDefault();
    }
  });
</script>

I hope, it will be helpful to you
Thanks!

[OLIV1]

Dear Pawan Kumar

Thank You so much for helping me out

The code is work really well

But I have Tried Diferent method to take the image

1. I Dragged The image to the desktop and it will save as a " WEBP' ---> is there any ways to disable the Dragging image to the desktop ??

2. I tried To screen Shot it ----> is there any ways to Disable Screen shot or " some kind like a Blocking layers when they do a screen shot " ??

Thank you

[pawankumar]

Hi @OLIV1 
I hope you are doing well,
You can use this code to prevent drag

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const imgs = document.querySelectorAll("img");
    imgs.forEach(img => {
      img.setAttribute("draggable", "false");
      img.addEventListener("dragstart", function (e) {
        e.preventDefault();
      });
    });
  });
</script>

and unfortunately, we can't prevent screenshot
Thanks!