andy's php projects
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister   ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Script and site usage:
All of the scripts on this site are provided free for non-commerical, personal or non-profit use. If you find these scripts useful to you, appreciate the free support, or are just an all round nice person, then why not donate a little dosh? If you wish to use any of these in a commercial system, please refer to the payment plan.


make crop image (transbg.png) scale rather than repeat?

 
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas
View previous topic :: View next topic  
Author Message
johnr
Newbie


Joined: 02 Feb 2005
Posts: 7

PostPosted: Wed Feb 02, 2005 2:37 pm    Post subject: make crop image (transbg.png) scale rather than repeat? Reply with quote

hi,

is it possible to make it so that the image used for the cropping mask (transbg.png by default) scales when the cropping area is resized?

at the moment if you drag it larger than the size of the image, the image is simply repeated. it would be great if the image expand to fit the size of the crop area.

thanks
john
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Thu Feb 03, 2005 5:30 am    Post subject: Reply with quote

Hi John, and welcome to the board!

Yes, it is kinda possible. What you have to do is remove the background image from the crop div (theCrop) and put it inside the div tag as an image. Apply a width/height of 100% to that image and set the z-index to -1. You can see the result here:

http://php.amnuts.com/demos/crop-canvas/interactive2.php

As you can see, though, it can product a really horrible effect, so you'll want to be careful with what you do. Also, it will mess up the transparency filter IE. You can get around this by using a javascript routine to apply the filter to the image. I haven't on this demo because it's just a quick proof-of-concept.

Alternatively, you could wait around for CSS3 to come out and be used on the browsers because it has a property for the background image size. But it may be a long wait. Wink

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
johnr
Newbie


Joined: 02 Feb 2005
Posts: 7

PostPosted: Thu Feb 03, 2005 12:49 pm    Post subject: Reply with quote

thanks andy, that's exactly what i meant.

Quote:
Also, it will mess up the transparency filter IE. You can get around this by using a javascript routine to apply the filter to the image. I haven't on this demo because it's just a quick proof-of-concept.


i'm sorry, i'm not sure i know what you mean by this, is it hard to do?

thanks
john
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Fri Feb 04, 2005 4:01 am    Post subject: Reply with quote

Hard to do the javascript opactiy thing? Not if you use the code that can be found with this interesting article:

http://www.alistapart.com/articles/pngopacity/

The code you want it nearish the bottom of the article in a zip file called opacity.zip.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
johnr
Newbie


Joined: 02 Feb 2005
Posts: 7

PostPosted: Fri Feb 04, 2005 4:06 am    Post subject: Reply with quote

thank you Andy! I will take a look.
Back to top
View user's profile Send private message
johnr
Newbie


Joined: 02 Feb 2005
Posts: 7

PostPosted: Fri Feb 04, 2005 5:57 am    Post subject: Reply with quote

thanks again Andy, I've got it working perfectly now!
Back to top
View user's profile Send private message
amnuts
Site Admin


Joined: 01 Sep 2002
Posts: 662
Location: East Sussex, England

PostPosted: Fri Feb 04, 2005 8:40 am    Post subject: Reply with quote

Fantastic! Would love to see the final result when you've got it up and running (if it's for public consuption, of course). So PM me the link at some point, if you'd like.

Andy
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
Display posts from previous:   
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.    php.amnuts.com Forum Index -> Crop Canvas All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum


Powered by phpBB © 2001, 2005 phpBB Group