+20

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

8/20/2019 3:22:55 PM

Humayra🇧🇩{EX∆MS}

18 Answers

New Answer

+13

Search console.image library... It's support CDN...i've never tried it on SL but it surely will work on your browser

+11

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?

+9

Airree how to get one in canvas?

+8

You'll need an external library to display image in the javascript console, though it won't work on SL but it'll work on your browsee

+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αƚƚσʂ 🐢 , thank you 😊

+8

Lυƈιҽɳҽ Bυʅԋõҽʂ Mαƚƚσʂ 🐢 Ohh thanks it's useful..

+7

Humayra Islam 🇧🇩🦄 you can do it by like this <img src="ingredients.png" id="i"> Inside script tag var img = document.getElementById("i"); For setting width img.style.width = size +"px"; Just same things for height img.style.height = size +"px"; you can use many other properties by using it if you are using any framework then it is much easier hope this helps you for more info mention me here happy coding!

+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.....