73 lines
3.0 KiB
Plaintext
73 lines
3.0 KiB
Plaintext
{{- /*gotype: crud-generator/html_components.CropImage*/ -}}
|
|
{{ define "cropImage" }}
|
|
<div>
|
|
<img id="crop-image" src="{{.ImageUrl}}" alt="Image to crop"
|
|
style="max-width: 100%; display: block">
|
|
</div>
|
|
<div class="py-5">
|
|
<form
|
|
id="cropForm"
|
|
data-hx-encoding="multipart/form-data"
|
|
data-hx-target="#{{.ImageId}}-imageDisplay"
|
|
data-hx-push-url="false"
|
|
data-hx-put="{{ .SaveUrl}}"
|
|
>
|
|
<input type="file" name="image" id="imageInput" class="hidden">
|
|
<button type="submit" id="cropTrigger" class="hidden"></button>
|
|
<button id="save" {{template "buttonStyle"}} type="button"
|
|
>
|
|
Save
|
|
</button>
|
|
</form>
|
|
<button id="rotate" {{template "buttonStyle"}} type="button">Rotate</button>
|
|
<button {{template "buttonStyle"}} type="button"
|
|
data-hx-target="#{{.ImageId}}-imageDisplay"
|
|
data-hx-push-url="false"
|
|
data-hx-get="{{ .CancelUrl}}"
|
|
>Cancel
|
|
</button>
|
|
<progress id="cropProgress" value="0" max="100" style="width: 100%"></progress>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const image = document.getElementById('crop-image');
|
|
const cropper = new Cropper(image, {
|
|
rotatable: true,
|
|
crop(event) {
|
|
},
|
|
});
|
|
document.getElementById('rotate').addEventListener('click', function () {
|
|
image.cropper.rotate(90);
|
|
});
|
|
|
|
htmx.on('#cropForm', 'htmx:xhr:progress', function (evt) {
|
|
let progressValue = evt.detail.loaded / evt.detail.total * 100;
|
|
htmx.find('#cropProgress').setAttribute('value', progressValue)
|
|
});
|
|
|
|
htmx.on('body', 'htmx:afterSwap', function (evt) {
|
|
if (evt.target.tagName.toLowerCase() !== 'body') {
|
|
return
|
|
}
|
|
document.querySelectorAll('.crop-image').forEach((img) => {
|
|
const originalSource = img.getAttribute('data-original-source')
|
|
img.src = originalSource + '&t=' + new Date().getTime()
|
|
});
|
|
});
|
|
|
|
document.getElementById('save').addEventListener('click', function (evt) {
|
|
evt.preventDefault()
|
|
const canvas = cropper.getCroppedCanvas();
|
|
canvas.toBlob((blob) => {
|
|
// https://stackoverflow.com/a/66466855
|
|
const file = new File([blob], 'image.jpeg', {type: 'image/jpeg'});
|
|
const container = new DataTransfer();
|
|
container.items.add(file);
|
|
document.getElementById('imageInput').files = container.files
|
|
document.getElementById('cropTrigger').click()
|
|
}, 'image/jpeg');
|
|
});
|
|
})()
|
|
</script>
|
|
{{end}}
|