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.


very interactive- check this out

 
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
imsb
Newbie


Joined: 27 Jun 2004
Posts: 3

PostPosted: Sun Jun 27, 2004 10:52 pm    Post subject: very interactive- check this out Reply with quote

Guys.. check this

http://mpush.msolutions.cc/req.php?account=babesandhunks&image=http://www.thebabesandhunks.com/gallery/./data/media/379/peetphoto00002[1].jpg&caption=%20Thousands%20of%20Celebrity%20Pictures%20at%20thebabesandhunks.com

how they do that? Razz
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Tue Jun 29, 2004 7:58 am    Post subject: Reply with quote

Nice looking setup. However, it's not something that can't really be recreated with the cropcanvas/interface class. Which bit were you specifically wondering how they did it?
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
imsb
Newbie


Joined: 27 Jun 2004
Posts: 3

PostPosted: Tue Jun 29, 2004 10:52 pm    Post subject: Reply with quote

they use dragdrop.js like your script use. i wondering how they could make that nice preview window.
Rolling Eyes
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 Jul 02, 2004 3:14 am    Post subject: Reply with quote

Basically they're getting the dimensions of the cropping area and then clipping the original image in a div tag so that it only shows the dimensions they want. It's basically this part of the javascript from their page:

Code:
    function setFormValues(){


     obj = document.getElementById('previewImage');
     dd.elements.imgResized.setZ(1);
     dd.elements.cropScreen.setZ(2);
     dd.elements.imgResizer.setZ(3);

     var zw = Math.round(30850 / dd.elements.cropScreen.w);
     var zh = Math.round(38402 / dd.elements.cropScreen.h);

     var w = Math.round(30850 / dd.elements.cropScreen.w);
     var h = Math.round(38402 / dd.elements.cropScreen.h);

     var zsw = (zw / 241);
     var zsh = (zh / 300);

     var sw = (w / 241);
     var sh = (h / 300);

     obj.style.width = w + 'px';
     obj.style.height = h + 'px';

     document.frmResizeValues.rx.value = Math.round(zsw * (dd.elements.cropScreen.x - 220));
     document.frmResizeValues.ry.value = Math.round(zsh * (dd.elements.cropScreen.y - 40));

     document.frmResizeValues.rw.value = zw;
     document.frmResizeValues.rh.value = zh;

     var screenTop = Math.round(sh * (dd.elements.cropScreen.y - 40));
     var screenLeft = Math.round(sw * (dd.elements.cropScreen.x - 220));
     var screenRight = Math.round(sw * ((dd.elements.cropScreen.x - 220) + dd.elements.cropScreen.w));
     var screenBottom = Math.round(sh * ((dd.elements.cropScreen.y - 40) + dd.elements.cropScreen.h));

     obj.style.left = Math.round(30 - screenLeft) + 'px';
     obj.style.top = Math.round(26 - screenTop) + 'px';

     obj.style.clip = "rect(" + screenTop + "px " + screenRight + "px " + screenBottom + "px " + screenLeft + "px)";


    }


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


Joined: 27 Jun 2004
Posts: 3

PostPosted: Sun Jul 04, 2004 6:49 am    Post subject: Reply with quote

