développement back-end
tutoriel php
Compétences en développement PHP : comment implémenter la fonction de recadrage d'image
Compétences en développement PHP : comment implémenter la fonction de recadrage d'image
Compétences en développement PHP : Comment implémenter la fonction de recadrage d'image
Dans le développement de sites Web, nous rencontrons souvent le besoin de recadrer des images, comme le téléchargement d'avatars, la génération de vignettes d'images, etc. Cet article expliquera comment utiliser PHP pour implémenter la fonction de recadrage d'image et fournira des exemples de code spécifiques.
- Préparation
Avant de commencer, nous devons nous assurer que la bibliothèque GD est installée sur le serveur. La bibliothèque GD est une extension de PHP qui fournit des fonctions d'exploitation des images. S'il n'est pas installé, vous pouvez l'installer à l'aide de la commande suivante :
sudo apt-get install php7.2-gd
- Créer une page de recadrage
Tout d'abord, nous devons créer une page contenant le formulaire de téléchargement et l'aperçu du recadrage. Voici un exemple de code HTML simple :
<!DOCTYPE html>
<html>
<head>
<title>图片裁剪</title>
<style>
#uploadForm {
margin: 20px;
}
#imagePreview {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<form id="uploadForm" action="crop.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" required>
<input type="submit" value="上传">
</form>
<div id="imagePreview"></div>
<script>
var uploadForm = document.getElementById('uploadForm');
var imagePreview = document.getElementById('imagePreview');
uploadForm.addEventListener('change', function() {
var file = this['file'].files[0];
var reader = new FileReader();
reader.onload = function(e) {
imagePreview.innerHTML = '<img src="' + e.target.result + '" alt="Compétences en développement PHP : comment implémenter la fonction de recadrage d'image" >';
}
reader.readAsDataURL(file);
});
</script>
</body>
</html>La page comprend un formulaire de téléchargement et un conteneur pour afficher un aperçu recadré. Grâce au code JavaScript, nous pouvons afficher les images téléchargées par les utilisateurs en temps réel.
- Implémentation de la fonction de recadrage
Ensuite, nous devons créer un fichier PHP pour recevoir l'image téléchargée et effectuer l'opération de recadrage. Voici un exemple simple de code de recadrage :
<?php
// 获取上传的图片
$file = $_FILES['file'];
// 获取裁剪参数
$x = $_POST['x'];
$y = $_POST['y'];
$width = $_POST['width'];
$height = $_POST['height'];
// 创建一个新的图片资源
$image = imagecreatefromjpeg($file['tmp_name']);
// 创建裁剪后的图片资源
$croppedImage = imagecreatetruecolor($width, $height);
// 进行裁剪操作
imagecopy($croppedImage, $image, 0, 0, $x, $y, $width, $height);
// 保存裁剪后的图片
imagejpeg($croppedImage, 'cropped.jpg');
// 释放图片资源
imagedestroy($image);
imagedestroy($croppedImage);
echo '图片裁剪成功';
?>Dans cet exemple, nous obtenons d'abord l'image téléchargée et les paramètres de recadrage. Ensuite, créez une nouvelle ressource d’image et une ressource d’image recadrée. Ensuite, utilisez la fonction imagecopy()函数进行裁剪操作。最后，使用imagejpeg() pour enregistrer l'image recadrée. Notez que le chemin pour enregistrer l'image doit être modifié en fonction de la situation réelle. La fonction de recadrage peut être étendue en fonction des besoins, comme l'ajout de rotation, de mise à l'échelle et d'autres opérations.
- Améliorer l'interaction de la page
Enfin, nous pouvons ajouter la logique d'acquisition et de soumission des paramètres de recadrage dans le code JavaScript de la page de recadrage. Voici un exemple de code de démonstration complet :
<!DOCTYPE html>
<html>
<head>
<title>图片裁剪</title>
<style>
#uploadForm {
margin: 20px;
}
#imagePreview {
width: 200px;
height: 200px;
border: 1px solid #ccc;
margin-top: 20px;
}
#cropForm {
margin-top: 20px;
}
</style>
</head>
<body>
<form id="uploadForm" action="crop.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" required>
<input type="submit" value="上传">
</form>
<div id="imagePreview"></div>
<form id="cropForm" action="crop.php" method="post">
<input type="hidden" name="x">
<input type="hidden" name="y">
<input type="hidden" name="width">
<input type="hidden" name="height">
<input type="submit" value="裁剪">
</form>
<script>
var uploadForm = document.getElementById('uploadForm');
var imagePreview = document.getElementById('imagePreview');
var cropForm = document.getElementById('cropForm');
uploadForm.addEventListener('change', function() {
var file = this['file'].files[0];
var reader = new FileReader();
reader.onload = function(e) {
imagePreview.innerHTML = '<img src="' + e.target.result + '" alt="Compétences en développement PHP : comment implémenter la fonction de recadrage d'image" >';
}
reader.readAsDataURL(file);
});
cropForm.addEventListener('submit', function(e) {
e.preventDefault();
var image = imagePreview.querySelector('img');
var rect = image.getBoundingClientRect();
var x = rect.left - imagePreview.offsetLeft;
var y = rect.top - imagePreview.offsetTop;
var width = rect.width;
var height = rect.height;
cropForm.querySelector('[name="x"]').value = x;
cropForm.querySelector('[name="y"]').value = y;
cropForm.querySelector('[name="width"]').value = width;
cropForm.querySelector('[name="height"]').value = height;
cropForm.submit();
});
</script>
</body>
</html>Dans cet exemple, nous ajoutons un champ de saisie masqué au formulaire de recadrage pour stocker les paramètres de recadrage. Avant que le formulaire ne soit soumis, la position et la taille de l'image sont obtenues via le code JavaScript, puis les paramètres de recadrage sont renseignés dans les champs masqués et le formulaire est soumis.
Résumé
Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de recadrage d'image à l'aide de PHP. En téléchargeant le formulaire et le code JavaScript, nous pouvons prévisualiser l'image téléchargée par l'utilisateur en temps réel, et lorsque le formulaire de recadrage est soumis, les paramètres de recadrage sont transmis au script PHP d'arrière-plan pour l'opération de recadrage. Bien entendu, il ne s’agit que d’un exemple simple. Dans les applications réelles, des extensions fonctionnelles plus complexes peuvent être nécessaires en fonction de besoins spécifiques. J'espère que cet article vous aidera !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Partage de conseils Win11 : une astuce pour éviter de vous connecter avec un compte Microsoft
Mar 27, 2024 pm 02:57 PM
Partage de conseils Win11 : une astuce pour éviter la connexion au compte Microsoft Windows 11 est le dernier système d'exploitation lancé par Microsoft, avec un nouveau style de conception et de nombreuses fonctions pratiques. Cependant, pour certains utilisateurs, devoir se connecter à leur compte Microsoft à chaque démarrage du système peut être un peu ennuyeux. Si vous en faites partie, autant essayer les conseils suivants, qui vous permettront d'éviter de vous connecter avec un compte Microsoft et d'accéder directement à l'interface de bureau. Tout d’abord, nous devons créer un compte local dans le système pour nous connecter au lieu d’un compte Microsoft. L'avantage de faire cela est
Un incontournable pour les vétérans : Conseils et précautions pour * et & en langage C
Apr 04, 2024 am 08:21 AM
En langage C, il représente un pointeur qui stocke l'adresse d'autres variables ; & représente l'opérateur d'adresse, qui renvoie l'adresse mémoire d'une variable. Les conseils pour l'utilisation des pointeurs incluent la définition des pointeurs, le déréférencement des pointeurs et la garantie que les pointeurs pointent vers des adresses valides. Les conseils pour l'utilisation des opérateurs d'adresse incluent l'obtention d'adresses variables et le retour de l'adresse du premier élément du tableau lors de l'obtention de l'adresse d'un élément du tableau ; . Un exemple pratique démontrant l'utilisation d'opérateurs de pointeur et d'adresse pour inverser une chaîne.
Quelles sont les astuces pour les novices pour créer des formulaires ?
Mar 21, 2024 am 09:11 AM
Nous créons et éditons souvent des tableaux dans Excel, mais en tant que novice qui vient d'entrer en contact avec le logiciel, comment utiliser Excel pour créer des tableaux n'est pas aussi simple que pour nous. Ci-dessous, nous réaliserons quelques exercices sur certaines étapes de création de tables que les novices, c'est-à-dire les débutants, doivent maîtriser. Nous espérons que cela sera utile à ceux qui en ont besoin. Un exemple de formulaire pour les débutants est présenté ci-dessous : voyons comment le remplir ! 1. Il existe deux méthodes pour créer un nouveau document Excel. Vous pouvez cliquer avec le bouton droit de la souris sur un emplacement vide du fichier [Bureau] - [Nouveau] - [xls]. Vous pouvez également [Démarrer]-[Tous les programmes]-[Microsoft Office]-[Microsoft Excel 20**] 2. Double-cliquez sur notre nouvel ex
Guide de démarrage de VSCode : une lecture incontournable pour les débutants afin de maîtriser rapidement les compétences d'utilisation !
Mar 26, 2024 am 08:21 AM
VSCode (Visual Studio Code) est un éditeur de code open source développé par Microsoft. Il possède des fonctions puissantes et une prise en charge riche des plug-ins, ce qui en fait l'un des outils préférés des développeurs. Cet article fournira un guide d'introduction aux débutants pour les aider à maîtriser rapidement les compétences d'utilisation de VSCode. Dans cet article, nous présenterons comment installer VSCode, les opérations d'édition de base, les touches de raccourci, l'installation du plug-in, etc., et fournirons aux lecteurs des exemples de code spécifiques. 1. Installez d'abord VSCode, nous avons besoin
Astuces Win11 révélées : Comment contourner la connexion au compte Microsoft
Mar 27, 2024 pm 07:57 PM
Des astuces Win11 révélées : Comment contourner la connexion au compte Microsoft Récemment, Microsoft a lancé un nouveau système d'exploitation Windows11, qui a attiré une large attention. Par rapport aux versions précédentes, Windows 11 a apporté de nombreux nouveaux ajustements en termes de conception d'interface et d'améliorations fonctionnelles, mais il a également suscité une certaine controverse. Le point le plus frappant est qu'il oblige les utilisateurs à se connecter au système avec un compte Microsoft. . Certains utilisateurs sont peut-être plus habitués à se connecter avec un compte local et ne souhaitent pas lier leurs informations personnelles à un compte Microsoft.
Compétences en programmation PHP : comment accéder à la page Web en 3 secondes
Mar 24, 2024 am 09:18 AM
Titre : Conseils de programmation PHP : Comment accéder à une page Web en 3 secondes Dans le développement Web, nous rencontrons souvent des situations dans lesquelles nous devons passer automatiquement à une autre page dans un certain laps de temps. Cet article explique comment utiliser PHP pour implémenter des techniques de programmation permettant d'accéder à une page en 3 secondes et fournit des exemples de code spécifiques. Tout d'abord, le principe de base du saut de page est réalisé via le champ Location dans l'en-tête de la réponse HTTP. En définissant ce champ, le navigateur peut accéder automatiquement à la page spécifiée. Vous trouverez ci-dessous un exemple simple montrant comment utiliser P
Conseils pour utiliser les classes de formulaires Laravel : moyens d'améliorer l'efficacité
Mar 11, 2024 pm 12:51 PM
Les formulaires font partie intégrante de la rédaction d’un site Web ou d’une application. Laravel, en tant que framework PHP populaire, fournit des classes de formulaires riches et puissantes, rendant le traitement des formulaires plus facile et plus efficace. Cet article présentera quelques conseils sur l'utilisation des classes de formulaires Laravel pour vous aider à améliorer l'efficacité du développement. Ce qui suit explique en détail à travers des exemples de code spécifiques. Créer un formulaire Pour créer un formulaire dans Laravel, vous devez d'abord écrire le formulaire HTML correspondant dans la vue. Lorsque vous travaillez avec des formulaires, vous pouvez utiliser Laravel
Explication détaillée des compétences d'utilisation du symbole √ dans la zone de mots
Mar 25, 2024 pm 10:30 PM
Explication détaillée des conseils d'utilisation du symbole √ dans la zone Word. Dans le travail et les études quotidiens, nous avons souvent besoin d'utiliser Word pour l'édition et la composition de documents. Parmi eux, le symbole √ est un symbole courant, qui signifie généralement « droit ». L'utilisation du symbole √ dans la zone Word peut nous aider à présenter les informations plus clairement et à améliorer le professionnalisme et la beauté du document. Ensuite, nous présenterons en détail les compétences nécessaires pour utiliser le symbole √ dans la zone Mot, dans l'espoir d'aider tout le monde. 1. Insérez le symbole √ Dans Word, il existe de nombreuses façons d'insérer le symbole √. un
