How to protect your web site pictures from being saved

Статья
09/01/2004

A customer emailed me:

As you are an expert I have the following question that maybe you know to answer.

My wife is an artist making cards for every occasion.

We have now the idea of selling these cards through internet.

Showing these cards on a gallery page is one thing.

This brings the risk that people will save the page and use the images while not paying for them.

Do you know of any way how to prevent this saving with all the images?

I’m no expert on digital rights management, but one way to make it more difficult for images to be saved is to make them into multiple fragments. Users will have a harder time saving the image locally, although they can just piece together the image using the inverse of the sample code below or just hit alt-prtscrn to capture the screen contents to the clipboard.

Another solution is to show a low resolution sample of the original (the source code allows you to save as JPG, specifying the quality of the sampling).

(The Internet Explorer Image Toolbar appears when the user hovers the mouse over a picture. This can be disabled by the content author using an HTML tag. Images of less than 200 x 200 pixels will not show the IE toolbar. However, in both cases, the user can still right-click on the picture and choose “Save Picture As”.)

This is a sample generated HTML from the code below.

<head>

<title>Show fragmented picture</title>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</body>

Full source code (about 200 lines) available here

This is the FragmentPic method of the class that takes the loaded image and fragments it into a grid of x, y segments, generating small JPGs and the HTML to display them. The code uses the GDI+ Flat API to draw the image, then screen scrape the image in grid cell fragments and saves them to JPGs.

PROCEDURE PicFragment(nXSegs as Integer, nYSegs as Integer, cPicFragName as String, cOutputHTM as String)

LOCAL nHeightOrig, nWidthOrig, nHeight, nWidth,oy,iy,ix,nRatio,nSize

nHeightOrig=0

nWidthOrig=0

GdipGetImageWidth(ox.nImage,@nWidthOrig)

GdipGetImageHeight(ox.nImage,@nHeightOrig)

nRatio=nWidthOrig/nHeightOrig

nSize=400 && change this to vary resolution

nWidth=nSize *nRatio

nHeight=nSize

ox.DrawScale(_screen.HWnd,0,0,nWidth,nHeight,0,0,nWidthOrig, nHeightOrig)

FOR iy = 0 TO nYSegs-1

FOR ix = 0 TO nXSegs-1

oy=NEWOBJECT("gdplusEx")

oy.GetRegion(_screen.HWnd,ix*nWidth/nXSegs, iy*nHeight/nYSegs, nWidth/nXSegs, nHeight /nYSegs)

oy.save(cPicFragName+PADL(ix,2,"0")+PADL(iy,2,"0")+".jpg",95) && change last parm for jpg quality

ENDFOR

* Now generate the HTML to show the multiple JPG fragments

SET TEXTMERGE ON TO (cOutputHTM) noshow

\<head>

\ <title>Show fragmented picture</title>

\</head>

\<body>

\<table id="Pic" cellspacing="0" cellpadding="0" border=0 >

FOR iy = 0 TO nYSegs-1

\<tr>

FOR ix = 0 TO nXSegs-1

* optionally add galleryimg="no" to the img tag

\<td><img src=<<cPicFragName+PADL(ix,2,"0")+PADL(iy,2,"0")>>.jpg border=0 /></td>

ENDFOR

\</tr>

ENDFOR

\</body>

SET TEXTMERGE to

32438

Comments

Anonymous
September 01, 2004
Print Screen on 1920x1200 and your fragmented files are one again in my photoshop ;)

I always tell people it can't be done, unless you take a watermark or don't put them online, because as with HTML source, everything you can see, you can save
Anonymous
September 01, 2004
Do people not know what that key labeled "Print Screen" does? Especially programmers?
Anonymous
September 01, 2004
The better answer to your client would be you cannot. Just watermark or put low res versions of the pictures up on the web. What you did was cool but to me the answer is a watermark or just some annoying banner thing across the photo. Doing anything with the browser will just guarantee that it will only work with IE, which means I could use another browser and still get the picture.
Anonymous
September 01, 2004
an easier way to stop right clicking is ( to stop the stupid users)

<table background="yourprotectedfile.jpg">
<tr>
<td><img src="blank_transparent.gif" height=(height of your image) width=(width of your image)></td>
</tr>
</table>

when they right click and save, they get a blank gif

with javascript you can disable the right clicking AND the print screen key.

Print screen is your worst enemy. or printing to PDF(that can easily be opened in photoshop)
Anonymous
September 01, 2004
Someone asked the same question yesterday on a local Aussie mailing list.

Same issues were discussed...

I found that you can programmatically create image watermarks. There is a sample on MSDN... http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/httphandl.asp

You can skip to the "Protecting Your
Images" section if you don't want to read it all.
Anonymous
September 01, 2004
Jeremy Rule's Blog post on Dynamic Image Generation I think would work very we'll in this scenario. Use your original file on the page but overlay/embed the extra text eg" Sample Picture" over the top of your image as explained here.

http://blogs.msdn.com/jrule/archive/2004/08/16/215393.aspx

Cheers,

Stephen
Anonymous
September 21, 2004
You use a lot of GDI+ stuff in your sample.
The new ReportListener class in VFP 9 also has the ability to use GDI+ in Reports. Is there a simple way in VFP 8 or VFP 9 to draw a >gradient< filled shape/rectangle or other object ? By now i only can fill shapes with just one color. Wouldn't it be nice to expand the RGB() function in VFP with e.g. a 4th parameter in order to achive that goal?
Anonymous
July 20, 2006
It takes a lot of work to create the blog posts and code samples that I put in my blog, and I was curious...
Anonymous
June 15, 2009
PingBack from http://einternetmarketingtools.info/story.php?id=14290

Поделиться через

How to protect your web site pictures from being saved

Comments

Дополнительные ресурсы