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