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.


IE - opacity of cropping area

 
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
mmjaeger
Light Poster


Joined: 22 Oct 2004
Posts: 25

PostPosted: Sat Feb 05, 2005 1:53 pm    Post subject: IE - opacity of cropping area Reply with quote

Hello Andy,

how did you achieve the grey opacity effect of the cropping area - If I look at your interactive demo, the opacity effect works in IE. If I look at my local installation, unfortunately it doesn't - it only works in firefox.

I'm using IE 6. Am I doing something wrong?

I would very much appreciate if you could provide me with some step by step instructions.

Thank you in advance for your help.
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Mon Feb 07, 2005 4:16 am    Post subject: Reply with quote

I'm assuming you're looking at my demo and your copy with the same browser, right? If so, then check that you have downloaded the transbg.png image and it's in the same location as the class.

Can you confirm the above things?

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


Joined: 22 Oct 2004
Posts: 25

PostPosted: Mon Feb 07, 2005 4:50 am    Post subject: IE opacity Reply with quote

Hello Andy,

thank you for getting back to me - yes, I can confirm that I'm using the same browser and the transbg.png file is in the class crop class folder.

I've no idea why it is not working - hope you can help.

Please find below the cropinterface code - maybe you find the error in there.

Thanks in advance for your help.

Code:
require_once dirname(__FILE__) . '/class.cropcanvas.php';
   
class cropInterface extends canvasCrop {
   var $file;
   var $img;
   var $crop;
   var $useFilter;
   var $param;
   var $cr_f;
   
   /**
   * @return cropInterface
   * @param bool $debug
   * @desc Class initializer
   */
   function cropInterface($debug = false) {
      parent::canvasCrop($debug);
      
      $this->img  = array();
      $this->crop = array();
      $this->useFilter = false;

      $agent = trim($_SERVER['HTTP_USER_AGENT']);
      if ((stristr($agent, 'wind') || stristr($agent, 'winnt')) && (preg_match('|MSIE ([0-9.]+)|', $agent) || preg_match('|Internet Explorer/([0-9.]+)|', $agent))) {
         $this->useFilter = true;
      } else {         
         $this->useFilter = false;
      }
      $this->setResizing();
      $this->setCropMinSize();
   }
   
   /**
    * @return void
    * @param int $r   
    * @desc Sets the initial state of the cropping area (0 or 1 for any dimension or proportional).
    * If this is not specifically set, then the cropping size will set to scalable.
    */
    function setParam($r) {
        $this->param['ratio']  = $r;
//      $this->param['ratio']  = $r ? 'RESIZABLE' : 'SCALABLE';         
    }
   
   
   /**
   * @return void
   * @param unknown $do
   * @desc Sets whether you want resizing options for the cropping area.
   * This is handy to use in conjunction with the setCropSize function if you want a set cropping size.
   */
   function setResizing($do = true) {
      $this->crop['resize'] = ($do) ? true : false;
   }
   
   
   /**
   * @return void
   * @param int $w
   * @param int $h
   * @desc Sets the initial size of the cropping area.
   * If this is not specifically set, then the cropping size will be a fifth of the image size.
   */
   function setCropDefaultSize($w, $h)   {
      $this->crop['width']  = ($w < 5) ? 5 : $w;
      $this->crop['height'] = ($h < 5) ? 5 : $h;
   }
   
   
   /**
   * @return void
   * @param int $w
   * @param int $h
   * @desc Sets the minimum size the crop area can be
   */
   function setCropMinSize($w = 25, $h = 25) {
      $this->crop['min-width']  = ($w < 5) ? 5 : $w;
      $this->crop['min-height'] = ($h < 5) ? 5 : $h;
   }
   

