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")
|
meta(charset="utf-8")
|
||||||
title pixsy
|
title pixsy
|
||||||
link(rel="stylesheet" href="includes/style.css")
|
link(rel="stylesheet" href="includes/style.css")
|
||||||
link(rel="stylesheet" href="includes/cropper.css")
|
link(rel="stylesheet" href="includes/croppie.css")
|
||||||
script(src="includes/cropper.min.js")
|
script(src="includes/croppie.min.js")
|
||||||
body
|
body
|
||||||
header
|
header
|
||||||
h1
|
h1
|
||||||
|
|
@ -41,7 +41,7 @@ html(lang="en-gb")
|
||||||
|
|
||||||
.image-container
|
.image-container
|
||||||
input#image(type="file" accept="image/*")
|
input#image(type="file" accept="image/*")
|
||||||
#crop
|
#crop(style="display: none;")
|
||||||
|
|
||||||
button.pagination.prev previous
|
button.pagination.prev previous
|
||||||
button.pagination.next#image-next(disabled=true) next
|
button.pagination.next#image-next(disabled=true) next
|
||||||
|
|
|
||||||
32
script.js
32
script.js
|
|
@ -72,6 +72,7 @@ async function run() {
|
||||||
const buttonNewGame = el("new");
|
const buttonNewGame = el("new");
|
||||||
const buttonReset = el("reset");
|
const buttonReset = el("reset");
|
||||||
const checkboxDither = el("dither");
|
const checkboxDither = el("dither");
|
||||||
|
const divCroppie = el("crop");
|
||||||
const divNewPalette = el("new-palette");
|
const divNewPalette = el("new-palette");
|
||||||
const inputBrightness = el("brightness");
|
const inputBrightness = el("brightness");
|
||||||
const inputColourBackground = el("colour-background");
|
const inputColourBackground = el("colour-background");
|
||||||
|
|
@ -81,8 +82,11 @@ async function run() {
|
||||||
const textareaGameDataInput = el("game-data");
|
const textareaGameDataInput = el("game-data");
|
||||||
const textareaGameDataOutput = el("output");
|
const textareaGameDataOutput = el("output");
|
||||||
|
|
||||||
const cropper = new Cropper({ width: 192, height: 192 });
|
const croppie = new Croppie(divCroppie, {
|
||||||
let cropperRendered = false;
|
viewport: {width: 128, height: 128, type: 'square'},
|
||||||
|
boundary: {width: 256, height: 256},
|
||||||
|
enableZoom: true,
|
||||||
|
});
|
||||||
|
|
||||||
// hide all pages except start page
|
// hide all pages except start page
|
||||||
for (let page of document.getElementsByClassName('page')) {
|
for (let page of document.getElementsByClassName('page')) {
|
||||||
|
|
@ -95,6 +99,10 @@ async function run() {
|
||||||
pageButton.addEventListener('touchend', pagination);
|
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() {
|
function new_game() {
|
||||||
load_default_game();
|
load_default_game();
|
||||||
textareaGameDataInput.value = output();
|
textareaGameDataInput.value = output();
|
||||||
|
|
@ -159,13 +167,9 @@ async function run() {
|
||||||
|
|
||||||
el('image').addEventListener('change', function () {
|
el('image').addEventListener('change', function () {
|
||||||
readFile(this, function (e) {
|
readFile(this, function (e) {
|
||||||
if ( ! cropperRendered) {
|
croppie.bind({url: e.target.result});
|
||||||
cropper.render("#crop");
|
divCroppie.style.display = "block";
|
||||||
cropperRendered = true;
|
|
||||||
buttonImageProceed.removeAttribute("disabled");
|
buttonImageProceed.removeAttribute("disabled");
|
||||||
}
|
|
||||||
|
|
||||||
cropper.loadImage(e.target.result);
|
|
||||||
}, "image");
|
}, "image");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -174,8 +178,18 @@ async function run() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleImage() {
|
function handleImage() {
|
||||||
console.log("Loading image: " + load_image(cropper.getCroppedImage()));
|
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();
|
loadPreview();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
buttonImageProceed.addEventListener("click", handleImage);
|
buttonImageProceed.addEventListener("click", handleImage);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue