Heim > Artikel > Web-Frontend > Implementieren Sie die Funktion zum Zuschneiden von Bildern mit Vue.js

Implementieren Sie die Funktion zum Zuschneiden von Bildern mit Vue.js

青灯夜游nach vorne: 2020-10-19 17:45:492605Durchsuche

Haben Sie jemals eine Webanwendung geschrieben, die von Benutzern hochgeladene Bilder akzeptiert, nur um später festzustellen, dass Benutzer weiterhin Bilder in allen Formen und Größen bereitstellen, die das Thema Ihrer Website ruinieren? Die Arbeit mit Bildern im Web kann schnell mühsam werden – es sei denn, Sie verwenden die richtigen Tools.

Implementieren Sie die Funktion zum Zuschneiden von Bildern mit Vue.js

In diesem Tutorial erfahren Sie, wie Sie mithilfe von JavaScript-Bibliotheken Bilder im Browser bearbeiten, für die Speicherung auf dem Server vorbereiten und in Webprogrammen verwenden. Dazu verwenden wir Vue.js anstelle von nativem JavaScript.

Um zu sehen, was dieser Artikel erreichen soll, schauen Sie sich bitte das Bild oben an. Das Originalbild befindet sich links und die neue Bildvorschau rechts. Wir können das Zuschneidefeld verschieben und seine Größe ändern und das Vorschaubild ändert sich entsprechend. Benutzer können bei Bedarf Vorschaubilder herunterladen.

Wir verwenden eine Bibliothek namens Cropper.js, um die schwere Arbeit zu erledigen.

Erstellen Sie ein neues Vue.js-Projekt mit Bildzuschneideabhängigkeiten

Der erste Schritt besteht darin, ein neues Projekt zu erstellen und die erforderlichen Abhängigkeiten zu installieren. Es wird davon ausgegangen, dass Sie die Vue CLI installiert und konfiguriert haben.

Führen Sie den folgenden Befehl in der Befehlszeile aus:

vue create cropper-project

Wählen Sie bei Aufforderung die Standardoption aus. Dies wird ein einfaches Projekt sein, also machen Sie sich keine Gedanken über das Routing und so weiter.

Navigieren Sie zum neuen Projekt und führen Sie Folgendes aus:

npm install cropperjs --save

Der obige Befehl installiert Cropper.js in unserem Projekt. Es ist einfach, ein CDN zu verwenden, aber da wir ein Framework verwenden, das Webpack nutzt, ist die npm-Route am sinnvollsten.

Während unsere Abhängigkeiten installiert sind, muss noch etwas erledigt werden. Da ich npm verwende, füge ich keine CSS-Informationen hinzu, sondern nur JavaScript-Informationen. Wir müssen CSS-Informationen lokal oder über ein CDN einbinden. Dieser Artikel verwendet CDN.

Öffnen Sie die Datei public/index.html Ihres Projekts und fügen Sie das folgende HTML-Tag ein: public/index.html 并包含以下 HTML 标记：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>image-cropping</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.1/cropper.min.css">
</head>
<body>
    <noscript>
        <strong>
        We&#39;re sorry but image-cropping doesn&#39;t work properly without JavaScript enabled. 
        Please enable it to continue.
        </strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>
</html>

请注意，在 93f0f5c25f18dab9d176bd4f6de5d30e 标记中，我们包含了 cropper.min.css 文件。同样，只要你得到这个文件，如何获得CSS信息并不重要。如果没有 CSS 信息，我们的图像就不会有花哨的裁剪框。

在Vue.js项目中使用JavaScript裁剪图像

现在项目应该几乎已配置好并可以在网络上裁剪图像。为了保持我们的项目整洁，我们将创建一个新的Vue.js组件来处理我们所有的图像处理。

在项目中创建 src/components/ImageCropper.vue 文件，并包含以下样板代码：

<template>
    <div>
        <div class="img-container">
            <img ref="image" :src="src" crossorigin>
        </div>
        <img :src="destination" class="img-preview">
    </div>
</template>

<script>
    import Cropper from "cropperjs";
    export default {
        name: "ImageCropper",
        data() {
            return {
                cropper: {},
                destination: {},
                image: {}
            }
        },
        props: {
            src: String
        },
        mounted() { }
    }
</script>

<style scoped>
    .img-container {
        width: 640px;
        height: 480px;
        float: left;
    }
    .img-preview {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: 10px;
    }
</style>

对于这个例子，c9ccee2e6ea535a969eb3f532ad9fe89 标签的信息并不重要，它只是清理了页面，并没有从库中获得任何实际效果。

记下 d477f9ce7bf77f53fbcf36bec1b69b7a 块中出现的 src 和 destination 变量。这些变量表示用户通过 props 对象定义的源图像，以及已经被操作的目标图像。我们将能够通过 ref 变量直接访问源图像，这类似于在 DOM 对象上使用 querySelector。

虽然我们已经为裁剪图像做好了准备，但实际上并没有对它们做任何事情。我们将在 mounted 方法中配置 cropping 处理和事件，该方法将在视图初始化后触发。

mounted 方法看起来像这样：

mounted() {
    this.image = this.$refs.image;
    this.cropper = new Cropper(this.image, {
        zoomable: false,
        scalable: false,
        aspectRatio: 1,
        crop: () => {
            const canvas = this.cropper.getCroppedCanvas();
            this.destination = canvas.toDataURL("image/png");
        }
    });
}

调用该方法时，我们获得了对 d477f9ce7bf77f53fbcf36bec1b69b7a 块中的图像的引用。然后在初始化裁剪工具时使用图像，同时定义一些配置，这些配置并不是强制性的。

