356 lines
9.2 KiB
JavaScript
356 lines
9.2 KiB
JavaScript
window.onload = function () {
|
|
'use strict';
|
|
|
|
let Cropper = window.Cropper;
|
|
let URL = window.URL || window.webkitURL;
|
|
let image = document.getElementById('main-img');
|
|
let download = document.getElementById('download');
|
|
let actions = document.getElementById('actions');
|
|
let dataX = document.getElementById('dataX');
|
|
let dataY = document.getElementById('dataY');
|
|
let dataHeight = document.getElementById('dataHeight');
|
|
let dataWidth = document.getElementById('dataWidth');
|
|
let dataRotate = document.getElementById('dataRotate');
|
|
let dataScaleX = document.getElementById('dataScaleX');
|
|
let dataScaleY = document.getElementById('dataScaleY');
|
|
let options = {
|
|
aspectRatio: 16 / 9,
|
|
preview: '.img-preview',
|
|
ready: function (e) {
|
|
console.log(e.type);
|
|
},
|
|
cropstart: function (e) {
|
|
console.log(e.type, e.detail.action);
|
|
},
|
|
cropmove: function (e) {
|
|
console.log(e.type, e.detail.action);
|
|
},
|
|
cropend: function (e) {
|
|
console.log(e.type, e.detail.action);
|
|
},
|
|
crop: function (e) {
|
|
let data = e.detail;
|
|
|
|
console.log(e.type);
|
|
dataX.value = Math.round(data.x);
|
|
dataY.value = Math.round(data.y);
|
|
dataHeight.value = Math.round(data.height);
|
|
dataWidth.value = Math.round(data.width);
|
|
dataRotate.value = typeof data.rotate !== 'undefined' ? data.rotate : '';
|
|
dataScaleX.value = typeof data.scaleX !== 'undefined' ? data.scaleX : '';
|
|
dataScaleY.value = typeof data.scaleY !== 'undefined' ? data.scaleY : '';
|
|
},
|
|
zoom: function (e) {
|
|
console.log(e.type, e.detail.ratio);
|
|
}
|
|
};
|
|
let cropper = new Cropper(image, options);
|
|
let originalImageURL = image.src;
|
|
let uploadedImageType = 'image/jpeg';
|
|
let uploadedImageName = 'cropped.jpg';
|
|
let uploadedImageURL;
|
|
|
|
// Tooltip
|
|
$('[data-toggle="tooltip"]').tooltip();
|
|
|
|
// Buttons
|
|
if (!document.createElement('canvas').getContext) {
|
|
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
|
|
}
|
|
|
|
if (typeof document.createElement('cropper').style.transition === 'undefined') {
|
|
$('button[data-method="rotate"]').prop('disabled', true);
|
|
$('button[data-method="scale"]').prop('disabled', true);
|
|
}
|
|
|
|
// Download
|
|
if (typeof download.download === 'undefined') {
|
|
download.className += ' disabled';
|
|
download.title = 'Your browser does not support download';
|
|
}
|
|
|
|
// Options
|
|
actions.querySelector('.docs-toggles').onchange = function (event) {
|
|
let e = event || window.event;
|
|
let target = e.target || e.srcElement;
|
|
let cropBoxData;
|
|
let canvasData;
|
|
let isCheckbox;
|
|
let isRadio;
|
|
|
|
if (!cropper) {
|
|
return;
|
|
}
|
|
|
|
if (target.tagName.toLowerCase() === 'label') {
|
|
target = target.querySelector('input');
|
|
}
|
|
|
|
isCheckbox = target.type === 'checkbox';
|
|
isRadio = target.type === 'radio';
|
|
|
|
if (isCheckbox || isRadio) {
|
|
if (isCheckbox) {
|
|
options[target.name] = target.checked;
|
|
cropBoxData = cropper.getCropBoxData();
|
|
canvasData = cropper.getCanvasData();
|
|
|
|
options.ready = function () {
|
|
console.log('ready');
|
|
cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
|
|
};
|
|
} else {
|
|
options[target.name] = target.value;
|
|
options.ready = function () {
|
|
console.log('ready');
|
|
};
|
|
}
|
|
|
|
// Restart
|
|
cropper.destroy();
|
|
cropper = new Cropper(image, options);
|
|
}
|
|
};
|
|
|
|
// Methods
|
|
actions.querySelector('.docs-buttons').onclick = function (event) {
|
|
let e = event || window.event;
|
|
let target = e.target || e.srcElement;
|
|
let cropped;
|
|
let result;
|
|
let input;
|
|
let data;
|
|
|
|
if (!cropper) {
|
|
return;
|
|
}
|
|
|
|
while (target !== this) {
|
|
if (target.getAttribute('data-method')) {
|
|
break;
|
|
}
|
|
|
|
target = target.parentNode;
|
|
}
|
|
|
|
if (target === this || target.disabled || target.className.indexOf('disabled') > -1) {
|
|
return;
|
|
}
|
|
|
|
data = {
|
|
method: target.getAttribute('data-method'),
|
|
target: target.getAttribute('data-target'),
|
|
option: target.getAttribute('data-option') || undefined,
|
|
secondOption: target.getAttribute('data-second-option') || undefined
|
|
};
|
|
|
|
cropped = cropper.cropped;
|
|
|
|
if (data.method) {
|
|
if (typeof data.target !== 'undefined') {
|
|
input = document.querySelector(data.target);
|
|
|
|
if (!target.hasAttribute('data-option') && data.target && input) {
|
|
try {
|
|
data.option = JSON.parse(input.value);
|
|
} catch (e) {
|
|
console.log(e.message);
|
|
}
|
|
}
|
|
}
|
|
|
|
switch (data.method) {
|
|
case 'rotate':
|
|
if (cropped && options.viewMode > 0) {
|
|
cropper.clear();
|
|
}
|
|
|
|
break;
|
|
|
|
case 'getCroppedCanvas':
|
|
try {
|
|
data.option = JSON.parse(data.option);
|
|
} catch (e) {
|
|
console.log(e.message);
|
|
}
|
|
|
|
if (uploadedImageType === 'image/jpeg') {
|
|
if (!data.option) {
|
|
data.option = {};
|
|
}
|
|
|
|
data.option.fillColor = '#fff';
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
result = cropper[data.method](data.option, data.secondOption);
|
|
|
|
switch (data.method) {
|
|
case 'rotate':
|
|
if (cropped && options.viewMode > 0) {
|
|
cropper.crop();
|
|
}
|
|
|
|
break;
|
|
|
|
case 'scaleX':
|
|
case 'scaleY':
|
|
target.setAttribute('data-option', -data.option);
|
|
break;
|
|
|
|
case 'getCroppedCanvas':
|
|
if (result) {
|
|
// Bootstrap's Modal
|
|
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
|
|
|
|
if (!download.disabled) {
|
|
download.download = uploadedImageName;
|
|
download.href = result.toDataURL(uploadedImageType);
|
|
}
|
|
}
|
|
|
|
break;
|
|
|
|
case 'destroy':
|
|
cropper = null;
|
|
|
|
if (uploadedImageURL) {
|
|
URL.revokeObjectURL(uploadedImageURL);
|
|
uploadedImageURL = '';
|
|
image.src = originalImageURL;
|
|
}
|
|
|
|
break;
|
|
}
|
|
|
|
if (typeof result === 'object' && result !== cropper && input) {
|
|
try {
|
|
input.value = JSON.stringify(result);
|
|
} catch (e) {
|
|
console.log(e.message);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
document.body.onkeydown = function (event) {
|
|
let e = event || window.event;
|
|
|
|
if (e.target !== this || !cropper || this.scrollTop > 300) {
|
|
return;
|
|
}
|
|
|
|
switch (e.keyCode) {
|
|
case 37:
|
|
e.preventDefault();
|
|
cropper.move(-1, 0);
|
|
break;
|
|
|
|
case 38:
|
|
e.preventDefault();
|
|
cropper.move(0, -1);
|
|
break;
|
|
|
|
case 39:
|
|
e.preventDefault();
|
|
cropper.move(1, 0);
|
|
break;
|
|
|
|
case 40:
|
|
e.preventDefault();
|
|
cropper.move(0, 1);
|
|
break;
|
|
}
|
|
};
|
|
|
|
// Import image
|
|
let inputImage = document.getElementById('inputImage');
|
|
|
|
if (URL) {
|
|
inputImage.onchange = function () {
|
|
let files = this.files;
|
|
let file;
|
|
|
|
if (files && files.length) {
|
|
file = files[0];
|
|
|
|
if (/^image\/\w+/.test(file.type)) {
|
|
uploadedImageType = file.type;
|
|
uploadedImageName = file.name;
|
|
|
|
if (uploadedImageURL) {
|
|
URL.revokeObjectURL(uploadedImageURL);
|
|
}
|
|
|
|
image.src = uploadedImageURL = URL.createObjectURL(file);
|
|
|
|
if (cropper) {
|
|
cropper.destroy();
|
|
}
|
|
|
|
cropper = new Cropper(image, options);
|
|
inputImage.value = null;
|
|
} else {
|
|
window.alert('Please choose an image file.');
|
|
}
|
|
}
|
|
};
|
|
} else {
|
|
inputImage.disabled = true;
|
|
inputImage.parentNode.className += ' disabled';
|
|
}
|
|
|
|
|
|
function getRoundedCanvas(sourceCanvas) {
|
|
const roundcanvas = document.createElement('canvas');
|
|
const context = roundcanvas.getContext('2d');
|
|
let width = sourceCanvas.width;
|
|
let height = sourceCanvas.height;
|
|
|
|
roundcanvas.width = width;
|
|
roundcanvas.height = height;
|
|
context.imageSmoothingEnabled = true;
|
|
context.drawImage(sourceCanvas, 0, 0, width, height);
|
|
context.globalCompositeOperation = 'destination-in';
|
|
context.beginPath();
|
|
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
|
|
context.fill();
|
|
return roundcanvas;
|
|
}
|
|
let roundImage = document.getElementById('round-crop');
|
|
let roundButton = document.getElementById('roundButton');
|
|
let roundResult = document.getElementById('roundResult');
|
|
let roundcroppable = false;
|
|
let roundCropper = new Cropper(roundImage, {
|
|
aspectRatio: 1,
|
|
viewMode: 1,
|
|
ready: function () {
|
|
roundcroppable = true;
|
|
},
|
|
});
|
|
|
|
roundButton.onclick = function () {
|
|
let croppedCanvas;
|
|
let roundedCanvas;
|
|
let roundedImage;
|
|
|
|
if (!roundcroppable) {
|
|
return;
|
|
}
|
|
|
|
// Crop
|
|
croppedCanvas = roundCropper.getCroppedCanvas();
|
|
|
|
// Round
|
|
roundedCanvas = getRoundedCanvas(croppedCanvas);
|
|
|
|
// Show
|
|
roundedImage = document.createElement('img');
|
|
roundedImage.src = roundedCanvas.toDataURL()
|
|
roundedImage.classList = "img-fluid w-50";
|
|
roundResult.innerHTML = '';
|
|
roundResult.appendChild(roundedImage);
|
|
};
|
|
}; |