Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Detect image size, JS

  1. #1

    Detect image size, JS

    Ciao a tutti,ho già postato sul forum scripting, ma non mi hanno saputo aiutare.

    Ho trovato uno script on-line che fa al caso mio, o almeno credo, dato che non ci sto capendo molto.

    Lo script riconosce la dimensione in pixel dell'immagine che andrò ad uploadare, e fin qui tutto bene.

    I problemi sono questi:

    Non sono un gran esperto di sintassi JS

    Lo script non riconosce le estensioni maiuscole (es. .jpg lo prende, .JPG no)

    Lo script visualizza l'immagine in anteprima piccola e ricliccando grande, mostrando le dimensioni, mentre io lo vorrei al primo click.

    Una volta riconosciute le dimensioni devo fare un controllo che mi dia una alert se l'immagine è più alta o più larga di 450 pixels.


    Mi aiutate a modificare lo script?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD><TITLE>pubblicazione foto</TITLE>
    <META content="text/html; charset=windows-1252" http-equiv=Content-Type>


    <STYLE>.divstyle {
    HEIGHT: 0px; POSITION: absolute; WIDTH: 0px
    }
    </STYLE>

    <SCRIPT language=JavaScript>

    function showimg(form)
    {
    adres = form.image_file.value;
    index = adres.indexOf(".gif");
    index = index + adres.indexOf(".jpg");
    index = index + adres.indexOf(".bmp");
    if (form.image_file.value == "")
    {alert("Nessuna Immagine trovata");}
    else
    {if (index == -3){alert("Formato Immagine non riconosciuto");
    form.width.value=0;
    form.height.value=0;}
    else
    {
    var img_obj = new Image();
    img_obj = form.image_file.value;
    document.changing.src = img_obj;
    document.changing2.src= img_obj;
    document.changing.width = document.changing2.width;
    document.changing.height = document.changing2.height;
    set();
    }
    }
    }
    fast = 0;
    change = 0;
    function upw(){
    document.image.width.value=parseInt(document.image .width.value)+1;
    resize();}
    function over_upw(){upw();
    change = 1;
    changetime = setTimeout("fast_upw()","600");}
    function fast_upw(){clearTimeout(changetime);
    upw();
    fast = setTimeout("fast_upw()","100");}
    function clt(){
    if (change == 1){clearTimeout(changetime);}
    clearTimeout(fast);
    change = 0;
    }
    function resize() {document.changing.height = document.image.height.value;
    document.changing.width = document.image.width.value;}
    function downw(){document.image.width.value=parseInt(docume nt.image.width.value)-1;
    resize();}
    function over_downw(){downw();
    change = 1;
    changetime = setTimeout("fast_downw()","600");}
    function fast_downw(){clearTimeout(changetime);
    downw();
    fast = setTimeout("fast_downw()","100");}
    function uph(){document.image.height.value=parseInt(documen t.image.height.value)+1;
    resize();}
    function over_downh(){downh();
    change = 1;
    changetime = setTimeout("fast_downh()","600");}
    function fast_downh(){clearTimeout(changetime);
    downh();
    fast = setTimeout("fast_downh()","100");}
    function over_uph(){uph();
    change = 1;
    changetime = setTimeout("fast_uph()","600");}
    function fast_uph(){clearTimeout(changetime);
    uph();
    fast = setTimeout("fast_uph()","100");}
    function downh(){document.image.height.value=parseInt(docum ent.image.height.value)-1;
    resize();}
    function set(){
    document.image.width.value=document.changing.width ;
    document.image.height.value=document.changing.heig ht;}
    // End -->
    </SCRIPT>

    <META content="MSHTML 5.00.3504.2500" name=GENERATOR></HEAD>
    <BODY bgColor=#6699CC onload=set() vLink=#0000ff background="bg.jpg">


    <CENTER>
    <TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
    <TBODY>
    <TR>
    <TD align=middle width="99%">
    <CENTER>
    <FORM name=image>



    <INPUT name=image_file type=file>




    <INPUT name=show onclick=showimg(this.form) type=button value="Mostra Immagine">




    <font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Larghezza
    - Altezza</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
    </font></p>




    <INPUT name=width readOnly size=4>
    <font color="#666699"> <font color="#FFFFFF"> _____</font></font>
    <INPUT name=height readOnly size=4>




    </p>
    <TABLE border=1 bordercolor="#000033" cellspacing="4" cellpadding="4" width="121" height="70">
    <TBODY>
    <TR>
    <TD>
    <div align="center">[img]300801.gif[/img] </div>
    </TD>
    </TR>
    </TBODY>
    </TABLE>
    </FORM>
    <DIV class=divstyle style="LEFT: 50px; TOP: 250px">


    [img]300801.gif[/img]</P>
    </DIV>
    </CENTER>

    </TR>
    </TBODY>
    </TABLE>
    <CENTER>
    <CENTER>
    </CENTER>
    </CENTER></CENTER></BODY></HTML>

    Grazie
    Ciao
    [Sorridi domani sarà peggio]

  2. #2
    Utente di HTML.it L'avatar di iguane
    Registrato dal
    Sep 2001
    Messaggi
    1,633

    Re: Detect image size, JS

    Originariamente inviato da m_k_i
    Ciao a tutti,ho già postato sul forum scripting, ma non mi hanno saputo aiutare.

    Ho trovato uno script on-line che fa al caso mio, o almeno credo, dato che non ci sto capendo molto.

    Lo script riconosce la dimensione in pixel dell'immagine che andrò ad uploadare, e fin qui tutto bene.

    I problemi sono questi:

    Non sono un gran esperto di sintassi JS

    Lo script non riconosce le estensioni maiuscole (es. .jpg lo prende, .JPG no)

    Lo script visualizza l'immagine in anteprima piccola e ricliccando grande, mostrando le dimensioni, mentre io lo vorrei al primo click.

    Una volta riconosciute le dimensioni devo fare un controllo che mi dia una alert se l'immagine è più alta o più larga di 450 pixels.


    Mi aiutate a modificare lo script?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML><HEAD><TITLE>pubblicazione foto</TITLE>
    <META content="text/html; charset=windows-1252" http-equiv=Content-Type>


    <STYLE>.divstyle {
    HEIGHT: 0px; POSITION: absolute; WIDTH: 0px
    }
    </STYLE>

    <SCRIPT language=JavaScript>

    function showimg(form)
    {
    adres = form.image_file.value;
    index = adres.indexOf(".gif");
    index = index + adres.indexOf(".jpg");
    index = index + adres.indexOf(".bmp");
    if (form.image_file.value == "")
    {alert("Nessuna Immagine trovata");}
    else
    {if (index == -3){alert("Formato Immagine non riconosciuto");
    form.width.value=0;
    form.height.value=0;}
    else
    {
    var img_obj = new Image();
    img_obj = form.image_file.value;
    document.changing.src = img_obj;
    document.changing2.src= img_obj;
    document.changing.width = document.changing2.width;
    document.changing.height = document.changing2.height;
    set();
    }
    }
    }
    fast = 0;
    change = 0;
    function upw(){
    document.image.width.value=parseInt(document.image .width.value)+1;
    resize();}
    function over_upw(){upw();
    change = 1;
    changetime = setTimeout("fast_upw()","600");}
    function fast_upw(){clearTimeout(changetime);
    upw();
    fast = setTimeout("fast_upw()","100");}
    function clt(){
    if (change == 1){clearTimeout(changetime);}
    clearTimeout(fast);
    change = 0;
    }
    function resize() {document.changing.height = document.image.height.value;
    document.changing.width = document.image.width.value;}
    function downw(){document.image.width.value=parseInt(docume nt.image.width.value)-1;
    resize();}
    function over_downw(){downw();
    change = 1;
    changetime = setTimeout("fast_downw()","600");}
    function fast_downw(){clearTimeout(changetime);
    downw();
    fast = setTimeout("fast_downw()","100");}
    function uph(){document.image.height.value=parseInt(documen t.image.height.value)+1;
    resize();}
    function over_downh(){downh();
    change = 1;
    changetime = setTimeout("fast_downh()","600");}
    function fast_downh(){clearTimeout(changetime);
    downh();
    fast = setTimeout("fast_downh()","100");}
    function over_uph(){uph();
    change = 1;
    changetime = setTimeout("fast_uph()","600");}
    function fast_uph(){clearTimeout(changetime);
    uph();
    fast = setTimeout("fast_uph()","100");}
    function downh(){document.image.height.value=parseInt(docum ent.image.height.value)-1;
    resize();}
    function set(){
    document.image.width.value=document.changing.width ;
    document.image.height.value=document.changing.heig ht;}
    // End -->
    </SCRIPT>

    <META content="MSHTML 5.00.3504.2500" name=GENERATOR></HEAD>
    <BODY bgColor=#6699CC onload=set() vLink=#0000ff background="bg.jpg">


    <CENTER>
    <TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
    <TBODY>
    <TR>
    <TD align=middle width="99%">
    <CENTER>
    <FORM name=image>



    <INPUT name=image_file type=file>




    <INPUT name=show onclick=showimg(this.form) type=button value="Mostra Immagine">




    <font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FFFFFF">Larghezza
    - Altezza</font><font face="Verdana, Arial, Helvetica, sans-serif" size="2">
    </font></p>




    <INPUT name=width readOnly size=4>
    <font color="#666699"> <font color="#FFFFFF"> _____</font></font>
    <INPUT name=height readOnly size=4>




    </p>
    <TABLE border=1 bordercolor="#000033" cellspacing="4" cellpadding="4" width="121" height="70">
    <TBODY>
    <TR>
    <TD>
    <div align="center">[img]300801.gif[/img] </div>
    </TD>
    </TR>
    </TBODY>
    </TABLE>
    </FORM>
    <DIV class=divstyle style="LEFT: 50px; TOP: 250px">


    [img]300801.gif[/img]</P>
    </DIV>
    </CENTER>

    </TR>
    </TBODY>
    </TABLE>
    <CENTER>
    <CENTER>
    </CENTER>
    </CENTER></CENTER></BODY></HTML>

    Grazie
    Ciao
    Allora per inserire altre estensioni aggiungi queste righe di codice nella prima function

    index = index + adres.indexOf(".JPG");
    index = index + adres.indexOf(".png");
    index = index + adres.indexOf(".BMP");
    index = index + adres.indexOf(".JPG");
    ecc...

    Il secondo problema non ho capito bene

    ...I'm insane in the brain...

  3. #3
    Intanto grazie per la prima risposta.

    Il problema è questo:

    Questo js mi serve in una pagina da dove l'utente farà l'upload di un'immagine su uno spazio web apposito per un sito di "incontri", per evitare che mandino immagini troppo grandi, volevo mettere un controllo lato client, per evitare di ingolfare il database.

    Quindi, una volta che lo script ha fatto il detect delle dimensioni dell'immagine, devo controllare che l'altezza e la larghezza non siano maggiori di 450 per esempio, ma non essendo molto pratico di ssintassi Js, non so dove mettere l' "if" e come metterlo.
    [Sorridi domani sarà peggio]

  4. #4
    Utente di HTML.it L'avatar di iguane
    Registrato dal
    Sep 2001
    Messaggi
    1,633
    subito dopo index = index + adres.indexOf(".bmp");

    scrivi

    if(document.image.width.value>tuo valore | document.image.height.value>tuo valore2){
    alert('Immagine troppo grande')
    return false;
    }

    Prova così

    ...I'm insane in the brain...

  5. #5
    Non funziona.

    guarda, la pagina è questa:

    http://www.rgbmultimedia.com/foto

    Praticamente quando clicchi la prima volta "acquisisce l'immagine e la mette su un layer, al secondo click la mette su un altro layer e mi dice quanto è grande, forse li controllo va dopo il secondo click?
    [Sorridi domani sarà peggio]

  6. #6
    Utente di HTML.it L'avatar di iguane
    Registrato dal
    Sep 2001
    Messaggi
    1,633
    Originariamente inviato da m_k_i
    Non funziona.

    guarda, la pagina è questa:

    http://www.rgbmultimedia.com/foto

    Praticamente quando clicchi la prima volta "acquisisce l'immagine e la mette su un layer, al secondo click la mette su un altro layer e mi dice quanto è grande, forse li controllo va dopo il secondo click?

    dopo

    set();

    prova a scrivere
    upw();

    ...I'm insane in the brain...

  7. #7
    Grande!

    Prende forma, ora praticamente manca solo la possibilità di fare tutto con un solo click, e la possibilità di inserire un'altra immagine dopo che ha dato l'errore delle dimensioni.

    L'ho ripubblicato

    http://www.rgbmultimedia.com/foto
    [Sorridi domani sarà peggio]

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.