Ionic 4, Angular 7 und Cordova Bild zuschneiden und hochladen

Blog

Ionic 4, Angular 7 und Cordova Bild zuschneiden und hochladen

Die umfassende Schritt-für-Schritt-Anleitung zum Zuschneiden und Hochladen von Bildern mit Ionic 4, Angular 7 und Cordova. Wir werden Native Ionic Cordova Crop, File Transfer Plugins und deren Abhängigkeiten verwenden. In diesem Tutorial verwenden wir unsere bestehende Uploader-API, die Sie auf unserer GitHub die es Node.js, Express.js und Multer verwendet. Oder Sie können Ihr eigenes Back-End oder eine eigene API verwenden, die die HTML-Formularcodierung |_+_| verwendet. Das Szenario befindet sich in der Ionic 4-App. Klicken Sie im Vorschaubild auf die Schaltfläche Kamera, dann wird die Bildauswahl geöffnet. Nachdem das Bild ausgewählt wurde, wird ein Popup zum Zuschneiden angezeigt, das Sie nach Belieben zuschneiden können, und dann in die API hochladen. Nach dem erfolgreichen Upload zeigt die Ionic 4-App eine Vorschau des Bilds nach URL an, das auf dem API-Server gespeichert wurde.



Inhaltsverzeichnis:

Die folgenden Tools, Frameworks und Module sind für dieses Tutorial erforderlich:

Bevor wir zu den Hauptschritten gehen, gehen wir davon aus, dass Sie Node.js installieren müssen. Als nächstes aktualisieren oder installieren Sie die neue Ionic 4 CLI, indem Sie die Terminal- oder Node-Befehlszeile öffnen und dann diesen Befehl eingeben.



multipart/form-data

Sie erhalten die neueste Ionic-CLI in Ihrem Terminal oder Ihrer Befehlszeile. Überprüfen Sie die Version, indem Sie diesen Befehl eingeben.

sudo npm install -g ionic

1. Erstellen Sie eine neue Ionic 4, Angular 7 und Cordova App



Geben Sie diesen Befehl in Ihr Terminal ein, um eine neue Ionic 4-App zu erstellen.

ionic --version 4.12.0

Wenn Sie diese Frage sehen, geben Sie einfach |_+_| . ein denn wir werden Cordova später installieren oder hinzufügen.

ionic start ionic4-crop blank --type=angular

Gehen Sie als Nächstes zum neu erstellten App-Ordner.

N

Führen Sie die Ionic 4 App wie gewohnt zum ersten Mal aus, aber vorher als |_+_| Geben Sie diesen Befehl ein, um |_+_| zu installieren.

Install the free Ionic Appflow SDK and connect your app? (Y/n) N

Öffnen Sie nun den Browser und Sie werden die Ionic 4 App mit iOS, Android oder Windows anzeigen. Wenn Sie eine normale leere Ionic 4-Anwendung sehen, können Sie mit den nächsten Schritten fortfahren.

Java-Script-Telefonnummernvalidierung

2. Installieren und konfigurieren Sie Bildzuschnitt, Dateiübertragungs-Plugins und Abhängigkeiten

Wir werden alle erforderlichen Plugins für dieses Tutorial installieren. Zuerst müssen wir Native Cordova-Plugins und Ionic 4 Angular 7 Module installieren, indem wir diese Befehle ausführen.

cd ./ionic4-crop

Als nächstes öffnen und bearbeiten Sie |_+_| Fügen Sie dann diese Importe hinzu.

lab

Fügen Sie diesen Import zu |_+_| . hinzu Anbieter.

@ionic/lab

3. Implementieren von Bildzuschnitt und Datei-Upload/-Transfer

Wir werden die vorhandene Home-Komponente oder -Seite verwenden, um Bildvorschau, Auswahl, Zuschneiden und Hochladen zu implementieren. Öffnen und bearbeiten Sie dazu |_+_| ersetzen Sie dann alle HTML-Tags durch diese.

npm install --save-dev @ionic/lab ionic serve -l

Um als Nächstes auf Android-Geräten auszuführen, geben Sie diesen Befehl ein, während das Gerät verbunden ist.

ionic cordova plugin add cordova-plugin-crop npm install @ionic-native/crop ionic cordova plugin add cordova-plugin-camera npm install @ionic-native/camera ionic cordova plugin add cordova-plugin-file-transfer npm install @ionic-native/file-transfer ionic cordova plugin add cordova-plugin-file npm install @ionic-native/file

Um auf einem iOS-Simulator oder -Gerät zu laufen, müssen wir es zuerst erstellen.

src/app/app.module.ts

Öffnen Sie dann die iOS-App und führen Sie sie aus dem XCode aus. Sie werden diese Ansicht von Ihrem Android-Gerät oder iOS-Simulator aus sehen.

Das ist das Tutorial für Ionic 4, Angular 7 und Cordova Crop and Upload Image. Sie können den vollständigen Quellcode von out erhalten GitHub .

js-Tabellenkomponentenansicht

#ionisch #eckig #cordova