crop 方法是发生奇迹的地方。每当我们处理图像时，都会调用这个 crop 方法。当执行 crop 方法时，我们应该能够获取裁剪、缩放等信息，并从中创建新图像 —— 即目标图像。

这时我们已经创建了组件但尚未使用它。

打开项目的 src/App.vue 文件并包含以下内容：

<template>
    <div id="app">
        <ImageCropper src="/logo.png" />
    </div>
</template>

<script>
    import ImageCropper from "./components/ImageCropper.vue"
    export default {
        name: "app",
        components: {
            ImageCropper
        }
    }
</script>

<style></style>

请注意，我们已经导入了 ImageCropper 组件，并在 d477f9ce7bf77f53fbcf36bec1b69b7a 块中使用它。请记住，src 属性是 JavaScript 中的 props 之一。在我的示例中，有一个 public/logo.pngrrreee

Beachten Sie, dass wir im Tag 93f0f5c25f18dab9d176bd4f6de5d30e den Cropper eingefügt haben .min.css-Datei. Auch hier spielt es keine Rolle, wie Sie die CSS-Informationen erhalten, solange Sie die Datei erhalten. Ohne die CSS-Informationen hätte unser Bild nicht den schicken Zuschneiderahmen. 🎜

Bilder mit JavaScript in einem Vue.js-Projekt zuschneiden 🎜🎜Jetzt sollte das Projekt fast konfiguriert und bereit zum Zuschneiden von Bildern im Web sein. Um unser Projekt aufgeräumt zu halten, erstellen wir eine neue Vue.js-Komponente, die unsere gesamte Bildverarbeitung übernimmt. 🎜🎜Erstellen Sie die Datei `src/components/ImageCropper.vue` in Ihrem Projekt und fügen Sie den folgenden Standardcode ein: 🎜rrreee🎜Für dieses Beispiel die Informationen für den `c9ccee2e6ea535a969eb3f532ad9fe89`-Tag ist nicht wichtig, es bereinigt nur die Seite und hat keinen wirklichen Effekt aus der Bibliothek. 🎜🎜Beachten Sie die Variablen `src` und `destination`, die im Block `d477f9ce7bf77f53fbcf36bec1b69b7a` erscheinen. Diese Variablen stellen das vom Benutzer über das Objekt `props` definierte Quellbild und das manipulierte Zielbild dar. Wir können über die Variable `ref` direkt auf das Quellbild zugreifen, ähnlich wie bei der Verwendung eines `querySelector` für ein DOM-Objekt. 🎜🎜Obwohl wir die Bilder zum Zuschneiden vorbereitet haben, haben wir noch nichts daran gemacht. Wir werden die Beschneidungsbehandlung und Ereignisse in der Methode `mount` konfigurieren, die nach der Initialisierung der Ansicht ausgelöst werden. Die 🎜🎜`mounted`-Methode sieht folgendermaßen aus: 🎜rrreee🎜Wenn wir diese Methode aufrufen, erhalten wir einen Verweis auf das Bild innerhalb des `d477f9ce7bf77f53fbcf36bec1b69b7a`-Blocks. Verwenden Sie dann das Bild, wenn Sie das Zuschneidewerkzeug initialisieren, und definieren Sie einige Konfigurationen, die nicht obligatorisch sind. 🎜🎜Mit der Methode `crop` geschieht die Magie. Diese `crop`-Methode wird immer dann aufgerufen, wenn wir ein Bild verarbeiten. Wenn die Methode `crop` ausgeführt wird, sollten wir in der Lage sein, die Informationen zum Zuschneiden, Skalieren usw. abzurufen und daraus ein neues Bild zu erstellen – das Zielbild. 🎜🎜Zu diesem Zeitpunkt haben wir die Komponente erstellt, sie aber noch nicht verwendet. 🎜🎜Öffnen Sie die Datei `src/App.vue` des Projekts und fügen Sie den folgenden Inhalt ein: 🎜rrreee🎜Bitte beachten Sie, dass wir die Komponente `ImageCropper` importiert und in den `d477f9ce7bf77f53fbcf36bec1b69b7a`-Block. Denken Sie daran, dass das Attribut `src` eines der `props` in JavaScript ist. In meinem Beispiel gibt es eine Datei `public/logo.png`, die Sie bei Bedarf jederzeit ändern können. In einem realen Szenario würden Sie Bilder verwenden, die der Benutzer hochladen würde. 🎜

Wenn Sie lernen möchten, wie Sie Dateien hochladen (z. B. Bilder zuschneiden), können Sie sich mein vorheriges Tutorial „Dateien mit Vue.js auf einen Remote-Webserver hochladen“ ansehen.

Fazit

In diesem Artikel wird erläutert, wie Sie die Cropper.js-Bibliothek in einem Vue.js-Webprogramm verwenden, um Bilder zu bearbeiten. Dies ist nützlich, wenn Sie Bilder von Benutzern akzeptieren und diese als Teil eines Profils oder Ähnliches verwenden müssen, da Sie die Größe dieser Bilder auf eine einheitliche Größe ändern müssen, damit Ihr Design nicht beschädigt wird.

Die Verwendung der Bildzuschneidebibliothek unterscheidet sich nicht von der Verwendung von nativem JavaScript, es sind jedoch einige Dinge erforderlich, um mit HTML-Komponenten mithilfe von Vue.js zu interagieren.

Englische Originaladresse: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

Verwandte Empfehlungen:

Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)

vue-Tutorial-Empfehlung: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2020

Weitere Programmierkenntnisse finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Funktion zum Zuschneiden von Bildern mit Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css vue.js html npm webpack public Event JS 对象事件 dom https

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：So entwickeln Sie Chrome-Erweiterungen mit VueNächster Artikel：So entwickeln Sie Chrome-Erweiterungen mit Vue

In Verbindung stehende Artikel

Mehr sehen