Comment redimensionner en direct l’image d’arrière-plan en JavaScript

Posté Par: Windows2022tutosur: décembre 30, 2022Dans: TechPas De Commentaires

Comment redimensionner en direct l’image d’arrière-plan en JavaScript

Introduction

Dans ce tutoriel, nous allons créer un Comment redimensionner en direct l’image d’arrière-plan en JavaScript. Ce tutoriel a pour but de vous apprendre à redimensionner l’image d’arrière-plan définie. Cela couvrira toutes les fonctions importantes qui redimensionneront votre image d’arrière-plan. Je vais fournir un exemple de programme pour montrer le codage réel de ce tutoriel.

Ce tutoriel est simple et facile à comprendre, il suffit de suivre les instructions que j’ai fournies et vous pouvez le faire sans problème. Ce programme peut être utilisé sur n’importe quel système si vous souhaitez ajouter une fonctionnalité permettant de redimensionner vos images. Je ferai de mon mieux pour vous fournir le moyen le plus simple de créer ce programme Redimensionner l’image en direct. Faisons donc le codage.

Avant de commencer :

Ceci est le lien pour le modèle que j’ai utilisé pour la conception de la mise en page https://getbootstrap.com/.

Création de l’interface

C’est ici que nous allons créer une interface simple pour notre application. Ce code n’affichera que les images et les zones de texte. Pour le créer, copiez-le simplement et écrivez-le dans votre éditeur de texte, puis enregistrez-le sous index.html.

<!DOCTYPE html>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to Live Resize Background Image</h3>
		<hr style="border-top:1px dotted #ccc;"/>
			<center>
				<div class="form-inline">
					<input type="number" class="form-control" onkeyup="resizeHeight(this.value);"/>
					<input type="number" class="form-control" onkeyup="resizeWidth(this.value);"/>
			</center>

  


			<hr style="border-top:1px solid #000;"/>
			<center><img src="image.png"  id="result" height="300" width="500"/></center>

Création d’une fonction JavaScript

C’est là que se trouve la fonction principale de l’application. Ce code vous permettra de redimensionner vos images d’arrière-plan. Pour ce faire, copiez et écrivez simplement ce bloc de codes dans l’éditeur de texte et enregistrez-le sous script.js.

function resizeHeight(val){
	if(val > 600){
		val = 600;
		alert("Height Limit is 300");
	}
 
	document.getElementById('result').style.height=val+"px";
}
 
function resizeWidth(val){
	if(val > 800){
		val = 800;
		alert("Width Limit is 800");
	}
 
	document.getElementById('result').style.width=val+"px";
}

Dans ce code, nous créons simplement deux méthodes que nous utiliserons pour redimensionner notre image. Pour permettre à notre image d’être redimensionnée en direct dans le contenu html, nous lions simplement la valeur texboxes avec les tailles réelles de l’image. Chaque fois que vous entrez une valeur dans les zones de texte, la taille de l’image sera également redimensionnée dynamiquement.

Production:

Le Comment redimensionner en direct l’image d’arrière-plan en JavaScript le code source que je fournis peut être téléchargé ci-dessous. Veuillez cliquer sur le bouton de téléchargement.

Voilà, nous avons créé avec succès Comment redimensionner en direct l’image d’arrière-plan en JavaScript. J’espère que ce tutoriel simple vous aidera à ce que vous recherchez. Pour plus de mises à jour et de tutoriels, veuillez simplement visiter ce site. Profitez du codage !

Plus de tutoriels pour le langage JavaScript

Tutoriels JavaScript

Télécharger ici