1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Resizing images before Upload

Discussion in 'JavaScript' started by helara, Mar 8, 2009.

0
  1. #1
    Hi,

    So, this is the problem I have. I have a form from which I can upload images. I need to resize this images before I upload it to the server.

    I have a PHP script, so at the end I got the image resized, but my client wants to do this on the client side to save bandwidht. My first thought was JavaScript, but I think this is not possible. So, is there any solution for this? Maybe something in flash? I have found some solutions, but either looks very fancy but does not resize or is a Java Applet, and I'm not such a big fan of these.

    Thanks a lot.
     
    helara, Mar 8, 2009 IP
  2. DGK

    DGK Peon

    Messages:
    73
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I think it is not possible.
    Also by security reason, many of the new browsers prevents php and js code to access the path on the clients machine when the user upload file.
     
    DGK, Mar 9, 2009 IP
  3. shubhamjain1

    shubhamjain1 Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have the script that can resize script with a slider.!!!

    Do you want it??? Script is of 2$.!!
     
    shubhamjain1, Mar 9, 2009 IP
  4. sandalian

    sandalian Peon

    Messages:
    10
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I don't think it's possible. You can't touch anything on client's side.
     
    sandalian, Mar 9, 2009 IP
  5. shubhamjain1

    shubhamjain1 Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    It is simple. Have you heard dynamic CSS with JS???
     
    shubhamjain1, Mar 9, 2009 IP
  6. helara

    helara Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hmmm,..., but it is possible, those Java Applets I have found do that, I was wondering if there were something in flash or JavaScript... well, I keep looking.

    Thanks.
     
    helara, Mar 9, 2009 IP
  7. shubhamjain1

    shubhamjain1 Peon

    Messages:
    75
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    shubhamjain1, Mar 10, 2009 IP
  8. helara

    helara Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    No no, but thanks :) I want to resize, then upload.

    Thanks.
     
    helara, Mar 14, 2009 IP
  9. ads2help

    ads2help Peon

    Messages:
    2,142
    Likes Received:
    67
    Best Answers:
    1
    Trophy Points:
    0
    #9
    Not very possible. With java applet it may be possible.

    Anyway, a Google about it

    - ads2help
     
    ads2help, Mar 14, 2009 IP
  10. elizas

    elizas Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I have created it using CSS and Javascript. Please Copy the following code to an Html page and check it out. I have added inline comments in the code so you can get little idea on how the code is executing to generate the controll and how it is working to resize the image.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New Controller By Abinash</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script>

    //Initializing the values you can change these as your need
    var control_width = '300';//in px
    var eachdivwidth = (control_width/100)-1;
    var bar_div_width = eachdivwidth+5;
    //else show color
    var barcolor = '#2AAAFF';
    var changeimage = 1;

    var imw ='';
    var imh = '';
    function CreateController()
    {

    var control_sting ="";
    control_sting = control_sting+"<div style='height:10px;cursor:pointer; width:"+control_width+"px; float:left; position:absolute; top:0px;left:0px;' onmousedown=\"rsvalue('1')\" onmouseup=\"rsvalue('0')\">";
    //creating the smalldiv inside
    for(var i = 100 ;i>=1; i--)
    {
    control_sting = control_sting+"<div id='tde"+i+"' onmouseover=\"setcolor('"+i+"')\" ";
    if(i==100)
    {
    control_sting = control_sting+" style='background-color:"+barcolor+"; height:10px; float:left; width:"+bar_div_width+"px;'";
    }
    else
    {
    control_sting = control_sting+" style='float:left;height:10px; width:"+eachdivwidth+"px;background-color:#ffffff;'";
    }

    control_sting = control_sting+" ><div style=' position:relative;margin-top:5px; border-top:1px solid #666666;width:"+eachdivwidth+"px;'>";
    control_sting = control_sting+"</div></div>";
    }

    //after all cretae the control
    document.getElementById('controldiv').innerHTML = control_sting;
    }
    //changuing the hidden value so by which we can generate the drag event
    function rsvalue(x)
    {
    document.getElementById('rs').value=x;
    }
    //changhing the over div color and making all other div to initial state
    function setcolor(goti)
    {
    if(document.getElementById('rs').value == 1)
    {
    for(var i=1;i<=100;i++)
    {
    document.getElementById('tde'+i).style.backgroundColor='#FFFFFF';
    document.getElementById('tde'+i).style.width=eachdivwidth+'px';
    }
    document.getElementById('tde'+goti).style.backgroundColor=barcolor;document.getElementById('tde'+goti).style.width=bar_div_width+'px';
    if(changeimage == 1)
    {changeimageSIze(goti);}
    }
    }
    //This function is used to resize the image
    function changeimageSIze(goti)
    {

    var imgsize_ori =document.getElementById('myimage').style.width;
    imgsize_ori = imgsize_ori.split("px");
    imgsize_ori = imgsize_ori[0];

    if(goti == 100 || goti==99)
    imw = imgsize_ori

    var imgsize_orih =document.getElementById('myimage').style.height;
    imgsize_orih = imgsize_orih.split("px");
    imgsize_orih = imgsize_orih[0];

    if(goti == 100 || goti==99)
    imh = imgsize_orih

    imgsize_ori = Math.floor((parseInt(imw)/100)*goti);
    imgsize_orih = Math.floor((parseInt(imh)/100)*goti);
    if(imgsize_ori > 101)
    document.getElementById('myimage').style.width = imgsize_ori+"px";
    if(imgsize_orih > 101)
    document.getElementById('myimage').style.height = imgsize_orih+"px";

    if(goti == 100){
    document.getElementById('myimage').style.width = imw+"px";
    document.getElementById('myimage').style.height = imh+"px";
    }
    }
    </script>
    </head>
    <body onLoad="CreateController()">
    <img src="http://www.mindfiresolutions.com/mindfire/banners_12.jpg" id="myimage" style="width:131px; width:533px;">
    <!-- this is the div where i want to show the contrioller-->
    <div id="controldiv" style="left:50px; top:170px; position:absolute; padding:20px;">
    </div>
    <!-- controlling the movement of the controll-->
    <input type="hidden" name="rs" id="rs" value="0">

    </body>
    </html>

    I hope you find the tip useful.
    Eliza
     
    elizas, Feb 16, 2010 IP
  11. elizas

    elizas Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You can increase or decrease the size of the image by dragging the marker in the slider control, very much like you control volume in video or music players.

    I have created it using CSS and Javascript. Please Copy the following code to an Html page and check it out. I have added inline comments in the code so you can get little idea on how the code is executing to generate the controll and how it is working to resize the image.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>New Controller By Abinash</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script>

    //Initializing the values you can change these as your need
    var control_width = '300';//in px
    var eachdivwidth = (control_width/100)-1;
    var bar_div_width = eachdivwidth+5;
    //else show color
    var barcolor = '#2AAAFF';
    var changeimage = 1;

    var imw ='';
    var imh = '';
    function CreateController()
    {
     
    elizas, Apr 27, 2010 IP
  12. nezZario

    nezZario Peon

    Messages:
    45
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    As far as I know this isn't possible, but if you want the PHP code to do it then just send me a PM and I'll send it over. PHP is the way to go with this.
     
    nezZario, Apr 27, 2010 IP