CODEWITHSUNDEEP
phpjavascriptajaximagecss
Cool Brain
Cool Brain

Reputation: 649

Cut image after load is complete

I Googled a lot but no sufficient ans was found.

I need to place an image (900 X 5200 px) in one of my pages. As the image is sensitive, I need to prevent users from copying the image. I have an idea that can do this:

I will divide the image into pieces. Then the image grid will be loaded into some divs. So user won't be able to save the image. Or he/she will save only 1 square cm part of the whole image.

But this plan will not work if some small parts of the grid fails to load. So, I want to do another thing. I want to load the full image then cut the image into parts. Then show the parts altogether in divs.

This requires javascript. But I am confused how to start and need your help.

Now you know the matter, if you have better idea please share.

Thanks in advance.

Upvotes: 2

Views: 253

Answers (3)

Develoger
Develoger

Reputation: 3998

You can do this with: http://www.pixastic.com/lib/docs/actions/crop/

Yet you need to develop your logic around that library.

I have made example, you can see it on this link: http://simplestudio.rs/yard/crop_img/

Basically you can get URL to your image via php and using my code or code similar to it crop your image into pieces and display them on canvas.

This way image is not accessible via browser or inspect element or what so ever. User can save the pieces individually but you can configure my code for piece to be 5px, I set it to 20x20px.

* test saving image piece by doing right click anywhere on image and do a "Save image as.." option.

Also you need to think of way how to hide src to image provided by php, if you need help on that I can help you.

Upvotes: 0

Michael Irigoyen
Michael Irigoyen

Reputation: 22947

TL;DR Don't over engineer a solution, print screen will get around anything you do.

You are not going to be able to prevent people from copying this image. Plain and simple. Regardless of your best efforts, a simple PRT SCRN and paste into Paint will be enough.

Your best bet will be to not over engineer this and simply place a watermark and copyright notice on the page. Other options can include placing a transparent <div> over the top of the image so it cannot be right-click'ed and saved, but it still will not prevent the image from being stored in the user's cache. Or stop them from using developer tools or Firebug to find the source image.

Upvotes: 1

Michael Brown
Michael Brown

Reputation: 9153

The trick is simple. Create a div with the background being the image you want to display. Layer a div with a transparent image over it. When user goes to save the image, they get a blank. Program your server to not return "direct" requests for the image (so some clever chap can't just look at the css and retrieve the URL to the image).

Granted the image will still be in their cache but so would the sliced image so it won't make it impossible just more difficult for a determined person to retrieve the picture.

Upvotes: 3

Related Questions