溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么用Vue.js在瀏覽器中實現裁剪圖像功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。
使用圖像裁剪依賴項創建一個新的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 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" rel="external nofollow" > <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服務”
【 https://www.thepolyglotdeveloper.com/2017/12/upload-files-remote-web-service-vuejs-web-application/ 】。
結論
本文講解了如何使用 Vue.js Web 程序中的 Cropper.js 庫來操作圖像。如果你需要接受來自用戶的圖像，并將其用作個人資料或類似內容的一部分，這非常有用，因為你需要將這些圖片調整為一致的大小，這樣你的主題才不會被破壞。
使用圖像裁剪庫與使用原生 JavaScript 的方式沒什么不同，但是有一些事情需要用 Vue.js 與 HTML 組件進行交互。
關于“怎么用Vue.js在瀏覽器中實現裁剪圖像功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
