下載
VueCroppie VueCroppie是一個Vue 2包裝Croppie一個美麗的照片裁剪工具的Javascript由foliotek。 安裝 NPM 安裝vue-croppie—儲存 CDN https://unpkg.com/vue-croppie/dist/vue-croppie.js 使用

import Vue from 'vue';
import VueCroppie from 'vue-croppie';

Vue.use(VueCroppie);

& lt;指令碼src = " https://unpkg.com/vue-croppie/dist/vue-croppie.js "比; & lt; body> … & lt; / body> & lt; script> Vue.use (VueCroppie.default); const vm = new Vue({…}); & lt; / script> 樣本 下面的示例將生成此內容。

<template>
    <div>
        <!-- Note that 'ref' is important here (value can be anything). read the description about `ref` below. -->
        <vue-croppie 
            ref=croppieRef 
            :enableOrientation="true"
            @result="result"
            @update="update">
        </vue-croppie>

        <!-- the result -->
        <img v-bind:src="cropped">

        <button @click="bind()">Bind</button>
        <!-- Rotate angle is Number -->
        <button @click="rotate(-90)">Rotate Left</button>
        <button @click="rotate(90)">Rotate Right</button>
        <button @click="crop()">Crop Via Callback</button>
        <button @click="cropViaEvent()">Crop Via Event</button>
    </div>
</template>

<script>
export default {
    mounted() {
        // Upon mounting of the component, we accessed the .bind({...})
        // function to put an initial image on the canvas.
        this.$refs.croppieRef.bind({
            url: 'http://i.imgur.com/Fq2DMeH.jpg',
        })
    },
    data() {
        return {
            cropped: null,
            images: [
                'http://i.imgur.com/fHNtPXX.jpg',
                'http://i.imgur.com/ecMUngU.jpg',
                'http://i.imgur.com/7oO6zrh.jpg',
                'http://i.imgur.com/miVkBH2.jpg'
            ]
        }
    },
    methods: {
        bind() {
            // Randomize cat photos, nothing special here.
            let url = this.images[Math.floor(Math.random() * 4)]

            // Just like what we did with .bind({...}) on 
            // the mounted() function above.
            this.$refs.croppieRef.bind({
                url: url,
            });
        },
        // CALBACK USAGE
        crop() {
            // Here we are getting the result via callback function
            // and set the result to this.cropped which is being 
            // used to display the result above.
            let options = {
                format: 'jpeg', 
                circle: true
            }
            this.$refs.croppieRef.result(options, (output) => {
                this.cropped = output;
            });
        },
        // EVENT USAGE
        cropViaEvent() {
            this.$refs.croppieRef.result(options);
        },
        result(output) {
            this.cropped = output;
        },
        update(val) {
            console.log(val);
        },
        rotate(rotationAngle) {
            // Rotates the image
            this.$refs.croppieRef.rotate(rotationAngle);
        }
    }
}
</script>
 

利用期權 所有Croppie選項被轉換成道具，以便能夠在vue-croppie元件中使用它們。 使用 & lt; vue-croppie ref = croppieRef : enableOrientation = " true " : mouseWheelZoom = " false " :viewport="{width: 200, height: 200, type: 'circle'}" @result = " fn " 比; & lt; / vue-croppie> API 所有的屬性和方法都基於農作物文件。如果你明白我的意思，那麼所有的屬性和方法名都是"==="。 除了下面的幾件事。 選項 型別 預設的 描述 裁判(必需) 物件 沒有一個 ref用於建立對子元件的引用，以便訪問它的方法和屬性。具體的例子是從元件外部訪問vue-croppie的result()函式。 resultType 字串 base64 通過result()對被裁剪的影象進行編碼。也可在Croppie文件。 customClass 字串 沒有一個 您可以傳遞一個或多個自定義類到道具customClass，如customClass="class1 class2 class3" 事件 選項 型別 使用 描述 更新 函式 @update = " fn " 當作物元素被縮放、拖動或裁剪時觸發 結果 函式 @result = " fn " 當影象被裁剪時觸發。返回裁剪的影象。 注意: $ref . croppieref .result({}). $ref . croppieref .result(})。在這裡看到的 常見問題解答 如何清除/銷燬副本? 我添加了一個名為refresh()的新方法，可以這樣使用。$ref . croppierefs .refresh()，但是croppie例項現在會在每次呼叫crop()後自動重新整理。 有用的連結 358 -官方農作物網頁。 更新 1.3.0 - 2017年8月16日 新增webpack構建 修復# 5 修復# 14 1.2.5 - 2017年8月12日 裁剪的影象輸出現在可以通過vue事件檢索。 新增結果事件。 新增更新的事件。 1.2.3 增加了每次呼叫crop()後自動重新整理croppie例項的功能。 新的方法refresh()，它會破壞和重新建立croppie例項。 1.2.x 結果選項現在通過this.$ref . croppieref傳遞。結果(選擇,回撥)。 許可證 麻省理工學院 使用和濫用自負風險。 & lt; / p>與❤️Jofferson Ramirez Tiquez本文轉載於：http://www.diyabc.com/frontweb/news33284.html