   /**
   * @return void
   * @param string $filename
   * @desc Load the cropping interface
   */
   function loadInterface($filename,$cr_f) {
      if (!file_exists($filename)) {
         die("The file '$filename' cannot be found.");
      } else {
         $this->file = $filename;
         $this->cr_f = $cr_f; // crop factor                  
         $this->img['sizes'] = getimagesize($filename);
         if (!$this->crop['width'] || !$this->crop['height']) {
            $this->setCropDefaultSize(($this->img['sizes'][0] / 5), ($this->img['sizes'][1] / 5));
         }
      }
      echo '<script type="text/javascript" src="wz_dragdrop.js"></script>', "\n";
      echo '<div id="theCrop" style="position:absolute; cursor: pointer; background-color:transparent; border:1px solid #f0a62f; width:', $this->crop['width'], 'px; height:', $this->crop['height'], 'px; ';
      if ($this->useFilter) {
         echo 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\', sizingMethod=\'scale\');';               
      } else {
         echo 'background-image:url(transbg.png);';         
      }
      echo "\"></div>\n";
      echo '<table border="0" style="border-collapse: collapse; border: 0px solid #003399; width:', $this->img['sizes'][0], 'px;">';
      echo "</td></tr>\n";
      echo '<tr><td><img src="', str_replace($_SERVER['DOCUMENT_ROOT'], '', $this->file), '" ', $this->img['sizes'][3], ' alt="" name="theImage"></td></tr>', "\n";
      echo "\n</table>\n";
   }   
   
   /**
   * @return void
   * @desc Load the javascript required for a functional interface.
   * This MUST be called at the very end of all your HTML, just before the closing body tag.
   */
   function loadJavaScript() {
        $params = '"theCrop"+MAXOFFLEFT+0+MAXOFFRIGHT+' . $this->img['sizes'][0] . '+MAXOFFTOP+0+MAXOFFBOTTOM+' . $this->img['sizes'][1] . ($this->crop['resize'] ? '+' . $this->param['ratio']  : '') . '+MAXWIDTH+' . $this->img['sizes'][0] . '+MAXHEIGHT+' . $this->img['sizes'][1] . '+MINHEIGHT+' . $this->crop['min-height'] . '+MINWIDTH+' . $this->crop['min-width'] . ',"theImage"+NO_DRAG';
//      $params = '"theCrop"+MAXOFFLEFT+0+MAXOFFRIGHT+' . $this->img['sizes'][0] . '+MAXOFFTOP+0+MAXOFFBOTTOM+' . $this->img['sizes'][1] . ($this->crop['resize'] ? '+SCALABLE' : '') . '+MAXWIDTH+' . $this->img['sizes'][0] . '+MAXHEIGHT+' . $this->img['sizes'][1] . '+MINHEIGHT+' . $this->crop['min-height'] . '+MINWIDTH+' . $this->crop['min-width'] . ',"theImage"+NO_DRAG';
      echo <<< EOT
<script type="text/javascript">
<!--

   SET_DHTML($params);

   dd.elements.theCrop.moveTo(dd.elements.theImage.x, dd.elements.theImage.y);
   dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
   dd.elements.theImage.addChild("theCrop");
   dd.elements.theCrop.defx = dd.elements.theImage.x;

   function my_DragFunc() {
      dd.elements.theCrop.maxoffr = dd.elements.theImage.w - dd.elements.theCrop.w;
      dd.elements.theCrop.maxoffb = dd.elements.theImage.h - dd.elements.theCrop.h;
      dd.elements.theCrop.maxw    = {$this->img['sizes'][0]};
      dd.elements.theCrop.maxh    = {$this->img['sizes'][1]};
      // update crop values      
      parent.document.getElementById('cr_left').value = Math.round((dd.elements.theCrop.x - dd.elements.theImage.x)*$this->cr_f);
      parent.document.getElementById('cr_top').value = Math.round((dd.elements.theCrop.y - dd.elements.theImage.y)*$this->cr_f);      
   }

   function my_ResizeFunc() {
      dd.elements.theCrop.maxw = (dd.elements.theImage.w + dd.elements.theImage.x) - dd.elements.theCrop.x;
      dd.elements.theCrop.maxh = (dd.elements.theImage.h + dd.elements.theImage.y) - dd.elements.theCrop.y;
      // update crop values      
      parent.document.getElementById('cr_width').value = Math.round(dd.elements.theCrop.w*$this->cr_f);
      parent.document.getElementById('cr_height').value = Math.round(dd.elements.theCrop.h*$this->cr_f);      
   }
   
   function my_Submit() {
      self.location.href = '{$_SERVER['PHP_SELF']}?file={$this->file}&sx=' +
         (dd.elements.theCrop.x - dd.elements.theImage.x) + '&sy=' +
         (dd.elements.theCrop.y - dd.elements.theImage.y) + '&ex=' +
         ((dd.elements.theCrop.x - dd.elements.theImage.x) + dd.elements.theCrop.w) + '&ey=' +
         ((dd.elements.theCrop.y - dd.elements.theImage.y) + dd.elements.theCrop.h);

      // set new values in main frame
         parent.document.getElementById('cr_width').value = Math.round(dd.elements.theCrop.w*$this->cr_f);
         parent.document.getElementById('cr_height').value = Math.round(dd.elements.theCrop.h*$this->cr_f);
         parent.document.getElementById('cr_left').value = Math.round((dd.elements.theCrop.x - dd.elements.theImage.x)*$this->cr_f);
         parent.document.getElementById('cr_top').value = Math.round((dd.elements.theCrop.y - dd.elements.theImage.y)*$this->cr_f);
   }
   
   function my_SetResizingType(proportional) {      
      //window.alert(proportional);
      if (proportional) {
         dd.elements.theCrop.scalable  = 0;
         dd.elements.theCrop.resizable = 1;
      } else {
         dd.elements.theCrop.scalable  = 1;
         dd.elements.theCrop.resizable = 0;
      }
   }
   
//-->
</script>
EOT;
      }
}
Back to top
View user's profile Send private message
mmjaeger
Light Poster


