vue-poster-editor/lib/components/editor-image-croper.html

A poster editor based on Vue.js

<div
    class="editor-image-croper"
    :style="{
        height: zoom * editModel.height + 'px',
        width: zoom * editModel.width + 'px',
        left: zoom * editModel.left + 'px',
        top: zoom * (editModel.top + currentLayout.top) + 'px',
        transform: transform
    }"
    @mousedown="activeOuterEdit($event)"
>
    <img crossorigin class="editor-image-croper-mask" :src="model ? model.url : null" />

    <div class="editor-image-croper-inner" :style="{
        left: zoom * editModelClip.left + 'px',
        top: zoom * editModelClip.top + 'px',
        width: model ? zoom * editModelInner.width + 'px' : null,
        height: model ? zoom * editModelInner.height + 'px' : null,
        borderRadius: borderRadius
    }">
        <img ref="image" crossorigin :src="model ? model.url : null" :style="{
            position: 'relative',
            width: zoom * editModel.width + 'px',
            height: zoom * editModel.height + 'px',
            left: -zoom * editModelClip.left +'px',
            top: -zoom * editModelClip.top + 'px',
        }" />

        <div
            class="editor-croper-grid editor-image-croper-grid"
            :class="{active: showGrid}"
            :style="{
                borderRadius: borderRadius
            }"
        >
            <i class="editor-croper-grid-x1"></i>
            <i class="editor-croper-grid-x2"></i>
            <i class="editor-croper-grid-y1"></i>
            <i class="editor-croper-grid-y2"></i>
        </div>
    </div>
</div>