怎么用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)怎么用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),定陶企業(yè)網(wǎng)站建設(shè),定陶品牌網(wǎng)站建設(shè),網(wǎng)站定制,定陶網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,定陶網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

使用圖像裁剪依賴項創(chuàng)建一個新的Vue.js項目

第一步是創(chuàng)建一個新項目并安裝必要的依賴項。假設(shè)你已安裝并配置了Vue CLI

在命令行下執(zhí)行以下命令：

vue create cropper-project

出現(xiàn)提示時，選擇默認(rèn)選項。這將是一個簡單的項目，所以不必要擔(dān)心路由和其它一些東西。

導(dǎo)航到新項目并執(zhí)行以下操作：

npm install cropperjs --save

上面的命令會將 Cropper.js 安裝到我們的項目中?？梢院苋菀椎厥褂肅DN，但因為我們使用的是利用 webpack 的框架，所以 npm 路由最有意義。

雖然安裝了我們的依賴項，但還有一件事需要去做。因為用的是 npm，所以不包含CSS信息 —— 只包含 JavaScript 信息。我們需要在本地或通過 CDN 包含 CSS信息。本文使用CDN。

打開項目的 public/index.html 并包含以下 HTML 標(biāo)記：

<!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> 標(biāo)記中，我們包含了 cropper.min.css 文件。同樣，只要你得到這個文件，如何獲得CSS信息并不重要。如果沒有 CSS 信息，我們的圖像就不會有花哨的裁剪框。

在Vue.js項目中使用JavaScript裁剪圖像

現(xiàn)在項目應(yīng)該幾乎已配置好并可以在網(wǎng)絡(luò)上裁剪圖像。為了保持我們的項目整潔，我們將創(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> 標(biāo)簽的信息并不重要，它只是清理了頁面，并沒有從庫中獲得任何實際效果。

記下 <template> 塊中出現(xiàn)的 src 和 destination 變量。這些變量表示用戶通過 props 對象定義的源圖像，以及已經(jīng)被操作的目標(biāo)圖像。我們將能夠通過 ref 變量直接訪問源圖像，這類似于在 DOM 對象上使用 querySelector 。

雖然我們已經(jīng)為裁剪圖像做好了準(zhǔn)備，但實際上并沒有對它們做任何事情。我們將在 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> 塊中的圖像的引用。然后在初始化裁剪工具時使用圖像，同時定義一些配置，這些配置并不是強(qiáng)制性的。

crop 方法是發(fā)生奇跡的地方。每當(dāng)我們處理圖像時，都會調(diào)用這個 crop 方法。當(dāng)執(zhí)行 crop 方法時，我們應(yīng)該能夠獲取裁剪、縮放等信息，并從中創(chuàng)建新圖像 —— 即目標(biāo)圖像。

這時我們已經(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)導(dǎo)入了 ImageCropper 組件，并在 <template> 塊中使用它。請記住， src 屬性是 JavaScript 中的 props 之一。在我的示例中，有一個 public/logo.png 文件，你可以根據(jù)需要隨意修改它。在真實的場景中，你會使用用戶將要上傳的圖像。

如果你想了解如何上傳文件（如裁剪圖像），可以查看我之前的教程“通過 Vue.js 將文件上傳到遠(yuǎn)程Web服務(wù)”

【 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 組件進(jìn)行交互。

怎么用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能

關(guān)于“怎么用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

本文題目：怎么用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://www.rwnh.cn/article16/cepodg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、建站公司、云服務(wù)器、定制網(wǎng)站、自適應(yīng)網(wǎng)站、移動網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

怎么用Vue.js在瀏覽器中實現(xiàn)裁剪圖像功能-創(chuàng)新互聯(lián)