vue-poster-editor/lib/widgets/editor-image-picker.js

A poster editor based on Vue.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _once2 = require('lodash/once');

var _once3 = _interopRequireDefault(_once2);

var _editorImagePicker = require('./editor-image-picker.html');

var _editorImagePicker2 = _interopRequireDefault(_editorImagePicker);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = {
    template: _editorImagePicker2.default,
    props: ['change', 'afterSelect', 'model', 'width', 'height'],
    data: function data() {
        return {
            title: '选择图片',
            label: '替换图片',
            accept: 'image/png,image/jpeg,image/gif'
        };
    },

    computed: {
        fileReader: function fileReader() {
            return this.$refs.fileReader;
        }
    },
    methods: {
        set: function set(url, width, height) {
            if (!this.change) {
                this.model = url;
                this.width = width;
                this.height = height;
            } else {
                this.change(url, width, height);
            }
        },
        onFileLoad: function onFileLoad(url) {
            var self = this;
            var img = new Image();
            img.crossOrigin = 'Anonymous';
            img.onload = function () {
                self.set(url, img.width, img.height);
            };

            img.src = url;
        },
        showPicker: function showPicker() {
            var hooked = false;

            this.$events.$emit('editor.image.picker.show', (0, _once3.default)(function () {
                hooked = true;
            }));

            if (!hooked) {
                this.fileReader.showPicker();
            }
        }
    },
    beforeDestroy: function beforeDestroy() {
        this.$emit('destroy');
    }
};
module.exports = exports['default'];