/    Sign up×
Community /Pin to ProfileBookmark

insert image dialog

Copy linkTweet thisAlerts:
Jun 16.2004

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.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@crh3675Jun 16.2004 — Where is iView defined?
Copy linkTweet thisAlerts:
@crh3675Jun 16.2004 — <i>
</i>&lt;html&gt;
&lt;body&gt;
&lt;/body&gt;

&lt;script&gt;
function getImageDims(imgurl){
var oImage = new Image();
oImage.setAttribute("src","file:///"+imgurl);
oImage.onload=new Function(alert("Width="+oImage.width+"nHeight="+oImage.height));
document.body.appendChild(oImage)
}

getImageDims("c:\Temp\feast_left.jpg");

&lt;/script&gt;

Copy linkTweet thisAlerts:
@starrwriterauthorJun 16.2004 — [i]Originally posted by crh3675 [/i]

[B]<i>
</i>&lt;html&gt;
&lt;body&gt;
&lt;/body&gt;

&lt;script&gt;
function getImageDims(imgurl){
var oImage = new Image();
oImage.setAttribute("src","file:///"+imgurl);
oImage.onload=new Function(alert("Width="+oImage.width+"nHeight="+oImage.height));
document.body.appendChild(oImage)
}

getImageDims("c:\Temp\feast_left.jpg");

&lt;/script&gt;

 [/B][/QUOTE]

Judging from your script, I guess I didn't explain what I'm looking for very clearly. Let me re-phrase it:

I want a javascript that will (1)read image URL and image dimensions when the user selects an image from a browse button (2)write a correct image tag like <img src="C:/Windows/Desktop/photo.jpg" width="300" height="250"> (3)display the image tag in a single-line alert. Displaying the selected image is not necessary.

I can easily turn the alert into a document.write function, but getting the image tag created correctly seems to be nearly impossible. My existing script fails to correctly copy the load value (image URL) with the slashes in place.
Copy linkTweet thisAlerts:
@crh3675Jun 16.2004 — <i>
</i>&lt;html&gt;
&lt;body&gt;
&lt;/body&gt;

&lt;script&gt;
function getImageDims(imgurl){
var oImage = new Image();
oImage.setAttribute("src","file:///"+imgurl);
oImage.onload=new Function(iView.document.write("&lt;img src=""+oImage.src+"" height=""+oImage.height+"" width=""+oImage.height+""&gt;"));
document.body.appendChild(oImage)
}

getImageDims("c:\Temp\feast_left.jpg");

&lt;/script&gt;
Copy linkTweet thisAlerts:
@starrwriterauthorJun 17.2004 — [COLOR=blue]getImageDims("c:Tempfeast_left.jpg");[/COLOR]

What in the world does that line mean? It refers to a specific image that won't exist on the user's hard drive.

Plus your script only displays width= and height= attributes when I need a complete image tag to be created from an image selected by the user through a browse button. I don't need the image displayed.
Copy linkTweet thisAlerts:
@crh3675Jun 18.2004 — Go ask for some FREE help from someone who actually CARES about your crappy problem. If you had half a mind you would understand that the image value I put in the function call was an example. Also, if you understood Javascript enough, you would just remove the line that adds the image to the document. You could have said "Thanks for the help".

<i>
</i>
&lt;html&gt;


&lt;script&gt;
function getImageDims(imgurl){
var oImage = new Image();
oImage.src="file:///"+imgurl;
oImage.style.visibility="hidden";
oImage.onload=new Function(alert("&lt;img src=""+oImage.src+"" height=""+oImage.height+"" width=""+oImage.width+""&gt;"));
document.body.appendChild(oImage)
}


&lt;/script&gt;
&lt;body&gt;
&lt;form&gt;&lt;input type="file" name="load"&gt; &lt;input type="button" value="Get Image Data" onclick="getImageDims(document.forms[0].load.value)"&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;



The problem you are going to have is waiting for the image to be completely loaded

oImage.complete

YOu will need a script that will test if oImage.complete==true. Otherwise, your script will return width=0 and height=0
Copy linkTweet thisAlerts:
@starrwriterauthorJun 19.2004 — That works like you said -- after the image is finished loading. Thanks for the help.
×

Success!

Help @starrwriter spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.30,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...