VueCroppie

下载

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

巴特西

VueCroppie

最新文章

热门文章