Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Add an image overlay

Posted on 2005-03-18
14
Medium Priority
?
967 Views
Last Modified: 2008-01-09
Does anyone know how to add an image overlay over an existing image? Right now, I'm using ASPUpload to upload the image and ASPJpeg to resize the image. The overlay is in PNG format with a transparent background. Here is what my code looks like now:

<HTML>
<HEAD>
<TITLE>Upload Bike Confirmation</TITLE>
</HEAD>
<BODY>
<!-- this script is invoked by form.asp-->

<!-- BEGIN Upload bike result -->
<%
      dim strUserFileName

      Set Upload = Server.CreateObject("Persits.Upload")
      Path = Server.MapPath("/bikepics3")
      Upload.OverwriteFiles = False
      Upload.SetMaxSize 3000000, True

      On Error Resume Next      
      Count = Upload.Save(Path)

      If Err <> 0 or Count = 0 Then
            
%>

<FONT SIZE="3" FACE="Arial" COLOR="#FF0000"><% If Err <> 0 Then Response.Write "<b>An error occurred:</b> <i>" & Err.Description & "</i>" Else Response.Write "Nothing has been uploaded."%></B></FONT>
<P>
<FONT SIZE="2" FACE="Arial" COLOR="#FF6600"><A HREF="form2.asp">Try again</A>.</FONT>

<%            
      Else
            On Error Goto 0
            Set File = Upload.Files(1)
            If File.ImageType = "UNKNOWN" Then
                  File.Delete
%>
<FONT SIZE="3" FACE="Arial" COLOR="#FF0000">This is not a valid image file.</B></FONT>
<P>
<FONT SIZE="3" FACE="Arial"><A HREF="form2.asp">Try again</A>.</FONT>
<%            Else

            strUserFileName = File.ExtractFileName
            
            Response.Write "Successfully Uploaded Image!<br><br>"
            
            Session("Filename") = strUserFileName
            Set Jpeg1 = Server.CreateObject("AspImage.Image")
            Set Jpeg2 = Server.CreateObject("AspImage.Image")
            Set JpegOverlay = Server.CreateObject("AspImage.Image")

            Jpeg1.FileName = File.Path
            JpegOverlay.LoadImage "e:\html\domains\zylstrahd.com\wwwroot\images\overlay\overlay.png"
            
            Jpeg1.Width = 450
            Jpeg1.Height = 338
            Jpeg1.DrawImage 0, 0, JpegOverlay
            Jpeg1.JPEGQuality = 95
            Jpeg1.Quality = 70
            'Response.Write "<br><b>" & server.HTMLEncode(File.Path & "big" & strUserFileName) & "</b><br>"
            SaveJpeg1 = Path & "\big_" & strUserFileName
            If UCase(Right(SaveJpeg1, 3)) <> "JPG" Then
                  SaveJpeg1 = SaveJpeg1 & ".jpg"
            End If
            Jpeg1.Save SaveJpeg1
            Response.Write "Resized for Large Image!<br>"

            Jpeg2.Open(File.Path)
            
            Jpeg2.Width = 100
            Jpeg2.Height = 75
            'Response.Write "<br><b>" & server.HTMLEncode(File.Path & "sml" & strUserFileName) & "</b><br>"
            SaveJpeg2 = Path & "\sm_" & strUserFileName
            If UCase(Right(SaveJpeg2, 3)) <> "JPG" Then
                  SaveJpeg2 = SaveJpeg2 & ".jpg"
            End If
            Jpeg2.Save SaveJpeg2
            Response.Write "Resized for Small Image!<br>"
      
            Set Jpeg1 = nothing
            Set Jpeg2 = nothing
            Set JpegOverlay = nothing

            File.Delete
            
      End If
      

%>
 
<p><a href="addbike.asp"><font color="#000000"><br>Image was successfully uploaded and resized, click here to add bike info to database!</font></a></p>
<p>&nbsp; </p>
<!-- END Upload bike result -->
<%

      End If
%>
</BODY>
</HTML>

With this code, it shows only the overlay with a black background behind it on the uploaded resized image. Can anyone help me?
0
Comment
Question by:ecosvaldo
  • 6
  • 4
  • 4
14 Comments
 
LVL 14

Expert Comment

by:dfu23
ID: 13577371
What browser are you using to test this? Internet Explorer does not support PNG files completely so that could be an issue ...
0
 

