ViewImage
ViewImage copied to clipboard
Prevent downloading image by clicking on view image
Example image:
https://www.google.com/search?q=images&tbm=isch&ved=2ahUKEwijwZP6gpL5AhWtPOwKHWSMDekQ2-cCegQIABAA&oq=images&gs_lcp=CgNpbWcQAzIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6BAgAEENQvAVYsgdgsAloAHAAeACAAZgBiAH2BZIBAzQuM5gBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=s33dYuObAa35sAfkmLbIDg&bih=920&biw=959&rlz=1C1GCEA_enHU985HU985&hl=en#imgrc=2nDXavJs9DoKTM
When you click on the button, it downloads the image. I would suggest using a regex like this one, then replacing the href.
let regex = /(\&dl)(.*?)(?=&)/; // "&dl" + everything after it just before another "&"
This will probably have an adverse effect at some point, but if this is implemented I think might as well try a more general approach where you just capture the url until the first argument, using (^.*)(?=\?)
This would make
https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg?cs=srgb&dl=pexels-anjana-c-674010.jpg&fm=jpg
into
https://images.pexels.com/photos/674010/pexels-photo-674010.jpeg
Although there are probably cases where genuine images are linked using arguments like image key or id, and so my suggestion would screw those. The other approach is too specific and would only fix one website at a time, and that would get out of hand pretty quickly.
Here's another quick example where a general approach would be favorable:
https://www.google.com/search?q=images&tbm=isch&ved=2ahUKEwijwZP6gpL5AhWtPOwKHWSMDekQ2-cCegQIABAA&oq=images&gs_lcp=CgNpbWcQAzIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6BAgAEENQvAVYsgdgsAloAHAAeACAAZgBiAH2BZIBAzQuM5gBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=s33dYuObAa35sAfkmLbIDg&bih=920&biw=959&rlz=1C1GCEA_enHU985HU985&hl=en#imgrc=n5hAWsQ-sgKo_M
Currently this will show you a downsized image when clicking the "View Image" button, due to the url arguments:
https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bGVuc3xlbnwwfHwwfHw%3D&w=1000&q=80
when removing the arguments you get the full resolution image:
https://images.unsplash.com/photo-1453728013993-6d66e9c9123a
Then you have those where neither approach works:
https://www.google.com/search?q=images&tbm=isch&ved=2ahUKEwijwZP6gpL5AhWtPOwKHWSMDekQ2-cCegQIABAA&oq=images&gs_lcp=CgNpbWcQAzIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6BAgAEENQvAVYsgdgsAloAHAAeACAAZgBiAH2BZIBAzQuM5gBAKABAaoBC2d3cy13aXotaW1nwAEB&sclient=img&ei=s33dYuObAa35sAfkmLbIDg&bih=920&biw=959&rlz=1C1GCEA_enHU985HU985&hl=en#imgrc=ouCnCib2C_Ep7M
The last one you showed is indeed a tricky one. I don't think there is a method that would cover multiple sites, since the transformation of the link is fairly substantial here:
https://burst.shopify.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page/download
https://burst.shopifycdn.com/photos/person-holds-a-book-over-a-stack-and-turns-the-page.jpg
Yeah, and I wouldn't worry much about it, all I'm saying is that it isn't possible to cover all bases but the issue you raised is a good one and we should try to maximize the functionality for a diversity of cases without compromising the worst case: direct download of the image.