fix crop shit
This commit is contained in:
parent
3d1129c613
commit
da04534fd9
|
|
@ -1,122 +0,0 @@
|
|||
.slider[type='range'] {
|
||||
-webkit-appearance: none;
|
||||
margin: 9px 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.slider[type='range']:focus {
|
||||
outline: 0
|
||||
}
|
||||
|
||||
.slider[type='range']::-webkit-slider-runnable-track {
|
||||
cursor: pointer;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: #008ecc;
|
||||
border: none
|
||||
}
|
||||
|
||||
.slider[type='range']::-webkit-slider-thumb {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -6.5px
|
||||
}
|
||||
|
||||
.slider[type='range']::-moz-range-track {
|
||||
cursor: pointer;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: #008ecc;
|
||||
border: none
|
||||
}
|
||||
|
||||
.slider[type='range']::-moz-range-thumb {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
height: 18px;
|
||||
width: 18px
|
||||
}
|
||||
|
||||
.slider[type='range']::-ms-track {
|
||||
cursor: pointer;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
border-width: 9px 0;
|
||||
color: transparent
|
||||
}
|
||||
|
||||
.slider[type='range']::-ms-fill-lower {
|
||||
background: #008ecc;
|
||||
border: none
|
||||
}
|
||||
|
||||
.slider[type='range']::-ms-fill-upper {
|
||||
background: #008ecc;
|
||||
border: none
|
||||
}
|
||||
|
||||
.slider[type='range']::-ms-thumb {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
|
||||
cursor: pointer;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
margin-top: 0
|
||||
}
|
||||
|
||||
|
||||
.cropper {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.cropper canvas {
|
||||
border-radius: 3px
|
||||
}
|
||||
|
||||
.cropper canvas:hover {
|
||||
cursor: move
|
||||
}
|
||||
|
||||
.cropper-tools {
|
||||
margin-top: 15px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.cropper-zoom {
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.cropper-zoom .slider {
|
||||
margin: 0 10px;
|
||||
width: 225px
|
||||
}
|
||||
|
||||
.cropper-zoom .icon {
|
||||
margin-top: 2px;
|
||||
font-size: 18px
|
||||
}
|
||||
|
||||
.cropper-zoom .icon:last-child {
|
||||
font-size: 24px
|
||||
}
|
||||
|
||||
.cropper .icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: rgba(0, 0, 0, .54);
|
||||
vertical-align: middle;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,250 @@
|
|||
.croppie-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.croppie-container .cr-image {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform-origin: 0 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-boundary {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.croppie-container .cr-viewport,
|
||||
.croppie-container .cr-resizer {
|
||||
position: absolute;
|
||||
border: 2px solid #fff;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer {
|
||||
z-index: 2;
|
||||
box-shadow: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical,
|
||||
.croppie-container .cr-resizer-horisontal {
|
||||
position: absolute;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical::after,
|
||||
.croppie-container .cr-resizer-horisontal::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid black;
|
||||
background: #fff;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical {
|
||||
bottom: -5px;
|
||||
cursor: row-resize;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-vertical::after {
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-horisontal {
|
||||
right: -5px;
|
||||
cursor: col-resize;
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.croppie-container .cr-resizer-horisontal::after {
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.croppie-container .cr-original-image {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-vp-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.croppie-container .cr-overlay {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
cursor: move;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.croppie-container .cr-slider-wrap {
|
||||
width: 75%;
|
||||
margin: 15px auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.croppie-result {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.croppie-result img {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.croppie-container .cr-image,
|
||||
.croppie-container .cr-overlay,
|
||||
.croppie-container .cr-viewport {
|
||||
-webkit-transform: translateZ(0);
|
||||
-moz-transform: translateZ(0);
|
||||
-ms-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/***** STYLING RANGE INPUT ***********/
|
||||
/*************************************/
|
||||
/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
|
||||
/*************************************/
|
||||
|
||||
.cr-slider {
|
||||
-webkit-appearance: none;
|
||||
/*removes default webkit styles*/
|
||||
/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
|
||||
width: 300px;
|
||||
/*required for proper track sizing in FF*/
|
||||
max-width: 100%;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cr-slider::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.cr-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.cr-slider:focus {
|
||||
outline: none;
|
||||
}
|
||||
/*
|
||||
.cr-slider:focus::-webkit-slider-runnable-track {
|
||||
background: #ccc;
|
||||
}
|
||||
*/
|
||||
|
||||
.cr-slider::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.cr-slider::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
/*hide the outline behind the border*/
|
||||
.cr-slider:-moz-focusring {
|
||||
outline: 1px solid white;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.cr-slider::-ms-track {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: transparent;
|
||||
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
|
||||
border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
|
||||
border-width: 6px 0;
|
||||
color: transparent;/*remove default tick marks*/
|
||||
}
|
||||
.cr-slider::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.cr-slider::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.cr-slider::-ms-thumb {
|
||||
border: none;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
border-radius: 50%;
|
||||
background: #ddd;
|
||||
margin-top:1px;
|
||||
}
|
||||
.cr-slider:focus::-ms-fill-lower {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.cr-slider:focus::-ms-fill-upper {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
/*******************************************/
|
||||
|
||||
/***********************************/
|
||||
/* Rotation Tools */
|
||||
/***********************************/
|
||||
.cr-rotate-controls {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
}
|
||||
.cr-rotate-controls button {
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
.cr-rotate-controls i:before {
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
}
|
||||
.cr-rotate-l i:before {
|
||||
content: '↺';
|
||||
}
|
||||
.cr-rotate-r i:before {
|
||||
content: '↻';
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -4,8 +4,8 @@ html(lang="en-gb")
|
|||
meta(charset="utf-8")
|
||||
title pixsy
|
||||
link(rel="stylesheet" href="includes/style.css")
|
||||
link(rel="stylesheet" href="includes/cropper.css")
|
||||
script(src="includes/cropper.min.js")
|
||||
link(rel="stylesheet" href="includes/croppie.css")
|
||||
script(src="includes/croppie.min.js")
|
||||
body
|
||||
header
|
||||
h1
|
||||
|
|
@ -41,7 +41,7 @@ html(lang="en-gb")
|
|||
|
||||
.image-container
|
||||
input#image(type="file" accept="image/*")
|
||||
#crop
|
||||
#crop(style="display: none;")
|
||||
|
||||
button.pagination.prev previous
|
||||
button.pagination.next#image-next(disabled=true) next
|
||||
|
|
|
|||
36
script.js
36
script.js
|
|
@ -72,6 +72,7 @@ async function run() {
|
|||
const buttonNewGame = el("new");
|
||||
const buttonReset = el("reset");
|
||||
const checkboxDither = el("dither");
|
||||
const divCroppie = el("crop");
|
||||
const divNewPalette = el("new-palette");
|
||||
const inputBrightness = el("brightness");
|
||||
const inputColourBackground = el("colour-background");
|
||||
|
|
@ -81,8 +82,11 @@ async function run() {
|
|||
const textareaGameDataInput = el("game-data");
|
||||
const textareaGameDataOutput = el("output");
|
||||
|
||||
const cropper = new Cropper({ width: 192, height: 192 });
|
||||
let cropperRendered = false;
|
||||
const croppie = new Croppie(divCroppie, {
|
||||
viewport: {width: 128, height: 128, type: 'square'},
|
||||
boundary: {width: 256, height: 256},
|
||||
enableZoom: true,
|
||||
});
|
||||
|
||||
// hide all pages except start page
|
||||
for (let page of document.getElementsByClassName('page')) {
|
||||
|
|
@ -95,6 +99,10 @@ async function run() {
|
|||
pageButton.addEventListener('touchend', pagination);
|
||||
}
|
||||
|
||||
// croppie needs to be on screen to work;
|
||||
// halt pagination until we're finished gathering the results
|
||||
buttonImageProceed.removeEventListener("click", pagination);
|
||||
|
||||
function new_game() {
|
||||
load_default_game();
|
||||
textareaGameDataInput.value = output();
|
||||
|
|
@ -159,13 +167,9 @@ async function run() {
|
|||
|
||||
el('image').addEventListener('change', function () {
|
||||
readFile(this, function (e) {
|
||||
if ( ! cropperRendered) {
|
||||
cropper.render("#crop");
|
||||
cropperRendered = true;
|
||||
buttonImageProceed.removeAttribute("disabled");
|
||||
}
|
||||
|
||||
cropper.loadImage(e.target.result);
|
||||
croppie.bind({url: e.target.result});
|
||||
divCroppie.style.display = "block";
|
||||
buttonImageProceed.removeAttribute("disabled");
|
||||
}, "image");
|
||||
});
|
||||
|
||||
|
|
@ -174,8 +178,18 @@ async function run() {
|
|||
}
|
||||
|
||||
function handleImage() {
|
||||
console.log("Loading image: " + load_image(cropper.getCroppedImage()));
|
||||
loadPreview();
|
||||
croppie.result({
|
||||
type: "base64",
|
||||
size: "viewport",
|
||||
format: "png",
|
||||
}).then((result) => {
|
||||
console.log("Loading image: " + load_image(result));
|
||||
|
||||
el("page-image").style.display = "none";
|
||||
el("page-room" ).style.display = "block";
|
||||
|
||||
loadPreview();
|
||||
});
|
||||
}
|
||||
|
||||
buttonImageProceed.addEventListener("click", handleImage);
|
||||
|
|
|
|||
Loading…
Reference in New Issue