Author Comment

by:ecosvaldo
ID: 13578354
Yes I have Internet Explorer, but the finalized image is saved as a JPG. I'm only using the PNG format for the overlay to retain the transparent background.
0
 
LVL 14

Expert Comment

by:dfu23
ID: 13588624
Ok, you have 3 AspImage.Image objects.

Is Jpeg1 ever set to have an initial image?

What does this line do?
Jpeg1.DrawImage 0, 0, JpegOverlay

I guess what I am asking is how does this code make an image an overlay to another image? I'm not seeing it in the code above ...
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:ecosvaldo
ID: 13590147
Jpeg1 is set to resize the original image into a big, viewable version.
Jpeg2 is set to resize the original image into a thumbnail version.
JpegOverlay is set to the overlay image.

The line [Jpeg1.DrawImage 0, 0, JpegOverlay] draws JpegOverlay on top of Jpeg1 at coordinates 0, 0. Since JpegOverlay has a transparent background, it turns Jpeg1 into a pure black image with the overlay on top of it. I asked Persits Software about this, and they said that transparent backgrounds are not supported in ASPJpeg.

So I was wondering if anyone here knew a way around this (since I've seen pictures on the internet with overlays, they use ASPUpload and ASPJpeg - I'm sure there is some ASP programming to recognize the transparency background of the overlay).
0
 
LVL 14

Expert Comment

by:dfu23
ID: 13590420
2 things ...

1. I don't see where in your code that you load an image into Jpeg1 initially ...

2. The JPEG image format doesn't support transparency ...
0
 

Author Comment

by:ecosvaldo
ID: 13593054
Oops, that's the wrong code! Here is the actual code:


<HTML>
<HEAD>
<TITLE>Upload Bike Confirmation</TITLE>
</HEAD>
<BODY>
<!-- this script is invoked by form.asp-->

<!-- BEGIN Upload bike result -->
<%
      dim strUserFileName

      Set Upload = Server.CreateObject("Persits.Upload")
      Path = Server.MapPath("/bikepics3")
      Upload.OverwriteFiles = False
      Upload.SetMaxSize 3000000, True

      On Error Resume Next      
      Count = Upload.Save(Path)

      If Err <> 0 or Count = 0 Then
            
%>

<FONT SIZE="3" FACE="Arial" COLOR="#FF0000"><% If Err <> 0 Then Response.Write "<b>An error occurred:</b> <i>" & Err.Description & "</i>" Else Response.Write "Nothing has been uploaded."%></B></FONT>
<P>
<FONT SIZE="2" FACE="Arial" COLOR="#FF6600"><A HREF="form2.asp">Try again</A>.</FONT>

<%            
      Else
            On Error Goto 0
            Set File = Upload.Files(1)
            If File.ImageType = "UNKNOWN" Then
                  File.Delete
%>
<FONT SIZE="3" FACE="Arial" COLOR="#FF0000">This is not a valid image file.</B></FONT>
<P>
<FONT SIZE="3" FACE="Arial"><A HREF="form2.asp">Try again</A>.</FONT>
<%            Else

            strUserFileName = File.ExtractFileName
            
            Response.Write "Successfully Uploaded Image!<br><br>"
            
            Session("Filename") = strUserFileName
            Set Jpeg1 = Server.CreateObject("Persits.Jpeg")
            Set Jpeg2 = Server.CreateObject("Persits.Jpeg")
            Set JpegOverlay = Server.CreateObject("Persits.Jpeg")

            Jpeg1.Open(File.Path)
            JpegOverlay.Open "e:\html\domains\zylstrahd.com\wwwroot\images\overlay\overlay.png"
            
            Jpeg1.Width = 450
            Jpeg1.Height = 338
            Jpeg1.DrawImage 0, 0, JpegOverlay
            Jpeg1.Quality = 70
            'Response.Write "<br><b>" & server.HTMLEncode(File.Path & "big" & strUserFileName) & "</b><br>"
            SaveJpeg1 = Path & "\big_" & strUserFileName
            If UCase(Right(SaveJpeg1, 3)) <> "JPG" Then
                  SaveJpeg1 = SaveJpeg1 & ".jpg"
            End If
            Jpeg1.Save SaveJpeg1
            Response.Write "Resized for Large Image!<br>"

            Jpeg2.Open(File.Path)
            
            Jpeg2.Width = 100
            Jpeg2.Height = 75
            'Response.Write "<br><b>" & server.HTMLEncode(File.Path & "sml" & strUserFileName) & "</b><br>"
            SaveJpeg2 = Path & "\sm_" & strUserFileName
            If UCase(Right(SaveJpeg2, 3)) <> "JPG" Then
                  SaveJpeg2 = SaveJpeg2 & ".jpg"
            End If
            Jpeg2.Save SaveJpeg2
            Response.Write "Resized for Small Image!<br>"
      
            Set Jpeg1 = nothing
            Set Jpeg2 = nothing
            Set JpegOverlay = nothing

            File.Delete
            
      End If
      