Joined: 22 Oct 2004
Posts: 25

PostPosted: Tue Feb 08, 2005 2:26 am    Post subject: IE - opacity of cropping area Reply with quote

Hello Andy,

I figured it out - I was using the latest version of the Walter Zorn script - although, it contains some bugfixes, the opacity wasn't working anymore. Switching back to the older version on your website solved the problem.

Maybe you will figure out what the problem is so the community could use the latest version of the wz_dragdrop.js script.

Thank you
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 Feb 08, 2005 5:38 am    Post subject: Reply with quote

I've just looked into this, and with the latest version of Walter's excellent script he has included the ability to make div's transparent when dragging. To do this he uses the filter 'Alpha(opacity=100)' to begin with and then adjusts it in the javascript. However, this isn't good for the cropping interface because it already uses a transparent PNG and the AlphaLoadImage filter.

All you have to do is re-set the filter once you have created the javascript element, such as:

Code:
   dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
   dd.elements.theImage.addChild("theCrop");
   dd.elements.theCrop.defx = dd.elements.theImage.x;
   dd.elements.theCrop.defy = dd.elements.theImage.y;
   dd.elements.theCrop.div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\',sizingMethod=\'scale\')';


It's the last line you're interested in.

I've just tested and it seems to work (in IE 5.5 and Firefox, at least - all I have access to right now.)

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


Joined: 22 Oct 2004
Posts: 25

PostPosted: Tue Feb 08, 2005 5:56 am    Post subject: Reply with quote

amnuts wrote:
I've just looked into this, and with the latest version of Walter's excellent script he has included the ability to make div's transparent when dragging. To do this he uses the filter 'Alpha(opacity=100)' to begin with and then adjusts it in the javascript. However, this isn't good for the cropping interface because it already uses a transparent PNG and the AlphaLoadImage filter.

All you have to do is re-set the filter once you have created the javascript element, such as:

Code:
   dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
   dd.elements.theImage.addChild("theCrop");
   dd.elements.theCrop.defx = dd.elements.theImage.x;
   dd.elements.theCrop.defy = dd.elements.theImage.y;
   dd.elements.theCrop.div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\',sizingMethod=\'scale\')';


