SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drag image problems in Firefox and Opera

    Hello,

    This is a very nice script for imagecropping, but "drag image" function seems to work only in I.E

    Can anybody figure out why?


    To crop an image using php follow the below code.
    ...............................................................................................
    First create a t
    // cropper.php
    <?php
    session_start();
    $default_max_width = 640;
    $default_max_height = 480;
    $cropped_width = 120;
    $cropped_height = 120;
    $unique_session_key = 'imgcropper';
    define('TEMP_DIR','temp/');
    $default_image = 'default.jpg';
    $border_background = 'screen.gif';
    function storeImage($img_id)
    {
    $_SESSION['imgcropper']['cropped'] = imgdata($img_id);
    }
    $redirect_after_crop = 'done.php';
    include("cropper-include.php");
    ?>
    ......................................................................................................
    //cropper-include.php

    <?php
    if(isset($_GET['showimg']))
    {
    header("Content-Type: image/gif");
    echo $_SESSION[$unique_session_key]['lowres'];
    die();
    }
    $photoerr = false;
    if(isset($_FILES['photo']))
    {
    $img = imagecreatefromgif($_FILES['photo']['tmp_name']);
    if($img=="")
    {
    $photoerr = true;
    }
    else
    {
    $sizedata = getimagesize($_FILES['photo']['tmp_name']);
    $orig_w = $sizedata[0];
    $orig_h = $sizedata[1];
    $full_w = min($default_max_width, $orig_w);
    $full_h = round(($full_w/$orig_w)*$orig_h);
    if($full_h > $default_max_height)
    {
    $full_h = $default_max_height;
    $full_w = round(($full_h/$orig_h)*$orig_w);
    }
    $full = imagecreatetruecolor($full_w, $full_h);
    imagecopyresized($full, $img, 0, 0, 0, 0, $full_w, $full_h, $orig_w, $orig_h);
    $_SESSION[$unique_session_key]['full'] = imgdata($img);
    $_SESSION[$unique_session_key]['lowres'] = imgdata($full);
    }
    }
    if(isset($_POST['top']) && isset($_POST['left']) && isset($_POST['width']) && isset($_POST['height']))
    {
    do { $tempfile = rand(1,10000); } while(file_exists(TEMP_DIR.$tempfile));
    $fp = fopen(TEMP_DIR.$tempfile, 'wb');
    fwrite($fp, $_SESSION[$unique_session_key]['full']);
    fclose($fp);
    $sizedata = getimagesize(TEMP_DIR.$tempfile);
    $orig_w = $sizedata[0];
    $orig_h = $sizedata[1];
    $img = imagecreatefromgif(TEMP_DIR.$tempfile);
    $full_w = intval($_POST['width']);
    $full_h = intval($_POST['height']);
    $full = imagecreatetruecolor($full_w, $full_h);
    imagecopyresized($full, $img, 0, 0, 0, 0, $full_w, $full_h, $orig_w, $orig_h);
    $final = imagecreatetruecolor($cropped_width, $cropped_height);
    imagecopy($final, $full, 0, 0, -1*(intval($_POST['left'])-$_POST['divwidth']), -1*(intval($_POST['top'])-$_POST['divwidth']), $cropped_width, $cropped_height);
    storeImage($final);
    unlink(TEMP_DIR.$tempfile);
    header("Location: $redirect_after_crop");
    }
    if(!isset($_SESSION[$unique_session_key]['full']))
    {
    $_SESSION[$unique_session_key]['full'] = file_get_contents($default_image);
    $_SESSION[$unique_session_key]['lowres'] = file_get_contents($default_image);
    }
    function imgdata($imgid)
    {
    do{ $filename = TEMP_DIR.rand(1,10000); } while(file_exists($filename));
    imagegif($imgid, $filename);
    $data = file_get_contents($filename);
    unlink($filename);
    return $data;
    }
    ?>
    <html>
    <head>
    <title>Header Image Uploader</title>
    <style type="text/css">
    div#*{ width?php echo $cropped_width;?>; height?php echo $cropped_height;?>; border:1px solid #ff0000; position:absolute; margin:150px auto auto 150px; z-index:2}

    div#udlr {/* left: 10px; top: 10px;*/ text-align: center; background: transparent; }
    div#form { left: 0px; top: <?php echo $cropped_height+200; ?>px; height: 150px;
    width: <?php echo $cropped_width+200; ?>px; text-align: center; }
    div#saveform { left: <?php echo $cropped_width+50; ?>px; top: 10px; background: transparent; }
    img#dragimg { cursor: move; position:relative; z-index: 1; }
    </style>
    <script type="text/javascript" src="imgRotateCanvas.js"></script>
    <script language="JavaScript">
    var dragging = false;
    var x,y,dx,dy;
    var theImg;
    var aspectRatio = -1;
    var top = 0;
    var left = 0;
    document.onmousemove = function(e)
    {
    if(aspectRatio==-1) init();
    if(dragging)
    {
    theE = e ? e : window.event;
    left = theE.clientX - dx;
    top = theE.clientY - dy;
    theImg.style.left = left + "px";
    theImg.style.top = top + "px";
    document.getElementById("top").value = top;
    document.getElementById("left").value = left;
    }
    return false;
    }
    function mouseUp(e)
    {
    if(aspectRatio==-1) init();
    dragging = false;
    }
    function init()
    {
    theImg = document.getElementById("dragimg");
    document.getElementById("top").value = top;
    document.getElementById("left").value = left;
    document.getElementById("width").value = theImg.width;
    document.getElementById("height").value = theImg.height;
    aspectRatio = (theImg.height*1000) / theImg.width;
    theImg.onmousedown = function(e)
    {
    theE = e ? e : window.event;
    dragging = true;
    dx = theE.clientX - left;
    dy = theE.clientY - top;
    return false;
    }
    }
    function shrink()
    {
    if(aspectRatio==-1) init();
    theImg.width = theImg.width * 0.9;
    theImg.height = (theImg.width * aspectRatio) / 1000;
    document.getElementById("width").value = theImg.width;
    document.getElementById("height").value = theImg.height;
    }
    function grow()
    {
    if(aspectRatio==-1) init();
    theImg.width = theImg.width * 1.1;
    theImg.height = (theImg.width * aspectRatio) / 1000;
    document.getElementById("width").value = theImg.width;
    document.getElementById("height").value = theImg.height;
    }
    function up()
    {
    if(aspectRatio==-1) init();
    top -= 10; theImg.style.top = top+"px";
    document.getElementById("top").value = top;
    }
    function down()
    {
    if(aspectRatio==-1) init();
    top += 10; theImg.style.top = top+"px";
    document.getElementById("top").value = top;
    }
    function mleft()
    {
    if(aspectRatio==-1) init();
    left -= 10; theImg.style.left = left+"px";
    document.getElementById("left").value = left;
    }
    function right()
    {
    if(aspectRatio==-1) init();
    left += 10; theImg.style.left = left+"px";
    document.getElementById("left").value = left;
    }
    </script>
    </head>
    <body bgcolor="#fff" onmouseup="mouseUp()">
    <p>rotate:
    <input type="button" value="0°" onClick="rotate(0);">
    <input type="button" value="90°" onClick="rotate(90);">
    <input type="button" value="180°" onClick="rotate(180);">
    <input type="button" value="-90°" onClick="rotate(-90);"></p>
    <div id="*"></div>
    <div style="overflow:hidden; width:500px; height:400px; border:2px solid #00FF00;">
    <img src="<?php echo $_SERVER['PHP_SELF']; ?>?showimg=1" id="dragimg" />
    <canvas id="canvas"></canvas>
    </div>
    <div class="ontop" id="udlr">
    <a href="javascript:shrink();"><img src="header_shrink.jpg" alt="Shrink" border="0" /></a>
    <a href="javascript:grow();"><img src="header_grow.jpg" alt="Grow" border="0" /></a>
    </div>
    <div class="ontop" id="saveform">
    <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
    <input type="hidden" id="top" name="top" value="-1" />
    <input type="hidden" id="left" name="left" value="-1" />
    <input type="hidden" id="width" name="width" value="-1" />
    <input type="hidden" id="height" name="height" value="-1" />

    <input type="hidden" id="divwidth" name="divwidth" value="150" />
    <input type="hidden" id="divheight" name="divheight" value="150" />

    <input type="submit" value="Save and Crop" />
    </form>
    </div>
    <form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
    Upload new photo: <input type="file" name="photo" />
    <input type="submit" value="Upload" />
    </form>
    </body>
    </html>
    ...................................................................................................
    //done.php

    <?php
    if(isset($_GET['img']))
    {
    session_start();
    header("Content-Type: image/jpeg");
    echo $_SESSION['imgcropper']['cropped'];
    die();
    header('location:cropper.php');
    }

    ?>
    <html>
    <head>
    <title>Image Cropper</title>
    </head>
    <body>
    <p>Here is your cropped image/p>
    <img src="done.php?img=1" />
    </body>
    </html>

  2. #2
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine in InternetExplorer, but in Firefox and Opera the image can only be dragged horizontal.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •