Skip to content

Commit

Permalink
Merge branch '13.0-fix-cropping' into '13.0'
Browse files Browse the repository at this point in the history 
13.0 fix cropping

See merge request typo3-commons/mkcontentai!73
  • Loading branch information
@hannesbochmann
hannesbochmann committed Sep 4, 2024
2 parents 07c824a + 148513f commit 7b94408
Show file tree
Hide file tree
Showing 2 changed files with 71 additions and 114 deletions.
5 changes: 5 additions & 0 deletions Configuration/ContentSecurityPolicies.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@
new UriValue('*.r2.dev'),
new UriValue('*.cloudfront.net')
),
new Mutation(
MutationMode::Extend,
Directive::MediaSrc,
TYPO3\CMS\Core\Security\ContentSecurityPolicy\SourceScheme::data,
),
);

return Map::fromEntries(
Expand Down
180 changes: 66 additions & 114 deletions Resources/Public/JavaScript/MkContentAi.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,131 +21,83 @@ $(document).ready(function () {
`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading`
);
});

const image = document.getElementById('image');
const action = document.getElementById('operationName').value;
const client = document.getElementById("clientApi").value;
const submitButton = document.querySelector('input[type="submit"]');
let customHeight = 256;
let customWidth = 256;
let dragModeValue = 'none';
let viewModeValue = 1;
let cropBoxResizable = false;
let aspectRatio = 1;
let scalable = false;
let autoCropArea = 0;
let zoomable = false;
submitButton.disabled = false;

if (client === "StabilityAiClient" && action === 'extend') {
customHeight = image.height;
customWidth = image.width;
dragModeValue = 'crop';
cropBoxResizable = true;
aspectRatio = NaN;
const image = document.getElementById('image');
const submitButton = document.querySelector('input[type="submit"]');
let dragModeValue = 'none';
let viewModeValue = 1;
let cropBoxResizable = true;
let aspectRatio = 1;
let scalable = false;
let autoCropArea = 0;
let zoomable = true;
let customWidth = image.width;
let customHeight = image.height;
submitButton.disabled = false;

const cropper = new Cropper(image, {
aspectRatio: aspectRatio,
cropBoxResizable: cropBoxResizable,
dragMode: dragModeValue,
zoomable: zoomable,
viewMode: viewModeValue,
scalable: scalable,
autoCropArea: autoCropArea,
crop(event) {
},
ready: function () {
if (document.querySelector('input[name="size"]')) {
document.querySelector('input[name="size"]').click();
}
}
});

if (client === "StabilityAiClient" && action === 'prepareImageToVideo') {
aspectRatio = NaN;
customWidth = document.querySelector('input[name="size"]').getAttribute('data-width') ?? 768;
customHeight = document.querySelector('input[name="size"]').getAttribute('data-height') ?? 768;

const inputs = document.querySelectorAll('input[name="size"]');
let disabledInputsCount = 0;
let element;

for (let i = 0; element = inputs[i]; i++) {
element.disabled = false;
function updateAspectRatio() {
customWidth = document.querySelector('input[name="size"]:checked').getAttribute('data-width');
customHeight = document.querySelector('input[name="size"]:checked').getAttribute('data-height');
aspectRatio = customWidth / customHeight;
cropper.setAspectRatio(aspectRatio);
}

if (false === validateImageDimensionsData(image.width, image.height, element.getAttribute('data-width'), element.getAttribute('data-height'))) {
element.disabled = true;
customWidth = 0;
customHeight = 0;
disabledInputsCount++;
}
}
document.querySelectorAll('input[name="size"]').forEach(function (element) {
element.addEventListener('change', updateAspectRatio);
});

if (inputs.length === disabledInputsCount) {
submitButton.disabled = true;
}
$('.crop-form').on('submit', function (event) {
event.preventDefault();
let minHeight;
let minWidth;

customWidth = parseInt(customWidth, 10);
customHeight = parseInt(customHeight, 10);
if (document.querySelector('input[name="size"]:checked')) {
minWidth = document.querySelector('input[name="size"]:checked').getAttribute('data-width') ?? 256;
minHeight = document.querySelector('input[name="size"]:checked').getAttribute('data-height') ?? 256;
minWidth = parseInt(minWidth, 10);
minHeight = parseInt(minHeight, 10);
}

const cropper = new Cropper(image, {
aspectRatio: aspectRatio,
cropBoxResizable: cropBoxResizable,
dragMode: dragModeValue,
zoomable: zoomable,
viewMode: viewModeValue,
scalable: scalable,
autoCropArea: autoCropArea,
data: {
width: customWidth,
height: customHeight
},
crop(event) {
},
ready: function () {
let naturalWidth = this.cropper.getImageData().naturalWidth;
let naturalHeight = this.cropper.getImageData().naturalHeight;
if (naturalHeight >= 256 && naturalWidth >= 256) {
this.cropper.setCanvasData({
left: 0,
top: 0,
width: naturalWidth,
height: naturalHeight
});
}
if (document.querySelector('input[name="size"]')) {
document.querySelector('input[name="size"]').click();
}
let canvas;
canvas = cropper.getCroppedCanvas({
width: minWidth,
height: minHeight
}
});

$('.crop-form').on('submit', function(event) {
event.preventDefault();

let minHeight;
let minWidth;

if (document.querySelector('input[name="size"]:checked')) {
minWidth = document.querySelector('input[name="size"]:checked').getAttribute('data-width') ?? 256;
minHeight = document.querySelector('input[name="size"]:checked').getAttribute('data-height') ?? 256;
minWidth = parseInt(minWidth, 10);
minHeight = parseInt(minHeight, 10);
}

let canvas = cropper.getCroppedCanvas({
minWidth: minWidth,
minHeight: minHeight
}
);

let croppedImageSrc = canvas.toDataURL('image/png');
document.getElementById('croppedImage').src = croppedImageSrc;
document.getElementById('CroppedBase64').value = croppedImageSrc;
this.submit();
});
);

document.getElementById('cropSize').addEventListener('change', function (e) {
if (e.target && e.target.matches('.form-check-input')) {
const newWidth = e.target.getAttribute('data-width');
const newHeight = e.target.getAttribute('data-height');
let croppedImageSrc = canvas.toDataURL('image/png');
document.getElementById('croppedImage').src = croppedImageSrc;
document.getElementById('CroppedBase64').value = croppedImageSrc;
this.submit();
});

if (newWidth && newHeight) {
cropper.setCropBoxData({
width: parseInt(newWidth, 10),
height: parseInt(newHeight, 10)
});
}
}
});
document.getElementById('cropSize').addEventListener('change', function (e) {
if (e.target && e.target.matches('.form-check-input')) {
const newWidth = e.target.getAttribute('data-width');
const newHeight = e.target.getAttribute('data-height');

function validateImageDimensionsData(imageWidth, imageHeight, inputWidth, inputHeight) {
if (imageWidth < inputWidth || imageHeight < inputHeight) {
return false;
if (newWidth && newHeight) {
cropper.setCropBoxData({
width: parseInt(newWidth, 10),
height: parseInt(newHeight, 10)
});
}
}
});
});

0 comments on commit 7b94408

Please sign in to comment.