Resize an image from data entered in a textbox

how to resize multiple images in word
how to resize a picture in word
how to resize a text box in word to a specific size
how to resize an image in powerpoint
auto resize input text
how to enlarge a picture without losing quality in microsoft word
how to insert picture in word same size
how to resize a picture in word 2016

ive a form with a image , button and textbox. ive to resize the images height and width to what ever is entered in the textbox, when the button is clicked. My image just disappears when the button is clicked.

heres my code

<!DOCTYPE HTML>
<html>
<head>
    <title>Resize Image</title>
</head>
<body>
<script>
    function resizeimage()
    {
        var theImg = document.getElementById('image');
        theImg.height = size;
        theImg.width = size;
    }
    var size=parseInt(document.getElementById('txtbox'));   
</script>


<form name ="ResizeImage">
<img src = "cookie.jpg" id="image">
</br>
<input type=button value="Resize" onclick="resizeimage()">
</br>
<input type=text id="txtbox"

</form>
</body>
</html>

Apart from the HTML problems (please run it through the validator), the main problem is that the part of code that reads the size of the image is outside of the function. On page load, this is what happens.

  1. The function resizeimage() is defined
  2. The var size is set to whatever is in the input at that point
  3. The contents of the page are loaded.

At 2. the input doesn't even exist yet because 3. isn't done yet, so var size is set to undefined. It never changes after that, because the function resizeimage() does not try to read the size of the image again.

Also, document.getElementById returns an element. You will have to read what the user put into it by using it's .value property

Try this:

function resizeimage()
{
    var size=parseInt(document.getElementById('txtbox').value);   
    var theImg = document.getElementById('image');
    theImg.height = size;
    theImg.width = size;
}

Working example: http://jsfiddle.net/KZH5p/

Resize a picture, shape, text box, or other object, You can change the size of pictures, shapes, text boxes, or other objects by either Microsoft Dynamics 365 � Microsoft 365 � Microsoft Industry � Data platform maybe a picture or a text box, you have a number of options for resizing the object. Under Scale, enter the percentage of the original height or width you want the� After selecting an object, maybe a picture or a text box, you have a number of options for resizing the object. Resize by dragging: Select the object, move the mouse pointer over one of the handles and then click and drag the mouse. Dragging while keeping the center in the same place: Select the object.

I would cache the ids first:

var input = document.getElementById('txtbox');
var theImg = document.getElementById('image');

function resizeimage() {
  var size = input.value;
  theImg.height = size;
  theImg.width = size;
}

Change the size of a picture, shape, text box, or WordArt, Resize an object by dragging to size, exact measurements, or setting proportions. This code will store a description of the image in some controls and load images in the picture box. 3) Create a method namedScaleByPercent(Image imgPhoto, int percent) which will resize an image and return Image object which is resized by a percent. //This method will resize image by scale percentace.

function changeDogsSize() {
    var dogSize = parseInt((id_input).value);
    id_dog.width = dogSize;
}
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
     <div class="container bg-light mt-3"></div>

     <!--changing dogs image-->
     <div class="container">
         <img id="id_dog" src="https://i.pinimg.com/originals/e4/9d/75/e49d755afcd02cdbf39d374b42a10ecd.jpg"  alt="dog">
         <input id="id_input" type="text" class="form-control mt-4" id="exampleInputAmount" placeholder="enter img width">
         <button id="id_changeBtn" onclick="changeDogsSize()" type="button" class="btn btn-secondary btn-lg mt-3 text-dark">Change</button>
     </div>
</body>
</html>

Auto-Growing Inputs & Textareas, By default, <input> and <textarea> elements don't change size based on the content they contain. What about the idea that form data is often serialized and sent along, get auto-resizing for free from the browser by using non-input elements, Expanding Images using HTML5's contenteditable tabindex. On the PicPick splash screen, click the “Open an existing image” link, and then find the image you want to resize. You can also drag an image from File Explorer onto an open PicPick window. On the toolbar, click the “Resize” button, and then click “Image Resize” on the dropdown menu. PicPick lets you resize by percentage or by pixels.

Textarea Tricks, Image as textarea background, disappears when text is entered. that don't support HTML5 placeholder attribute $("#example-three") .data("originalText", James Padolsey has a super nice jQuery script for auto resizing textareas (That's � Draw Your Own Text Box. You can also draw your own text box if you already have a size and placement in mind. Switch over to the “Insert” tab on Word’s Ribbon, and then click the “Text Box” button. In the dropdown menu, click the “Draw Text Box” command. Your pointer changes into a cross-hair symbol.

2 Methods to Match the Text Box Size with the Inside Text Size in , There and then you must have inserted text box into your Word document. However the Then on the right side area, check “Resize shape to fit text” box under “Autofit”. Next click You will see the text box has been converted to a picture. Text Box File damage is definitely a serious data disaster in nowadays. Even so� Also added input { padding-right: 0.5em; } so you can still resize it if it's value is full of text. Still seems to work in 2019 in Chrome. In Edge resize does not seem to work (but otherwise looks ok (graceful degradation)).

CSS resize property, Example. Here, the user can resize both the height and width of a <div> element: Here, we have used the resize property to disable the resizability: textarea { How can I dynamically have a textbox resized depending on what a user types in? For example, if I have <input type="text" size="20"> and a user types in something less than 20 characters then all is well, and the form will get printed out so the entire text can be seen.

Comments
  • Try theImg.style.height. I'm not sure if it'd work.
  • I think you should put var size=parseInt(document.getElementById('txtbox')); into the function, because now the size value is only initialized onload.