ホームページ > 記事 > ウェブフロントエンド > Vue.jsを使用して画像のトリミング機能を実装する

Vue.jsを使用して画像のトリミング機能を実装する

青灯夜游転載: 2020-10-19 17:45:492605ブラウズ

ユーザーがアップロードした画像を受け入れる Web アプリケーションを作成したのに、後からユーザーがサイトのテーマを台無しにするあらゆる形状やサイズの画像を提供し続けていることに気づいたという経験はありませんか? Web 上の画像を扱うのは、もちろん、適切なツールを使用しない限り、簡単に面倒になる可能性があります。

Vue.jsを使用して画像のトリミング機能を実装する

このチュートリアルでは、JavaScript ライブラリを使用してブラウザーで画像を操作し、サーバーに保存するために画像を準備し、Web プログラムで使用する方法を説明します。これは、ネイティブ JavaScript の代わりに Vue.js を使用して行います。

この記事が何を達成しようとしているのかを確認するには、上の図を見てください。元の画像が左側にあり、新しい画像のプレビューが右側にあります。クロップボックスを移動したりサイズ変更したりすると、プレビューイメージもそれに応じて変化します。ユーザーは必要に応じてプレビュー画像をダウンロードできます。

Cropper.js というライブラリを使用して、重い作業を行います。

画像トリミングの依存関係を含む新しい Vue.js プロジェクトを作成する

最初のステップは、新しいプロジェクトを作成し、必要な依存関係をインストールすることです。 Vue CLI がインストールされ、構成されていることを前提としています。

コマンドラインで次のコマンドを実行します:

vue create cropper-project

プロンプトが表示されたら、デフォルトのオプションを選択します。これは単純なプロジェクトなので、ルーティングなどについて心配する必要はありません。

新しいプロジェクトに移動し、次の操作を実行します。

npm install cropperjs --save

上記のコマンドにより、Cropper.js がプロジェクトにインストールされます。 CDN を使用するのは簡単ですが、Webpack を活用するフレームワークを使用しているため、npm ルートが最も合理的です。

依存関係はインストールされましたが、行う必要があることがもう 1 つあります。 npm を使用しているため、CSS 情報は含めず、JavaScript 情報のみを含めます。 CSS 情報をローカルまたは CDN 経由で含める必要があります。この記事では CDN を使用しています。

プロジェクトの 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 を使用して画像をトリミングする

これで、プロジェクトの設定がほぼ完了し、Web 上の画像をトリミングする準備が整いました。プロジェクトを整理しておくために、すべての画像処理を処理する新しい 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 オブジェクトを通じてユーザーが定義したソースイメージと、操作されたターゲットイメージを表します。 DOM オブジェクトで querySelector を使用するのと同様に、ref 変数を介してソースイメージに直接アクセスできます。

画像をトリミングする準備をしましたが、実際には何もしていません。ビューの初期化後にトリガーされる mounted メソッドでトリミング処理とイベントを構成します。

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 の 1 つであることを思い出してください。この例では、public/logo.png ファイルがあります。必要に応じて自由に変更してください。実際のシナリオでは、ユーザーがアップロードする画像を使用します。

ファイルをアップロードする方法 (画像のトリミングなど) を学習したい場合は、以前のチュートリアル「Vue.js を使用したリモート Web サーバーへのファイルのアップロード」を参照してください。

結論

この記事では、Vue.js Web プログラムで Cropper.js ライブラリを使用して画像を操作する方法について説明します。これは、テーマが壊れないように、それらの画像のサイズを一定のサイズに変更する必要があるため、ユーザーから画像を受け入れてプロファイルなどの一部として使用する必要がある場合に便利です。

画像トリミングライブラリの使用は、ネイティブ JavaScript を使用することと変わりませんが、Vue.js を使用して HTML コンポーネントを操作するには、いくつかのことが必要です。

英語の元のアドレス: https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

##関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)
#vue チュートリアルの推奨事項: 2020 年最新の 5 つの vue.js ビデオチュートリアルの選択
プログラミング関連の知識については、

プログラミング入門

をご覧ください。！

以上がVue.jsを使用して画像のトリミング機能を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Vue を使用して Chrome 拡張機能を開発する方法次の記事：Vue を使用して Chrome 拡張機能を開発する方法

続きを見る