vue-poster-editor/lib/canvas/editor-element-mask.html

A poster editor based on Vue.js

<div
    class="editor-element"
    :class="[
        'editor-element-' + model.type,
        model.lock ? 'editor-element-lock' : '',
        model.hidden ? 'editor-element-hidden' : '',
        model.frozen ? 'editor-element-frozen' : '',
        model.$loaded ? '' : 'editor-element-loading',
        model.$selected ? 'editor-element-selected' : '',
        model.$editing ? 'editor-element-editing' : ''
    ]"
    :style="cssStyle"
>
    <div class="element-tips" v-if="!model.$loaded || errorMessage">
        <div class="element-tips-loading" v-if="!model.$loaded">
            <i class="fa fa-spin fa-spinner"></i><span>Loading...</span>
        </div>
        <div class="element-tips-error" v-if="errorMessage">
            <i class="fa fa-info-circle"></i><span>{{errorMessage}}</span>
        </div>
    </div>

    <div
        draggable="false"
        class="element-main"
        :style="{
            boxShadow: boxShadow,
            padding: padding,
            borderRadius: borderRadius
        }"
    >
        <img
            v-if="!!imageUrl"
            crossorigin
            class="element-mocker"
            :src="imageUrl || null"
            :style="{
                height: zoom * model.height + 'px',
                width: zoom * model.width + 'px',
                filter: cssFilter
            }"
        >
    </div>

    <div class="element-blink"
         @animationend="hideBlink"
         v-if="isShowBlink"></div>
</div>