如何使用Vue.js實(shí)現(xiàn)圖像裁剪功能-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)如何使用Vue.js實(shí)現(xiàn)圖像裁剪功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

10年的山陽(yáng)網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整山陽(yáng)建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“山陽(yáng)網(wǎng)站設(shè)計(jì)”,“山陽(yáng)網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

你是否寫了一個(gè)需要接受用戶上傳圖片的 Web 應(yīng)用，后來(lái)才意識(shí)到用戶總是提供各種形狀和大小的圖像來(lái)破壞你的網(wǎng)站主題？在網(wǎng)絡(luò)上處理圖像很容易成為一種痛苦 —— 當(dāng)然，除非你使用了正確的工具。

在本教程中，我們將探討如何在瀏覽器中使用 JavaScript 庫(kù)來(lái)操作圖片，為服務(wù)器上的存儲(chǔ)做準(zhǔn)備，并在 Web 程序中使用。我們將使用 Vue.js 而不是原生 JavaScript來(lái)完成此操作。

要了本文想要完成的任務(wù)，請(qǐng)查看上面的圖片。左側(cè)是原始圖像，右側(cè)是新圖像預(yù)覽。我們可以移動(dòng)裁剪框并調(diào)整其大小，預(yù)覽圖像也會(huì)隨之改變。用戶可以根據(jù)需要下載預(yù)覽圖像。

我們將使用名為 Cropper.js 的庫(kù)完成繁重的工作。

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

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

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

vue create cropper-project

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

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

npm install cropperjs --save

上面的命令會(huì)將 Cropper.js 安裝到我們的項(xiàng)目中?？梢院苋菀椎厥褂肅DN，但因?yàn)槲覀兪褂玫氖抢?webpack 的框架，所以 npm 路由最有意義。

雖然安裝了我們的依賴項(xiàng)，但還有一件事需要去做。因?yàn)橛玫氖?npm，所以不包含CSS信息 —— 只包含 JavaScript 信息。我們需要在本地或通過 CDN 包含 CSS信息。本文使用CDN。

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

<!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'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>

請(qǐng)注意，在<head> 標(biāo)記中，我們包含了cropper.min.css 文件。同樣，只要你得到這個(gè)文件，如何獲得CSS信息并不重要。如果沒有 CSS 信息，我們的圖像就不會(huì)有花哨的裁剪框。

在Vue.js項(xiàng)目中使用JavaScript裁剪圖像

現(xiàn)在項(xiàng)目應(yīng)該幾乎已配置好并可以在網(wǎng)絡(luò)上裁剪圖像。為了保持我們的項(xiàng)目整潔，我們將創(chuàng)建一個(gè)新的Vue.js組件來(lái)處理我們所有的圖像處理。

在項(xiàng)目中創(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>

對(duì)于這個(gè)例子，<style> 標(biāo)簽的信息并不重要，它只是清理了頁(yè)面，并沒有從庫(kù)中獲得任何實(shí)際效果。

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

雖然我們已經(jīng)為裁剪圖像做好了準(zhǔn)備，但實(shí)際上并沒有對(duì)它們做任何事情。我們將在mounted 方法中配置 cropping 處理和事件，該方法將在視圖初始化后觸發(fā)。

mounted 方法看起來(lái)像這樣：

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)用該方法時(shí)，我們獲得了對(duì)<template> 塊中的圖像的引用。然后在初始化裁剪工具時(shí)使用圖像，同時(shí)定義一些配置，這些配置并不是強(qiáng)制性的。

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

這時(shí)我們已經(jīng)創(chuàng)建了組件但尚未使用它。

打開項(xià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>

請(qǐng)注意，我們已經(jīng)導(dǎo)入了ImageCropper 組件，并在<template> 塊中使用它。請(qǐng)記住，src 屬性是 JavaScript 中的props 之一。在我的示例中，有一個(gè)public/logo.png 文件，你可以根據(jù)需要隨意修改它。在真實(shí)的場(chǎng)景中，你會(huì)使用用戶將要上傳的圖像。

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

感謝各位的閱讀！關(guān)于“如何使用Vue.js實(shí)現(xiàn)圖像裁剪功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

本文標(biāo)題：如何使用Vue.js實(shí)現(xiàn)圖像裁剪功能-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://jinyejixie.com/article10/dsihdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、小程序開發(fā)、ChatGPT、品牌網(wǎng)站制作、Google、服務(wù)器托管

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

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

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

如何使用Vue.js實(shí)現(xiàn)圖像裁剪功能-創(chuàng)新互聯(lián)

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

在Vue.js項(xiàng)目中使用JavaScript裁剪圖像