New course! Every coder should learn Generative AI!
Try a free lesson+ 25
How to get an image and control it's size using JavaScript? [SOLVED]
I'm making a code where I need to get an image drawn only once. I've got the url, but none of the suggestions in the StackOverflow about how to get it is working in the Sololearn console. It'll be very cool if someone helped🙂 //Please inform me if further details is required
16 Answers
+ 14
Cbr✔[ Most active ], can you please tell me more about this library? And if I can't work it out in Sl, is there any other alternative to get an image in the output? Like web perhaps? If yes, how?
+ 12
Airree how to get one in canvas?
+ 11
Lυƈιҽɳҽ Bυʅԋõҽʂ Mαƚƚσʂ 🐢 , thank you 😊
+ 8
The exemple
<html>
<head>
<script type="text/javascript">
function aumentaImagem(nome){ nome.width = nome.width+50; nome.height = nome.height+50; } function tamanhoNormal(nome){ nome.width = 150; nome.height = 30; }
</script>
</head>
<body>
<img src="http://www.linhadecomando.com/logo-linhadecomando.png" name="logo" width="150" height="30" onclick="aumentaImagem(logo);" ondblclick="tamanhoNormal(logo);" style="cursor:pointer" />
</body>
</html>
+ 8
Lυƈιҽɳҽ Bυʅԋõҽʂ Mαƚƚσʂ 🐢
Ohh thanks it's useful..
+ 5
If you want build an image, look at this example of a circle and a square drawn in JavaScript.
One case without Javascript. After the header data, comments and the title "Normal HTML here."
It starts with the <svg> tag, determines the circle properties with the <circle> whose attributes are cx (position on the evaluated axis), cy (position on the axis). ordinate), r (radius), and fill.
For drawing the rectangle, the <rect> tag with its attributes, x (position in advertised), y (position in the ordinate axis), width (width), height (height), stroke (contour line) and fill ( fill).
Then they wrap the <svg> tag and the html tags. Such <circle> and <rect> do not need to be enclosed with the same text. Just use />.
+ 5
<! DOCTYPE html>
<html>
<head>
<title> Theory - Drawings - http://brazilis.github.io </title>
</head>
<body>
<! - Examples of drawings in svg - http://braziljs.github.io/eloquente-javascript/chapters/design-com-canvas/-->
<p> Normal HTML here. </p>
<svg xmlns = "http://www.w3.org/2000/svg">
<circle r = "50" cx = "50" cy = "50" fill = "red" />
<rect x = "120" y = "5" width = "90" height = "90" stroke = "blue" fill = "none" />
</svg>
</body>
</html>
+ 5
Functions and Parameters
In this other example (see https://www.line.com.com/javascript/javascript-changing-size-of-a-image), He throws the <script> tag between such <head> </head>, a function that enlarges the image (id name), concatenated name is width, = name, width +50 and the same for height; one for normal size (id name), concatenated name with width and assigns value, name with height and also assigns a value.
In such a <body> he launches the image and the oneclick event (aumented size) with the image and id "logo" function. Then the ondblclick event with the normal size function. Then determine the cursor model.
+ 5
[Tutorial] Upload content from your device to CodePlayground - The Dropbox way
https://code.sololearn.com/WW6t4B73kJVz/?ref=app
+ 4
Do you want to insert an image in the console?
+ 4
Ehh...
Console is only for TEXT
you still have the entire document to display images
+ 4
window.onload=()=>{
var img=new Image();
img.src="http://...";
img.width="120px";
img.height="120px";
document.body.appendChild(img);
}
+ 3
Do you want to insert an image
+ 2
Pls can you tell me more about it
0
Wow!!!..
So beautiful u 👉👤are.....
0
Are you talking about a new image or which already has?
Often have questions like this?
Learn more efficiently, for free:
Hot today
Android studio Tutorial
0 Votes
Why output is 0 for from_chars
2 Votes
Cyber security
0 Votes
Why did my code got deleted?
0 Votes
Bash
0 Votes
Personal chat
1 Votes
Help
0 Votes
Error...
1 Votes