?
Solved

Add an image overlay

Posted on 2005-03-18
14
Medium Priority
?
952 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
Add bar graphs to Access queries using Unicode block characters. Graphs appear on every record in the color you want. Give life to numbers. Hopes this gives you ideas on visualizing your data in new ways ~ Create a calculated field in a query: …
In this video, Percona Director of Solution Engineering Jon Tobin discusses the function and features of Percona Server for MongoDB. How Percona can help Percona can help you determine if Percona Server for MongoDB is the right solution for …
Suggested Courses

777 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