render: cropper & download image

This commit is contained in:
muerwre 2018-11-28 17:57:56 +07:00
parent 857a2a0c12
commit 34d1b85513
14 changed files with 308 additions and 40 deletions

View file

@ -117,6 +117,11 @@
background-size: 100% 100%;
}
&.success {
background: linear-gradient(150deg, @green_primary, @green_secondary) 50% 50% no-repeat;
background-size: 100% 100%;
}
&.danger {
background: linear-gradient(150deg, @red_primary, @red_secondary) 50% 50% no-repeat;
background-size: 100% 100%;

View file

@ -5,11 +5,48 @@
width: 100%;
height: 100%;
z-index: 1000;
background: rgba(0, 0, 0, 0.9);
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 80px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
> div {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
//canvas {
// width: 50vw;
// height: 50vh;
//}
img#rendererOutput {
width: 300px;
height: 300px;
}
.croppr-region {
box-shadow: rgba(255, 255, 255, 0.2) 0 0 0 6px, rgba(0, 0, 0, 0.3) 0 0 0 1px;
border: none;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.croppr-handle {
width: 12px;
height: 12px;
border-radius: 8px;
border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0 0 0 1px;
}
}
.renderer-logo {
position: absolute;
bottom: 0;
right: 0;
pointer-events: none;
transform-origin: 100% 100%;
}