用Vue.js在瀏覽器中裁剪圖像

時間 2019-11-07

標籤 vue.js vue 瀏覽器裁剪圖像欄目 JavaScript 简体版

原文原文鏈接

翻譯：瘋狂的技術宅
原文： https://blog.logrocket.com/cr...
未經容許嚴禁轉載

你是否寫了一個須要接受用戶上傳圖片的 Web 應用，後來才意識到用戶老是提供各類形狀和大小的圖像來破壞你的網站主題？在網絡上處理圖像很容易成爲一種痛苦 —— 固然，除非你使用了正確的工具。css

在本教程中，咱們將探討如何在瀏覽器中使用 JavaScript 庫來操做圖片，爲服務器上的存儲作準備，並在 Web 程序中使用。咱們將使用 Vue.js 而不是原生 JavaScript來完成此操做。html

要了本文想要完成的任務，請查看上面的圖片。左側是原始圖像，右側是新圖像預覽。咱們能夠移動裁剪框並調整其大小，預覽圖像也會隨之改變。用戶能夠根據須要下載預覽圖像。前端

咱們將使用名爲 Cropper.js 的庫完成繁重的工做。vue

使用圖像裁剪依賴項建立一個新的Vue.js項目

第一步是建立一個新項目並安裝必要的依賴項。假設你已安裝並配置了Vue CLI。webpack

在命令行下執行如下命令：git

vue create cropper-project

出現提示時，選擇默認選項。這將是一個簡單的項目，因此沒必要要擔憂路由和其它一些東西。程序員

導航到新項目並執行如下操做：github

npm install cropperjs --save

上面的命令會將 Cropper.js 安裝到咱們的項目中。能夠很容易地使用CDN，但由於咱們使用的是利用 webpack 的框架，因此 npm 路由最有意義。web

雖然安裝了咱們的依賴項，但還有一件事須要去作。由於用的是 npm，因此不包含CSS信息 —— 只包含 JavaScript 信息。咱們須要在本地或經過 CDN 包含 CSS信息。本文使用CDN。面試

打開項目的 public/index.html 幷包含如下 HTML 標記：

<!DOCTYPE html>
<html lang="en">
    <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're sorry but image-cropping doesn'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>

請注意，在 <head> 標記中，咱們包含了 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>

對於這個例子，<style> 標籤的信息並不重要，它只是清理了頁面，並無從庫中得到任何實際效果。

記下 <template> 塊中出現的 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");
        }
    });
}

調用該方法時，咱們得到了對 <template> 塊中的圖像的引用。而後在初始化裁剪工具時使用圖像，同時定義一些配置，這些配置並非強制性的。

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 組件，並在 <template> 塊中使用它。請記住，src 屬性是 JavaScript 中的 props 之一。在個人示例中，有一個 public/logo.png 文件，你能夠根據須要隨意修改它。在真實的場景中，你會使用用戶將要上傳的圖像。

若是你想了解如何上傳文件（如裁剪圖像），能夠查看我以前的教程「使用 Vue.js 將文件上傳到遠程 Web 服務器」。