Backend-Entwicklung
PHP-Tutorial
H-UI implementiert das Zuschneiden und Hochladen von Bildern (Codebeispiel)
H-UI implementiert das Zuschneiden und Hochladen von Bildern (Codebeispiel)
Wie realisiert H-UI das Zuschneiden und Hochladen von Bildern? In diesem Kapitel erfahren Sie, wie Sie H-UI zum Zuschneiden und Hochladen von Bildern verwenden. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Kein Unsinn mehr, gehen wir direkt zum Code:
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI 图片剪裁</title>
<link rel="stylesheet" type="text/css" href="css/hui.css" />
</head>
<body>
<header class="hui-header">
<div id="hui-back"></div>
<h1 id="HUI-nbsp">HUI </h1>
</header>
<div class="hui-wrap">
<div id="hui-img-cuter-select">
<div id="hui-img-cuter-t1">+</div>
<div id="hui-img-cuter-t2">请选择图片</div>
</div>
</div>
<div id="hui-footer">
<button type="button" class="hui-button hui-fl" style="margin:2px 0px 0px 8px;" id="selectImgBtn">选择照片</button>
<button type="button" class="hui-button hui-primary hui-fr" style="margin:2px 8px 0px 0px;" id="uploadBtn">保存照片</button>
</div>
<script type="text/javascript" src="js/hui.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/hui-image-cuter.js" charset="UTF-8"></script>
<script type="text/javascript">
/*
huiImgCuter 参数
1. 宽度和高度的比例 高度 / 宽度 默认 1
2. 最终保存图片的宽度 默认 200px 高度根据宽高比自动调整
*/
var cuter = new huiImgCuter();
//绑定底部的选择按钮
cuter.bindSelect("#selectImgBtn");
//保存照片
hui('#uploadBtn').click(function() {
//获取图片数据
var imgData = cuter.getImgData();
if(!imgData) {
hui.toast('请选择图片');
return;
}
hui.loading('上传图片...');
/*
//上传到服务端演示代码
hui.post(
'http://192.168.31.188/uper.php',
{img:imgData},
function(data){
hui.closeLoading();
hui.toast('上传成功!');
}
);
*/
setTimeout(function() {
hui.toast('上传成功，演示的！');
hui.closeLoading();
}, 2000);
});
</script>
</body>
</html>Serverseitiger Code (uper.php)
<?php
if(!empty($_POST)){
if(isset($_POST['pd'])){
$_POST['pd'] = str_replace('data:image/png;base64,', '', $_POST['pd']);
$img = uniqid().'.png';
file_put_contents($img, base64_decode($_POST['pd']));
exit($img);
}
}
?>Rendering :
Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird.
Das obige ist der detaillierte Inhalt vonH-UI implementiert das Zuschneiden und Hochladen von Bildern (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks
Jul 29, 2023 pm 04:21 PM
Schritte zum Implementieren des Hochladens und Anzeigens von Bildern mithilfe des CakePHP-Frameworks Einführung: In modernen Webanwendungen sind das Hochladen und Anzeigen von Bildern häufige Funktionsanforderungen. Das CakePHP-Framework stellt Entwicklern leistungsstarke Funktionen und praktische Tools zur Verfügung, die das Hochladen und Anzeigen von Bildern einfach und effizient machen. In diesem Artikel erfahren Sie, wie Sie das CakePHP-Framework zum Hochladen und Anzeigen von Bildern verwenden. Schritt 1: Erstellen Sie ein Datei-Upload-Formular. Zuerst müssen wir in der Ansichtsdatei ein Formular erstellen, damit Benutzer Bilder hochladen können. Das Folgende ist ein Beispiel dafür
Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern
Nov 21, 2023 am 09:08 AM
WeChat-Applet implementiert Bild-Upload-Funktion Mit der Entwicklung des mobilen Internets ist das WeChat-Applet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. WeChat-Miniprogramme bieten nicht nur eine Fülle von Anwendungsszenarien, sondern unterstützen auch vom Entwickler definierte Funktionen, einschließlich Funktionen zum Hochladen von Bildern. In diesem Artikel wird erläutert, wie die Bild-Upload-Funktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitende Arbeiten Bevor wir mit dem Schreiben von Code beginnen, müssen wir die WeChat-Entwicklertools herunterladen und installieren und uns als WeChat-Entwickler registrieren. Gleichzeitig müssen Sie auch WeChat verstehen
So verwenden Sie PHP und Vue, um die Funktion zum Hochladen von Bildern zu implementieren
Sep 25, 2023 pm 03:17 PM
Verwendung von PHP und Vue zur Implementierung der Bild-Upload-Funktion In der modernen Webentwicklung ist die Bild-Upload-Funktion eine sehr häufige Anforderung. In diesem Artikel wird detailliert beschrieben, wie PHP und Vue zum Implementieren der Bild-Upload-Funktion verwendet werden, und es werden spezifische Codebeispiele bereitgestellt. 1. Frontend-Teil (Vue) Zuerst müssen Sie ein Formular zum Hochladen von Bildern im Frontend erstellen. Der spezifische Code lautet wie folgt:<template><div><inputtype="fil
Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie
Oct 08, 2023 am 10:58 AM
Umgang mit dem Hochladen und Komprimieren von Bildern bei der Entwicklung der Vue-Technologie In modernen Webanwendungen ist das Hochladen von Bildern eine sehr häufige Anforderung. Aus Gründen der Netzwerkübertragung und -speicherung kann das direkte Hochladen von Originalbildern mit hoher Auflösung jedoch zu langsamen Upload-Geschwindigkeiten und einer großen Verschwendung von Speicherplatz führen. Daher ist das Hochladen und Komprimieren von Bildern sehr wichtig. Bei der Entwicklung der Vue-Technologie können wir einige vorgefertigte Lösungen für das Hochladen und Komprimieren von Bildern verwenden. Im Folgenden wird die Verwendung von vue-upload-comone vorgestellt
Beim Hochladen und Zuschneiden von Bildern sind bei Verwendung der Vue-Entwicklung Probleme aufgetreten
Oct 08, 2023 pm 04:12 PM
Titel: Probleme und Lösungen beim Hochladen und Zuschneiden von Bildern in der Vue-Entwicklung. Einführung: Bei der Vue-Entwicklung sind das Hochladen und Zuschneiden von Bildern häufige Anforderungen. In diesem Artikel werden die bei der Vue-Entwicklung auftretenden Probleme beim Hochladen und Zuschneiden von Bildern vorgestellt und Lösungen sowie spezifische Codebeispiele bereitgestellt. 1. Problem beim Hochladen von Bildern: Durch Auswahl der Schaltfläche zum Hochladen von Bildern kann das Dateiauswahlfeld nicht ausgelöst werden: Dieses Problem liegt normalerweise daran, dass das Ereignis nicht korrekt gebunden ist oder das gebundene Ereignis nicht wirksam wird. Sie können das Klickereignis in der Vorlage binden und die Dateiauswahlbox in der entsprechenden Methode auslösen. Codebeispiel:
So verwenden Sie ThinkPHP6 zum Hochladen von Bildern
Jun 20, 2023 pm 09:25 PM
Mit der Entwicklung des Internets ist das Hochladen von Bildern zu einem wesentlichen Merkmal bei der Entwicklung von Websites und Anwendungen geworden. Im Bereich PHP hat sich ThinkPHP6 zu einem sehr beliebten Entwicklungsframework entwickelt. In diesem Artikel stellen wir vor, wie Sie ThinkPHP6 zum Implementieren des Bild-Uploads verwenden. 1. Projekt und Controller erstellen Zuerst müssen wir ein neues ThinkPHP6-Projekt erstellen. Sie können es mit Composer installieren oder die neueste Version von der offiziellen Website herunterladen. Geben Sie nach Abschluss der Installation in die Konsole ein
So implementieren Sie das Hochladen und Zuschneiden von Bildern in der Vue-Technologieentwicklung
Oct 10, 2023 pm 12:46 PM
Für die Implementierung des Hochladens und Zuschneidens von Bildern in der Vue-Technologieentwicklung sind bestimmte Codebeispiele erforderlich. In der modernen Webentwicklung sind das Hochladen und Zuschneiden von Bildern eine der häufigsten Anforderungen. Als beliebtes Front-End-Framework bietet Vue.js eine Fülle von Tools und Plug-Ins, die uns bei der Umsetzung dieser Funktionen unterstützen. In diesem Artikel wird erläutert, wie das Hochladen und Zuschneiden von Bildern in der Vue-Technologieentwicklung implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. Die Durchführung des Bild-Uploads kann in zwei Schritte unterteilt werden: Bilder auswählen und Bilder hochladen. In Vue können Sie Plugins von Drittanbietern verwenden, um dies zu vereinfachen
So lösen Sie das Problem mit der Anzeige des Bild-Upload-Vorschau-Modalfelds in der Vue-Entwicklung
Jul 01, 2023 pm 01:13 PM
So lösen Sie das Problem der Anzeige des modalen Bild-Upload-Vorschaufelds in der Vue-Entwicklung. Bei der Vue-Entwicklung müssen wir häufig Bilder hochladen und in der Vorschau anzeigen. In diesem Fall stellt sich häufig die Frage, wie das Vorschaubild nach dem Hochladen des Bildes im modalen Feld angezeigt werden soll. In diesem Artikel wird eine Möglichkeit zur Lösung dieses Problems vorgestellt. Zuerst müssen wir der Vue-Komponente ein Eingabeelement zum Hochladen von Dateien hinzufügen, um die hochzuladende Bilddatei auszuwählen. Indem wir das Änderungsereignis des Datei-Uploads abhören, können wir das vom Benutzer ausgewählte Bild abrufen