It's the last line you're interested in.

I've just tested and it seems to work (in IE 5.5 and Firefox, at least - all I have access to right now.)

Andy


that did it - thank you
Back to top
View user's profile Send private message
mmjaeger
Light Poster


Joined: 22 Oct 2004
Posts: 25

PostPosted: Wed Feb 09, 2005 5:31 am    Post subject: IE - opacity of cropping area Reply with quote

Hello Andy,

I followed your instructions and added the Alpha filter again in order to use the latest wz_dragdrop.js script.

However, it seems that this causes a stack overflow error. Looking at the Firefox javascript console, it tells me that there is too much recursion.

do you have any idea how to solve this?

thank you in advance for your help.

It looks like it has nothing to do with the Alphafilter but with the moveTo or moveBy commands to set the x/y start position.

the error message referes to line 601 and 841 of the wz_dragdrop.js file.
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Wed Feb 09, 2005 6:02 am    Post subject: Reply with quote

Hmm.. I get nothing of the sort when using the moveTo and Alpha filter fix. This page:

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

employs both techniques with the latest wz_dragfrop.js file (downloaded in the last couple days of this post), and yet works perfectly - no errors reported at all on the FireFox javascript console.

Have you altered the .js file at all? What does your loadJavascript method look like in the crop interface class?
Back to top
View user's profile Send private message Send e-mail Visit poster's website AIM Address Yahoo Messenger MSN Messenger
mmjaeger
Light Poster


Joined: 22 Oct 2004
Posts: 25

PostPosted: Wed Feb 09, 2005 6:11 am    Post subject: Reply with quote

amnuts wrote:
Hmm.. I get nothing of the sort when using the moveTo and Alpha filter fix. This page:

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

employs both techniques with the latest wz_dragfrop.js file (downloaded in the last couple days of this post), and yet works perfectly - no errors reported at all on the FireFox javascript console.

Have you altered the .js file at all? What does your loadJavascript method look like in the crop interface class?


Hello Andy,

I haven't changed anything at the wz_dragdrop.js file - using the latest version, I believe it is 4.61.

Below you'll find my interface file - hope you'll be able to discover the problem.

thank you in advance for your help.

PHP:
<?php

//
// class.cropinterface.php
// version 1.0.0, 28th November, 2003
//
// Andrew Collington, 2003
// php@amnuts.com, http://php.amnuts.com/
//
// Description
//
// This class allows you to use all the power of the crop canvas
// class (class.cropcanvas.php) with a very easy to use and understand
// user interface.
//
// Using your browser you can drag and resize the cropping area and
// select if you want to resize in any direction or proportional to
// the image.
//
// If you wanted to provide users a cropping area without any resizing
// options, then this can easily be acheived.
//
// Requirements
//
// You will need the crop canvas class also from http://php.amnuts.com/
// The cropping area implements the 'Drag & Drop API' javascript by
// Walter Zorn (http://www.walterzorn.com/dragdrop/dragdrop_e.htm).
//
// Feedback
//
// There is message board at the following address:
//
//    http://php.amnuts.com/forums/index.php
//
// Please use that to post up any comments, questions, bug reports, etc.  
// You can also use the board to show off your use of the script.
//
// Support
//
// If you like this script, or any of my others, then please take a moment
// to consider giving a donation.  This will encourage me to make updates 
// and create new scripts which I would make available to you, and to give 
// support for my current scripts.  If you would like to donate anything, 
// then there is a link from my website to PayPal.
//
// Example of use
//
//  require_once 'class.cropinterface.php';
//  $ci = new cropInterface();
//  if ($_GET['file']) {
//    $ci->loadImage($_GET['file']);
//    $ci->cropToDimensions($_GET['sx'], $_GET['sy'], $_GET['ex'], $_GET['ey']);
//    header('Content-type: image/jpeg');
//    $ci->showImage('jpg', 100);
//    exit;
//  } else {
//    $ci->loadInterface('myfile.jpg');
//    $ci->loadJavaScript();
//  }
// 

