@uicapivara/cp-image-crop/src/component/image-crop.template.html

cp-image-crop

<div class="image-crop-card"
     cp-style="$ctrl.getCropStyle()"
     cp-class="{ 'circle' : $ctrl.$constants.type == 'circle' }">
    <div class="image-crop-card-content">
        <img cp-show="$ctrl.$bindings.cpModel"
             cp-attr.src="$ctrl.$bindings.cpModel"
             cp-click="$ctrl.viewImage($ctrl.$bindings.cpModel)" />
        <img cp-show="!$ctrl.$bindings.cpModel"
             cp-attr.src="$ctrl.$constants.defaultImage"
             cp-click="$ctrl.viewImage($ctrl.$constants.defaultImage)" />
        <div class="backdrop-crop-button"
             cp-click="$ctrl.openModalEditImage()">
            <div class="backdrop-crop-button-container">
                <svg version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     xmlns:xlink="http://www.w3.org/1999/xlink"
                     x="0px"
                     y="0px"
                     viewBox="0 0 100 100"
                     style="enable-background:new 0 0 100 100;"
                     xml:space="preserve">
                    <g>
                        <g>
                            <path d="M50,40c-8.285,0-15,6.718-15,15c0,8.285,6.715,15,15,15c8.283,0,15-6.715,15-15
			C65,46.718,58.283,40,50,40z M90,25H78c-1.65,0-3.428-1.28-3.949-2.846l-3.102-9.309C70.426,11.28,68.65,10,67,10H33
			c-1.65,0-3.428,1.28-3.949,2.846l-3.102,9.309C25.426,23.72,23.65,25,22,25H10C4.5,25,0,29.5,0,35v45c0,5.5,4.5,10,10,10h80
			c5.5,0,10-4.5,10-10V35C100,29.5,95.5,25,90,25z M50,80c-13.807,0-25-11.193-25-25c0-13.806,11.193-25,25-25
			c13.805,0,25,11.194,25,25C75,68.807,63.805,80,50,80z M86.5,41.993c-1.932,0-3.5-1.566-3.5-3.5c0-1.932,1.568-3.5,3.5-3.5
			c1.934,0,3.5,1.568,3.5,3.5C90,40.427,88.433,41.993,86.5,41.993z" />
                        </g>
                    </g>
                </svg>
                <label>Alterar</label>
            </div>
        </div>
    </div>
</div>