Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    insert image dialog

    I want to adapt the following script as a custom insert image dialog in my WYSIWYG editor, but I can't get it to write an image tag correctly.

    <head>
    <script>
    function getImageDims(imgurl)
    {
    var oImage = new Image();
    oImage.onload = new Function(
    'iView.document.write("<img src='+imgurl + ' width="+this.width + " height="+this.height)'
    );
    oImage.src = 'file:///' + imgurl;
    }
    </script>
    </head>
    <body>
    <input type="file" name="load"> <input type="button" value="Get Image Data" onclick="getImageDims(load.value)">

    The above produces the following image tag:
    <img src=C:WINDOWSDesktopme.jpg width=100 height=148

    Don't know why there are no /s in the url since they are displayed in the browse text field. And when I try to place a space between the url and the image name and add a > to close the tag, I just keep getting one javascript error message after another: object expected onclick, invalid whatever, etc.

    Can this script be salvaged to write a proper image tag? Whatever I change screws it up.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    This seems to work:
    PHP Code:
    <head>
    <
    script>
    function 
    getImageDims(imgurl){
        var 
    oImage = new Image();
        
    oImage.onload = function(){
            
    iView.document.write("<img src='"+imgurl+"' width='"+this.width"' height='"+this.height+"' />");
        };
        
    oImage.src "file:///"imgurl;
    }
    </script>
    </head>
    <body>
    <form name="f">
    <input type="file" name="load"> <input type="button" value="Get Image Data" onclick="getImageDims(f.load.value)">
    </form>
    <iframe width="400" height="400" name="iView"></iframe> 

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    That code will fail if the image filename contains an apostrophe. The img tag should use double quotes in the src attribute. The iframe reference will only work for IE.

    Here's the more cross-browser version:
    Code:
    function getImageDims(imgurl){
        var oImage = new Image();
        oImage.onload = function(){
            top.frames['iView'].document.write('<img src="'+imgurl+'" width="'+this.width+ '" height="'+this.height+'" />");
            top.frames['iView'].document.close();
        };
        oImage.src = "file:///"+ imgurl.replace(/\\/g,"/");;
    }
    But why Iframe? Why not use <img> tag that is initially hidden?
    Code:
    function getImageDims(imgurl){
        var oImage = new Image();
        oImage.onload = function(){
            var img=document.images['preview'];
            img.src=oImage.src;
            img.style.display='inline';
        };
        oImage.src = "file:///"+ imgurl.replace(/\\/g,"/");;
    } 
    ...
    <img name="preview" src="" style="display:none" />
    Last edited by glenngv; 06-16-2004 at 05:56 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    I don't know if they are using an iframe or not I just assumed it based on the code.

    Good call on my lazy example as well. I took the easy way out and patched the code to "work" rather than pointing out all the possible flaws.

  • #5
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv
    That code will fail if the image filename contains an apostrophe. The img tag should use double quotes in the src attribute. The iframe reference will only work for IE.

    Here's the more cross-browser version:
    Code:
    function getImageDims(imgurl){
        var oImage = new Image();
        oImage.onload = function(){
            top.frames['iView'].document.write('<img src="'+imgurl+'" width="'+this.width+ '" height="'+this.height+'" />");
            top.frames['iView'].document.close();
        };
        oImage.src = "file:///"+ imgurl.replace(/\\/g,"/");;
    }
    Doesn't work (error message object expected in onclick line). And I don't think imgurl.replace(/\\/g,"/");; solves the problem of displaying no slashes in the image tag URL.

    But why Iframe? Why not use <img> tag that is initially hidden?
    Code:
    function getImageDims(imgurl){
        var oImage = new Image();
        oImage.onload = function(){
            var img=document.images['preview'];
            img.src=oImage.src;
            img.style.display='inline';
        };
        oImage.src = "file:///"+ imgurl.replace(/\\/g,"/");;
    } 
    ...
    <img name="preview" src="" style="display:none" />
    The iframe named iView is the editor window where the source code goes. The second script only displays the image. It doesn't read image dimensions or create an image tag to be inserted into the source code -- the 2 functions I want for an insert image dialog.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    I forgot to change the double quote to single quote

    top.frames['iView'].document.write('<img src="'+imgurl+'" width="'+this.width+'" height="'+this.height+'" />");
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv
    I forgot to change the double quote to single quote

    top.frames['iView'].document.write('<img src="'+imgurl+'" width="'+this.width+'" height="'+this.height+'" />");
    Not even close, but I finally got the image tag created with only one problem left: instead of just copying the URL as it is displayed in the <input type="file" text field, the script removes the back slashes before it assembles the image tag. This is the alert text I get from the script:

    <img src="C:WindowsDesktopImagesphoto1.jpg width="300" height="250" border="0">

    Why does the script below remove the back slashes? And how can I fix this problem? It must have something to do with imgurl not being clearly defined as the absolute file path of the image.

    function getImageDims(imgurl)
    {
    var oImage = new Image();
    oImage.onload = new Function(
    'alert("<img src='+imgurl + ' width="+this.width + " height="+this.height + [" border=0>"])'
    );
    oImage.src = 'file:' + imgurl;
    }
    </script>
    </head>
    <body>
    <input type="file" name="load"> <input type="button" value="Get Image Data" onclick="getImageDims(load.value)">

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Why are you still using your original function?

    You have to replace "\" with "/" as I did in my solution.
    Try copying the function I posted and see if it works. Of course, you have to change the double quote typo I had.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    In your onload function try using this.src rather than imgurl:

    '<img src="'+this.src+''...

  • #10
    New Coder
    Join Date
    May 2004
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by JohnKrutsch
    In your onload function try using this.src rather than imgurl:

    '<img src="'+this.src+''...
    I finally got this to work:

    alert("<img src='"+load.value+"' width='"+this.width+"' height='"+this.height+"' border='0'>");

    Thanks for all the help from you guys.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Your previous code didn't work because you're using the Function constructor which evaluates on the global scope just like eval statement does. If you use anonymous function which JohnKrutsch and I used, the code will work.

    oImage.onload = function(){ //anonymous function
    alert('<img src="'+imgurl+'" width="'+this.width+ '" height="'+this.height+'" />');
    };
    Last edited by glenngv; 06-18-2004 at 04:25 AM.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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