require_once dirname(__FILE__) . '/class.cropcanvas.php';
    
class 
cropInterface extends canvasCrop {
    var 
$file;
    var 
$img;
    var 
$crop;
    var 
$useFilter;
    var 
$param;
    var 
$cr_f 1;
    var 
$startPosX 0
    var 
$startPosY 0;
    
    
/**
    * @return cropInterface
    * @param bool $debug
    * @desc Class initializer
    */
    
function cropInterface($debug false) {
        
parent::canvasCrop($debug);
        
        
$this->img  = array();
        
$this->crop = array();
        
$this->useFilter false;

        
$agent trim($_SERVER['HTTP_USER_AGENT']);
        if ((
stristr($agent'wind') || stristr($agent'winnt')) && (preg_match('|MSIE ([0-9.]+)|'$agent) || preg_match('|Internet Explorer/([0-9.]+)|'$agent))) {
            
$this->useFilter true;
        } else {            
            
$this->useFilter false;
        }
        
$this->setResizing();
        
$this->setCropMinSize();        
    }
    
    
/** 
    * @return void 
    * @param int $r    
    * @desc Sets the initial state of the cropping area (0 or 1 for any dimension or proportional). 
    * If this is not specifically set, then the cropping size will set to scalable. 
    */ 
    
function setParam($r) { 
        
$this->param['ratio']  = $r;
//        $this->param['ratio']  = $r ? 'RESIZABLE' : 'SCALABLE';         
    

    
    
    
/**
    * @return void
    * @param unknown $do
    * @desc Sets whether you want resizing options for the cropping area.
    * This is handy to use in conjunction with the setCropSize function if you want a set cropping size.
    */
    
function setResizing($do true) {
        
$this->crop['resize'] = ($do) ? true false;
    }
    
    
    
/**
    * @return void
    * @param int $w
    * @param int $h
    * @desc Sets the initial size of the cropping area.
    * If this is not specifically set, then the cropping size will be a fifth of the image size.
    */
    
function setCropDefaultSize($w$h)    {
        
$this->crop['width']  = ($w 5) ? $w;
        
$this->crop['height'] = ($h 5) ? $h;
    }
    
    
/**
    * @return void
    * @param int $w
    * @param int $h
    * @desc Sets the minimum size the crop area can be
    */
    
function setCropMinSize($w 25$h 25) {
        
$this->crop['min-width']  = ($w 5) ? $w;
        
$this->crop['min-height'] = ($h 5) ? $h;
    }
    
    
/**
    * @return void
    * @param int $x
    * @param int $y
    * @desc Sets the start position of the crop area
    */
    
function setCropStartPosition($x$y) { 
        
$this->startPosX $x
        
$this->startPosY $y
    }

    
/**
    * @return void
    * @param string $filename
    * @desc Load the cropping interface
    */
    
function loadInterface($filename,$cr_f) {
        if (!
file_exists($filename)) {
            die(
"The file '$filename' cannot be found.");
        } else {
            
$this->file $filename;
            
$this->cr_f $cr_f// crop factor                        
            
$this->img['sizes'] = getimagesize($filename);
            if (!
$this->crop['width'] || !$this->crop['height']) {
                
$this->setCropDefaultSize(($this->img['sizes'][0] / 5), ($this->img['sizes'][1] / 5));
            }
        }
        echo 
'<script type="text/javascript" src="wz_dragdrop.js"></script>'"\n";
        echo 
'<div id="theCrop" style="position:absolute; background-color:transparent; border:1px solid #f0a62f; width:'$this->crop['width'], 'px; height:'$this->crop['height'], 'px; ';
        if (
$this->useFilter) {
            echo 
'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\', sizingMethod=\'scale\');';                    
        } else {
            echo 
'background-image:url(transbg.png);';            
        }
        
/*echo "\"></div>\n";
        echo '<div>';        
        echo '<img src="', str_replace($_SERVER['DOCUMENT_ROOT'], '', $this->file), '" ', $this->img['sizes'][3], ' alt="" name="theImage">', "\n";
        echo "\n</div>\n";
        */
        
        
echo '<table border="0" style="border-collapse: collapse; border: 0px solid #003399; width:'$this->img['sizes'][0], 'px;">';
        echo 
"</td></tr>\n";
        echo 
'<tr><td><img src="'str_replace($_SERVER['DOCUMENT_ROOT'], ''$this->file), '" '$this->img['sizes'][3], ' alt="" name="theImage"></td></tr>'"\n";
        echo 
"\n</table>\n";
        
        
    }    
    
    
/**
    * @return void
    * @desc Load the javascript required for a functional interface.
    * This MUST be called at the very end of all your HTML, just before the closing body tag.
    */
    
function loadJavaScript() {
          
$params '"theCrop"+MAXOFFLEFT+0+MAXOFFRIGHT+' $this->img['sizes'][0] . '+MAXOFFTOP+0+MAXOFFBOTTOM+' $this->img['sizes'][1] . ($this->crop['resize'] ? '+' $this->param['ratio']  : '') . '+MAXWIDTH+' $this->img['sizes'][0] . '+MAXHEIGHT+' $this->img['sizes'][1] . '+MINHEIGHT+' $this->crop['min-height'] . '+MINWIDTH+' $this->crop['min-width'] . ',"theImage"+NO_DRAG';
        
//    $params = '"theCrop"+MAXOFFLEFT+0+MAXOFFRIGHT+' . $this->img['sizes'][0] . '+MAXOFFTOP+0+MAXOFFBOTTOM+' . $this->img['sizes'][1] . ($this->crop['resize'] ? '+SCALABLE' : '') . '+MAXWIDTH+' . $this->img['sizes'][0] . '+MAXHEIGHT+' . $this->img['sizes'][1] . '+MINHEIGHT+' . $this->crop['min-height'] . '+MINWIDTH+' . $this->crop['min-width'] . ',"theImage"+NO_DRAG';
        
echo <<< EOT
    <script type="text/javascript">
    <!--

    SET_DHTML(
$params);
    dd.elements.theCrop.moveTo(dd.elements.theImage.x, dd.elements.theImage.y);
    dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
    dd.elements.theImage.addChild("theCrop");
    dd.elements.theCrop.defx = dd.elements.theImage.x;    
    // if x/y are set, move to position    
    if (
$this->startPosX) { 
        dd.elements.theCrop.moveTo(
$this->startPosX,$this->startPosY);
    }
    dd.elements.theCrop.div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\', sizingMethod=\'scale\')'; 
    
    function my_DragFunc() {
        dd.elements.theCrop.maxoffr = dd.elements.theImage.w - dd.elements.theCrop.w;
        dd.elements.theCrop.maxoffb = dd.elements.theImage.h - dd.elements.theCrop.h;
        dd.elements.theCrop.maxw    = 
{$this->img['sizes'][0]};
        dd.elements.theCrop.maxh    = 
{$this->img['sizes'][1]};
        // update crop values in parent window        
        parent.document.getElementById('cr_left').value = Math.round((dd.elements.theCrop.x - dd.elements.theImage.x)*
$this->cr_f);
        parent.document.getElementById('cr_top').value =  Math.round((dd.elements.theCrop.y - dd.elements.theImage.y)*
$this->cr_f);        
        parent.setCrm();
    }

    function my_ResizeFunc() {
        dd.elements.theCrop.maxw = (dd.elements.theImage.w + dd.elements.theImage.x) - dd.elements.theCrop.x;
        dd.elements.theCrop.maxh = (dd.elements.theImage.h + dd.elements.theImage.y) - dd.elements.theCrop.y;
        // update crop values in parent window        
        parent.document.getElementById('cr_width').value =  Math.round(dd.elements.theCrop.w*
$this->cr_f);
        parent.document.getElementById('cr_height').value = Math.round(dd.elements.theCrop.h*
$this->cr_f);        
        parent.setCrm();            
    }
    
    function my_Submit() {
         self.location.href = '
{$_SERVER['PHP_SELF']}?file={$this->file}&sx=' + 
            (dd.elements.theCrop.x - dd.elements.theImage.x) + '&sy=' + 
            (dd.elements.theCrop.y - dd.elements.theImage.y) + '&ex=' +
            ((dd.elements.theCrop.x - dd.elements.theImage.x) + dd.elements.theCrop.w) + '&ey=' +
            ((dd.elements.theCrop.y - dd.elements.theImage.y) + dd.elements.theCrop.h);
            // set new values in parent window
            parent.document.getElementById('cr_width').value =  Math.round(dd.elements.theCrop.w*
$this->cr_f);
            parent.document.getElementById('cr_height').value = Math.round(dd.elements.theCrop.h*
$this->cr_f);
            parent.document.getElementById('cr_left').value = Math.round((dd.elements.theCrop.x - dd.elements.theImage.x)*
$this->cr_f);
            parent.document.getElementById('cr_top').value =  Math.round((dd.elements.theCrop.y - dd.elements.theImage.y)*
$this->cr_f);
            parent.setCrm();    
    }
    
    function my_SetResizingType(proportional) {        
        if (proportional) {
            dd.elements.theCrop.scalable  = 0;
            dd.elements.theCrop.resizable = 1;
        } else {
            dd.elements.theCrop.scalable  = 1;
            dd.elements.theCrop.resizable = 0;
        }
    }    
//-->
</script>
EOT;
    }
}
?>
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Wed Feb 09, 2005 8:04 am    Post subject: Reply with quote

Having looked at it and the site, I can't see the *exact* problem right now. But in the interface class, change these lines:

Code:
    dd.elements.theCrop.defx = dd.elements.theImage.x;   
    // if x/y are set, move to position   
    if ($this->startPosX) {
        dd.elements.theCrop.moveTo($this->startPosX,$this->startPosY);
    }


to be:

Code:
    dd.elements.theCrop.defx = dd.elements.theImage.x;   
     dd.elements.theCrop.moveTo(dd.elements.theImage.x + {$this->startPosX}, dd.elements.theImage.y + {$this->startPosY});


and see if that has any effect.

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


Joined: 07 Aug 2005
Posts: 1

PostPosted: Sun Aug 07, 2005 10:11 pm    Post subject: Reply with quote

I am having this same issue -- I can't however seem to find the lines below for the suggested fix anywhere - are they in the interface or crop-class?? I also reverted back to the JS that is on this server (I believe it is 4.55) and that solved the problem. Any suggestions?

Quote:
dd.elements.theCrop.setZ(dd.elements.theImage.z+1);
dd.elements.theImage.addChild("theCrop");
dd.elements.theCrop.defx = dd.elements.theImage.x;
dd.elements.theCrop.defy = dd.elements.theImage.y;
dd.elements.theCrop.div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\',sizingMethod=\'scale\')';
Back to top
View user's profile Send private message
amnuts
Site Admin


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

PostPosted: Mon Aug 08, 2005 3:56 am    Post subject: Reply with quote

Hi, and welcome to the board!

Just to recap; by the same problem I'm assuming that you want to use the latest version of the drag/drop javascript but are having problems with the cropping interface not showing the opacity.

It's the class.cropinterface.php file that you want to update.

Line 204 should look like this:

Code:
dd.elements.theCrop.defx = dd.elements.theImage.x;


Add the following line below that on line 205:

Code:
dd.elements.theCrop.div.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\',sizingMethod=\'scale\')';


And that should be all you need to do. However, if you want to tidy things up a little more, go to the if block starting on line 161 which looks like this:

Code:
        if ($this->useFilter)
        {
            echo 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'transbg.png\',sizingMethod=\'scale\');';
        }
        else
        {
            echo 'background-image:url(transbg.png);';
        }


and simply make it look like:

Code:
echo 'background-image:url(transbg.png);';


Regards,

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