用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能
你是否寫了一個需要接受用戶上傳圖片的 Web 應用,后來才意識到用戶總是提供各種形狀和大小的圖像來破壞你的網(wǎng)站主題?在網(wǎng)絡上處理圖像很容易成為一種痛苦 —— 當然,除非你使用了正確的工具。
在本教程中,我們將探討如何在瀏覽器中使用 JavaScript 庫來操作圖片,為服務器上的存儲做準備,并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來完成此操作。
要了本文想要完成的任務,請查看上面的圖片。左側(cè)是原始圖像,右側(cè)是新圖像預覽。我們可以移動裁剪框并調(diào)整其大小,預覽圖像也會隨之改變。用戶可以根據(jù)需要下載預覽圖像。
我們將用名為 Cropper.js 【 https://fengyuanchen.github.io/cropperjs/ 】的庫完成繁重的工作。
使用圖像裁剪依賴項創(chuàng)建一個新的Vue.js項目
第一步是創(chuàng)建一個新項目并安裝必要的依賴項。假設你已安裝并配置了Vue CLI
【 https://fengyuanchen.github.io/cropperjs/ 】。
在命令行下執(zhí)行以下命令:
vue create cropper-project
出現(xiàn)提示時,選擇默認選項。這將是一個簡單的項目,所以不必要擔心路由和其它一些東西。
導航到新項目并執(zhí)行以下操作:
npm install cropperjs --save
上面的命令會將 Cropper.js 安裝到我們的項目中??梢院苋菀椎厥褂肅DN,但因為我們使用的是利用 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" > </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裁剪圖像
現(xiàn)在項目應該幾乎已配置好并可以在網(wǎng)絡上裁剪圖像。為了保持我們的項目整潔,我們將創(chuàng)建一個新的Vue.js組件來處理我們所有的圖像處理。
在項目中創(chuàng)建 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>
塊中出現(xiàn)的 src 和 destination 變量。這些變量表示用戶通過 props 對象定義的源圖像,以及已經(jīng)被操作的目標圖像。我們將能夠通過 ref 變量直接訪問源圖像,這類似于在 DOM 對象上使用 querySelector 。
雖然我們已經(jīng)為裁剪圖像做好了準備,但實際上并沒有對它們做任何事情。我們將在 mounted 方法中配置 cropping 處理和事件,該方法將在視圖初始化后觸發(fā)。
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"); } }); }
調(diào)用該方法時,我們獲得了對 <template>
塊中的圖像的引用。然后在初始化裁剪工具時使用圖像,同時定義一些配置,這些配置并不是強制性的。
crop 方法是發(fā)生奇跡的地方。每當我們處理圖像時,都會調(diào)用這個 crop 方法。當執(zhí)行 crop 方法時,我們應該能夠獲取裁剪、縮放等信息,并從中創(chuàng)建新圖像 —— 即目標圖像。
這時我們已經(jīng)創(chuàng)建了組件但尚未使用它。
打開項目的 src/App.vue 文件并包含以下內(nèi)容:
<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>
請注意,我們已經(jīng)導入了 ImageCropper 組件,并在 <template> 塊中使用它。請記住, src 屬性是 JavaScript 中的 props 之一。在我的示例中,有一個 public/logo.png 文件,你可以根據(jù)需要隨意修改它。在真實的場景中,你會使用用戶將要上傳的圖像。
如果你想了解如何上傳文件(如裁剪圖像),可以查看我之前的教程“通過 Vue.js 將文件上傳到遠程Web服務”
【 https://www.thepolyglotdeveloper.com/2017/12/upload-files-remote-web-service-vuejs-web-application/ 】。
結(jié)論
本文講解了如何使用 Vue.js Web 程序中的 Cropper.js 庫來操作圖像。如果你需要接受來自用戶的圖像,并將其用作個人資料或類似內(nèi)容的一部分,這非常有用,因為你需要將這些圖片調(diào)整為一致的大小,這樣你的主題才不會被破壞。
使用圖像裁剪庫與使用原生 JavaScript 的方式?jīng)]什么不同,但是有一些事情需要用 Vue.js 與 HTML 組件進行交互。
以上所述是小編給大家介紹的用Vue.js在瀏覽器中裁剪圖像功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
vue?Router(v3.x)?路由傳參的三種方式場景分析
vue?路由傳參的使用場景一般都是應用在父路由跳轉(zhuǎn)到子路由時,攜帶參數(shù)跳轉(zhuǎn),傳參方式可劃分為?params?傳參和?query?傳參,而?params?傳參又可分為在?url?中顯示參數(shù)和不顯示參數(shù)兩種方式,這就是vue路由傳參的三種方式,感興趣的朋友跟隨小編一起看看吧2023-07-07Vue使用json-server進行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進行后端數(shù)據(jù)模擬功能,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-04-04vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問題的方法詳解
這篇文章主要介紹了vue基于html2canvas和jspdf?生成pdf?、解決jspdf中文亂碼問題的方法,結(jié)合實例形式詳細描述了中文亂碼問題的原因、解決方法與相關(guān)注意事項,需要的朋友可以參考下2023-06-06vue創(chuàng)建項目卡住不動,vue?create?project卡住不動的解決
這篇文章主要介紹了vue創(chuàng)建項目卡住不動,vue?create?project卡住不動的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10Vue電商網(wǎng)站首頁內(nèi)容吸頂功能實現(xiàn)過程
電商網(wǎng)站的首頁內(nèi)容會比較多,頁面比較長,為了能讓用戶在滾動瀏覽內(nèi)容的過程中都能夠快速的切換到其它分類。需要分類導航一直可見,所以需要一個吸頂導航的效果。目標:完成頭部組件吸頂效果的實現(xiàn)2023-04-04