使用Vue.js實現影像裁切功能-Vue.js-PHP中文網

首頁

web前端

Vue.js

使用Vue.js實現影像裁切功能

青灯夜游

Oct 19, 2020 pm 05:45 PM

vue.js影像裁切

使用Vue.js實現影像裁切功能

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

使用Vue.js實現影像裁切功能

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

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

我們將使用名為 Cropper.js 的函式庫完成繁重的工作。

使用映像裁切相依性建立新的Vue.js專案

第一步是建立一個新專案並安裝必要的依賴項。假設你已安裝並設定了Vue CLI。

在命令列下執行以下命令：

vue create cropper-project

出現提示時，選擇預設選項。這將是一個簡單的項目，所以不必要擔心路由和其它一些東西。

導航到新專案並執行以下操作：

npm install cropperjs --save

上面的命令會將 Cropper.js 安裝到我們的專案中。可以很容易地使用CDN，但因為我們使用的是利用 webpack 的框架，所以 npm 路由最有意義。

雖然安裝了我們的依賴項，但還有一件事需要去做。因為用的是 npm，所以不包含CSS資訊 —— 只包含 JavaScript 資訊。我們需要在本地或透過 CDN 包含 CSS信息。本文使用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>

請注意，在標籤中，我們包含了cropper.min.css 檔案。同樣，只要你得到這個文件，如何獲得CSS資訊並不重要。如果沒有 CSS 訊息，我們的圖片就不會有花哨的裁剪框。

在Vue.js專案中使用JavaScript裁剪圖像

現在專案應該幾乎已配置好並且可以在網路上裁剪圖像。為了保持我們的專案整潔，我們將創建一個新的Vue.js元件來處理我們所有的映像處理。

在專案中建立src/components/ImageCropper.vue 文件，並包含以下樣板程式碼：

<template>
    <div>
        <div class="img-container">
            <img  src="/static/imghwm/default1.png"  data-src="src"  class="lazy"  ref="image" : crossorigin alt="使用Vue.js實現影像裁切功能" >
        </div>
        <img  class="img-preview lazy"  src="/static/imghwm/default1.png"  data-src="destination"  :  alt="使用Vue.js實現影像裁切功能" >
    </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></style> 標籤的資訊並不重要，它只是清理了頁面，並沒有從庫中獲得任何實際效果。

記下 <template></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></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></template> 區塊中使用它。請記住，src 屬性是 JavaScript 中的 props 之一。在我的範例中，有一個 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中文網其他相關文章！

陳述

本文轉載於：segmentfault。如有侵權，請聯絡admin@php.cn刪除

vue.js vs.反應：用例和應用程序Apr 29, 2025 am 12:36 AM

Vue.js適合小型到中型項目，React適合大型項目和復雜應用場景。 1)Vue.js易於上手，適用於快速原型開發和小型應用。 2)React在處理複雜狀態管理和性能優化方面更有優勢，適合大型項目。

VUE.JS與React：比較性能和效率Apr 28, 2025 am 12:12 AM

Vue.js和React各有優勢：Vue.js適用於小型應用和快速開發，React適合大型應用和復雜狀態管理。 1.Vue.js通過響應式系統實現自動更新，適用於小型應用。 2.React使用虛擬DOM和diff算法，適合大型和復雜應用。選擇框架時需考慮項目需求和團隊技術棧。

vue.js vs.反應：社區，生態系統和支持Apr 27, 2025 am 12:24 AM

Vue.js和React各有優勢，選擇應基於項目需求和團隊技術棧。 1.Vue.js社區友好，提供豐富學習資源，生態系統包括VueRouter等官方工具，支持由官方團隊和社區提供。 2.React社區偏向企業應用，生態系統強大，支持由Facebook及其社區提供，更新頻繁。

React和Netflix：探索關係Apr 26, 2025 am 12:11 AM

Netflix使用React來提升用戶體驗。 1)React的組件化特性幫助Netflix將復雜UI拆分成可管理模塊。 2)虛擬DOM優化了UI更新，提高了性能。 3)結合Redux和GraphQL，Netflix高效管理應用狀態和數據流動。

vue.js vs.後端框架：澄清區別Apr 25, 2025 am 12:05 AM

Vue.js是前端框架，後端框架用於處理服務器端邏輯。 1)Vue.js專注於構建用戶界面，通過組件化和響應式數據綁定簡化開發。 2)後端框架如Express、Django處理HTTP請求、數據庫操作和業務邏輯，運行在服務器上。

vue.js和前端堆棧：了解連接Apr 24, 2025 am 12:19 AM

Vue.js與前端技術棧緊密集成，提升開發效率和用戶體驗。 1)構建工具：與Webpack、Rollup集成，實現模塊化開發。 2)狀態管理：與Vuex集成，管理複雜應用狀態。 3)路由：與VueRouter集成，實現單頁面應用路由。 4)CSS預處理器：支持Sass、Less，提升樣式開發效率。

Netflix：探索React（或其他框架）的使用Apr 23, 2025 am 12:02 AM

Netflix選擇React來構建其用戶界面，因為React的組件化設計和虛擬DOM機制能夠高效處理複雜界面和頻繁更新。 1）組件化設計讓Netflix將界面分解成可管理的小組件，提高了開發效率和代碼可維護性。 2）虛擬DOM機制通過最小化DOM操作，確保了Netflix用戶界面的流暢性和高性能。

vue.js和前端：深入研究框架Apr 22, 2025 am 12:04 AM

Vue.js被開發者喜愛因為它易於上手且功能強大。 1)其響應式數據綁定係統自動更新視圖。 2)組件系統提高了代碼的可重用性和可維護性。 3)計算屬性和偵聽器增強了代碼的可讀性和性能。 4)使用VueDevtools和檢查控制台錯誤是常見的調試技巧。 5)性能優化包括使用key屬性、計算屬性和keep-alive組件。 6)最佳實踐包括清晰的組件命名、使用單文件組件和合理使用生命週期鉤子。

See all articles