andy,
many thanks for your support,
i got your class working now for local file.
i faced another problem, how to make it crop image from my other host?
I try to change loadImage to
PHP:
<?php $cc->loadImage  (http://mydomain2.com/image.jpg); ?>

but not working.

Regards,
IM
Back to top
View user's profile Send private message
jeyaloui
Newbie


Joined: 02 Oct 2004
Posts: 3

PostPosted: Wed Oct 06, 2004 5:52 am    Post subject: simle doubt Reply with quote

hi andy

can u explain me these four lines in the setformvalues() mehtod

var zw = Math.round(30850 / dd.elements.cropScreen.w);
var zh = Math.round(38402 / dd.elements.cropScreen.h);

var w = Math.round(30850 / dd.elements.cropScreen.w);
var h = Math.round(38402 / dd.elements.cropScreen.h);


thanx in advance
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 Oct 08, 2004 2:50 am    Post subject: Re: simle doubt Reply with quote

Those lines are just creating a number of variables - calculated width and height for various uses. It looks like it might be the height/width of the image divided by the width/height of the intended cropping area.

It's not my code, so I'm just winging it here... Smile

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


Joined: 25 May 2006
Posts: 3

PostPosted: Fri May 26, 2006 5:58 am    Post subject: Reply with quote

Hi Andy.
I found your site by searching on cropping scripts.
What you do is what I'm looking for.
Your application is awesome!

I installed the crop canvas version with the handles on the corners.
It works great, but the proportional button doesn't seem to work for me?

Is this possible:
I would like the live preview window (like the mpush example above) showing the image converted.
A real pixel would be mapped to a 5x5 pixel image of a certain color.
Example, a white real pixel appearing in the crop window would show up as the 5x5 yellow.gif in the preview window.
I think I saw an imagefunctions.php somewhere that could convert colors?
Any help would be appreciated!
Thanks, Barry
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 May 26, 2006 3:29 pm    Post subject: Reply with quote

Hi and welcome to the board!

cyberg wrote:
Your application is awesome!


Thanks!

cyberg wrote:
I installed the crop canvas version with the handles on the corners. It works great, but the proportional button doesn't seem to work for me?


Not surprising - the version with the handles was never a complete project, just a test to see something different. I've merged the best bits of it with the current crop canvas, and while it still doesn't have the handles it (the new version soon to be released) is rather nice and does have some great (in my opinion!) features.

cyberg wrote:
I would like the live preview window (like the mpush example above) showing the image converted.
A real pixel would be mapped to a 5x5 pixel image of a certain color.
Example, a white real pixel appearing in the crop window would show up as the 5x5 yellow.gif in the preview window.
I think I saw an imagefunctions.php somewhere that could convert colors?
Any help would be appreciated!


It might be possible, but certainly not practical to do in real-time. Because the images are pixel-based you have to iterate over every pixel, find out the colour, change it if needs be, write to a new image and then output that image.

If you just wanted to present them with a div tag that also contains what's in the crop area, but possibly bigger or smaller, then you should be able to do this by looking at the crop area position and then clipping the main image as a background to the div tag. Sounds complex, but it's the same technique I use in the cropping version you downloaded and the soon-to-be-relased new version.

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


Joined: 25 May 2006
Posts: 3

PostPosted: Fri May 26, 2006 3:50 pm    Post subject: Second real-time Preview window clipped form main image Reply with quote

Hi Andy.
Can you please help me out with the code for the div tag/ crop area position /clipping the main image as a background to the div tag, you talked about?
It would take me over a year to figure this out (I'm a mechanical engineer).
I'm looking forward to seeing the new version of Crop Canvas in action.
Thanks again
Barry Laughing
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 May 26, 2006 4:05 pm    Post subject: Reply with quote

Here's a sneak peek:

http://dev.amnuts.com/crop-canvas/

Look at the javascript source code, specifically the cc_reposBackground function. It looks like this:

Code:
    function cc_reposBackground()
    {
        xPos = (dd.elements.theCrop.x - dd.elements.theImage.x + 1);
        yPos = (dd.elements.theCrop.y - dd.elements.theImage.y + 1);
       
        if (document.getElementById) {
            document.getElementById('theCrop').style.backgroundPosition = '-' + xPos + 'px -' + yPos + 'px';
        } else if (document.all) {
            document.all['theCrop'].style.backgroundPosition = '-' + xPos + 'px -' + yPos + 'px';
        } else {
            document.layers['theCrop'].backgroundPosition = '-' + xPos + 'px -' + yPos + 'px';
        }
    }


As you can see, it's taking the x/y position of the cropping area (theCrop) and positioning the full image in the crorrect area to clip the required section.

HTH

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


Joined: 25 May 2006
Posts: 3

PostPosted: Mon Jun 26, 2006 6:33 pm    Post subject: How to set php output to javascript variable in a function? Reply with quote

Hello.
I'm still woking away at all this. This is a part of my crop canvas implementation.

How can I execute a php script from a function within html javascript (not a PHP page)
that will return the output text string to a javascript variable (without reloading the page or creating a pop-up)?

Example:

This is in a page named with a .htm extension

<script type="text/javascript">
<!--

function fcn_passvariable()

{

var the_variable='<?=echoed php or something() ?>'
var colr='red'

jg6.drawString('The variable is :'+the_variable+colr,4,4);
jg6.paint();

}

//-->
</script>

How to call the php and not have the page reload?
What is in the .php that echoes the text output to equate to the variable?

I can do it with built-in server functions like:
var the_date='<%=Date() %>' (a vbscript function)
or
var colr= the_letters.charAt(0); (a javascript function)

I hope you get what I'm trying to do.
Thanks,
Barry
Back to top
View user's profile Send private message
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