%>
 
<p><a href="addbike.asp"><font color="#000000"><br>Image was successfully uploaded and resized, click here to add bike info to database!</font></a></p>
<p>&nbsp; </p>
<!-- END Upload bike result -->
<%

      End If
%>
</BODY>
</HTML>


To dfu23 - I know JPEG doesn't support transparency; that's why the overlay is a PNG file instead.
0
 
LVL 9

Expert Comment

by:danataylor
ID: 13594911
Enclose the overlay image inside a div tag with the lower image set as a background.  Make sure the sizes are the same

<div style="background-image:url('underimage.png'); width:100px; height:100px;><img src="overimage.png" style="width:100px; height:100px;"/></div>
0
 

Author Comment

by:ecosvaldo
ID: 13596109
Thanks for your suggestion danataylor. Unfortunately, it does not work.
0
 
LVL 14

Expert Comment

by:dfu23
ID: 13597517
From the ASPJpeg Object Reference manual:

Sub DrawImage(X As Long, Y As Long, Picture As ASPJpeg, Optional Opacity = 1, Optional TranspColor, Optional TranspDeviation = 0)

...

TranspColor specifies the color of pixels within Picture to be made transparent when blending the picture onto the current image. This must be an HTML-style hexadecimal number, e.g. &HFF0000 (red). By default, no pixels will be made transparent.

http://www.aspjpeg.com/object_canvas.html#DrawImage
0
 
LVL 9

Expert Comment

by:danataylor
ID: 13604890
There was a quote that was wrong.  It works now...

<div style="background-image:url('underimage.png); width:100px; height:100px;"><img src='overimage.png' style='width:100px; height:100px;'/></div>
0
 
LVL 9

Accepted Solution

by:
danataylor earned 500 total points
ID: 13604909
AAARRRGGGHHHHH!  Got it wrong again!

<div style="background-image:url('underimage.png'); width:100px; height:100px;"><img src='overimage.png' style='width:100px; height:100px;'/></div>
0
 

Author Comment

by:ecosvaldo
ID: 13605777
I used your correct code, danataylor. But it still does not show the image under the overlay.
0
 
LVL 9

Expert Comment

by:danataylor
ID: 13610527
I really apologize in advance for this but, I gotta ask.  You are changing the underimage.png and overimage.png filenames in the sample to the names of the files you are using, right?

Not sure what is going on.  It works fine on my machine - except I am using GIF images (don't have any PNGs).  Could be an issue there.  I gues if it don't work for you it just don't work and I will politely back out of this conversation.  Good luck in your endeavor.

0
 

Author Comment

by:ecosvaldo
ID: 13611637
Hey danataylor. By converting the overlay to GIF, it now works! So I don't have to use the overlay in ASPJpeg then. Now, when I right-click on the picture to save it, it shows it as the overlay and not the actual picture, which is also a neat feature for the site I'm working on (a lot of people in the past have used our pictures for selling our bikes). Thanks danataylor! And thank you to everyone else for trying to help me.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I have helped a lot of people on EE with their coding sources and have enjoyed near about every minute of it. Sometimes it can get a little tedious but it is always a challenge and the one thing that I always say is:   The Exchange of informatio…
I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
This Micro Tutorial will teach you how to add a cinematic look to any film or video out there. There are very few simple steps that you will follow to do so. This will be demonstrated using Adobe Premiere Pro CS6.
Enter Foreign and Special Characters Enter characters you can't find on a keyboard using its ASCII code ... and learn how to make a handy reference for yourself using Excel ~ Use these codes in any Windows application! ... whether it is a Micr…

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question