How to protect your web site pictures from being saved
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>
<table id="Pic" cellspacing="0" cellpadding="0" border=0 >
<tr>
<td><img src=Pic0000.jpg border=0 /></td>
<td><img src=Pic0100.jpg border=0 /></td>
<td><img src=Pic0200.jpg border=0 /></td>
<td><img src=Pic0300.jpg border=0 /></td>
</tr>
<tr>
<td><img src=Pic0001.jpg border=0 /></td>
<td><img src=Pic0101.jpg border=0 /></td>
<td><img src=Pic0201.jpg border=0 /></td>
<td><img src=Pic0301.jpg border=0 /></td>
</tr>
<tr>
<td><img src=Pic0002.jpg border=0 /></td>
<td><img src=Pic0102.jpg border=0 /></td>
<td><img src=Pic0202.jpg border=0 /></td>
<td><img src=Pic0302.jpg border=0 /></td>
</tr>
<tr>
<td><img src=Pic0003.jpg border=0 /></td>
<td><img src=Pic0103.jpg border=0 /></td>
<td><img src=Pic0203.jpg border=0 /></td>
<td><img src=Pic0303.jpg border=0 /></td>
</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
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
