856 lines
26 KiB
Vue
856 lines
26 KiB
Vue
<template>
|
|
<div class="container ImageInput p-0">
|
|
<div class="row">
|
|
<div :class="`col-12 ${intPreview ? 'col-md-6' : ''} form-group`">
|
|
<label
|
|
v-if="intPreview"
|
|
:for="intId"
|
|
class="col-form-label"
|
|
>
|
|
<b>{{ __("Choisir un fichier") }}</b>
|
|
</label>
|
|
<div class="input-group">
|
|
<button
|
|
@click.prevent="chooseAFile"
|
|
class="btn btn-outline-secondary"
|
|
type="button"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Modifier l\'image source')"
|
|
>
|
|
<i class="fa-solid fa-folder-open" />
|
|
</button>
|
|
<input
|
|
:id="intId"
|
|
ref="actualImage"
|
|
@change="changedImage"
|
|
type="file"
|
|
class="d-none"
|
|
:name="intName"
|
|
accept=".jpg,.jpeg,.gif,.png"
|
|
:aria-describedby="`Help${intId}`"
|
|
>
|
|
<input
|
|
v-if="typeof intValue === 'string'"
|
|
class="d-none"
|
|
:name="intName"
|
|
type="text"
|
|
:value="intValue"
|
|
>
|
|
<input
|
|
@click.prevent="chooseAFile"
|
|
type="text"
|
|
:value="intValueFileName"
|
|
class="form-control rightAligned"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Modifier l\'image source')"
|
|
:aria-describedby="`Help${intId}`"
|
|
readonly
|
|
>
|
|
<button
|
|
v-if="!intRequired"
|
|
@click.prevent="removeFile"
|
|
class="btn btn-outline-danger"
|
|
type="button"
|
|
>
|
|
<i class="fas fa-eraser" />
|
|
</button>
|
|
<button
|
|
v-if="!intPreview && intValue"
|
|
class="btn btn-warning"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
:data-bs-target="`#ModalPreview${intId}`"
|
|
>
|
|
<span
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Visualiser l\'image')"
|
|
><i class="fa-solid fa-eye" /></span>
|
|
</button>
|
|
<button
|
|
@click.prevent="prepareImageEditor($event)"
|
|
:disabled="!intHasImage"
|
|
:class="`btn ${!intHasModdedImage ? 'btn-primary' : 'btn-success'}`"
|
|
type="button"
|
|
data-bs-toggle="modal"
|
|
:data-bs-target="`#Modal${intId}`"
|
|
>
|
|
<span
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Redimensionner l\'image')"
|
|
>
|
|
<i class="fa-solid fa-crop" />
|
|
</span>
|
|
</button>
|
|
<span
|
|
v-if="intHasModdedImage"
|
|
class="input-group-text text-success"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Image redimensionée')"
|
|
>
|
|
<i class="fa-solid fa-wand-magic" />
|
|
</span>
|
|
</div>
|
|
<small
|
|
:id="`Help${intId}`"
|
|
class="form-text text-muted"
|
|
>{{ intHelper }}</small>
|
|
</div>
|
|
<div
|
|
v-if="intPreview"
|
|
:class="`col-12 ${intPreview ? 'col-md-6' : ''} form-group`"
|
|
>
|
|
<small
|
|
v-if="intValue"
|
|
:id="`PreviewHelp${intId}`"
|
|
class="form-text text-muted d-block"
|
|
>{{ __("Prévisualisation de l'image") }}
|
|
<span
|
|
v-if="intOriginalFile"
|
|
class="fw-bold"
|
|
>
|
|
{{ humanFileSize(intOriginalFile.size) }}
|
|
{{ `largeur ${intOriginalFileDimensions.width}px` }}
|
|
{{ `hauteur ${intOriginalFileDimensions.height}px` }}
|
|
</span>
|
|
</small>
|
|
<img
|
|
v-if="intValue"
|
|
class="img-fluid"
|
|
:src="intValue"
|
|
:alt="__('Image placeholder')"
|
|
:aria-describedby="`PreviewHelp${intId}`"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
:id="`Modal${intId}`"
|
|
class="modal"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
>
|
|
<div
|
|
class="modal-dialog modal-xl"
|
|
role="document"
|
|
>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
{{ __("Modification d'image avant import") }}
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
:aria-label="__('Fermer la fenêtre')"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Fermer la fenêtre sans valider le contenu')"
|
|
/>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col text-center">
|
|
<div class="btn-group me-4 mt-2">
|
|
<button
|
|
class="btn btn-warning"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Réinitialiser l\'image')"
|
|
@click.prevent="reset()"
|
|
>
|
|
<i class="fa fa-sync-alt" />
|
|
</button>
|
|
</div>
|
|
<div class="btn-group me-4 mt-2">
|
|
<button
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Zoom avant')"
|
|
@click.prevent="zoom(0.1)"
|
|
>
|
|
<i class="fa fa-search-plus" />
|
|
</button>
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Zoom arrière')"
|
|
@click.prevent="zoom(-0.1)"
|
|
>
|
|
<i class="fa fa-search-minus" />
|
|
</a>
|
|
</div>
|
|
<div class="btn-group me-4 mt-2">
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Déplacer vers la gauche')"
|
|
@click.prevent="move(-10, 0)"
|
|
>
|
|
<i class="fa fa-arrow-left" />
|
|
</a>
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Déplacer vers la droite')"
|
|
@click.prevent="move(10, 0)"
|
|
>
|
|
<i class="fa fa-arrow-right" />
|
|
</a>
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Déplacer vers le haut')"
|
|
@click.prevent="move(0, -10)"
|
|
>
|
|
<i class="fa fa-arrow-up" />
|
|
</a>
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Déplacer vers le bas')"
|
|
@click.prevent="move(0, 10)"
|
|
>
|
|
<i class="fa fa-arrow-down" />
|
|
</a>
|
|
</div>
|
|
<div class="btn-group me-4 mt-2">
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Mirroir Horizontal')"
|
|
@click.prevent="scale(true)"
|
|
>
|
|
<i class="fa fa-arrows-alt-h" />
|
|
</a>
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Mirroir Vertical')"
|
|
@click.prevent="scale(false)"
|
|
>
|
|
<i class="fa fa-arrows-alt-v" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="form-group d-flex flex-row">
|
|
<div class="rotateButton">
|
|
<span class="text-dark">{{ __("Rotation") }} :</span>
|
|
<div class="btn-group mt-1">
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Rotation sens anti-horaire')"
|
|
@click.prevent="rotate(-45)"
|
|
>
|
|
<i class="fa fa-undo-alt" />
|
|
</a>
|
|
<a
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Rotation sens horaire')"
|
|
@click.prevent="rotate(45)"
|
|
>
|
|
<i class="fa fa-redo-alt" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="mt-1 ms-4 rotateDrag">
|
|
<label
|
|
for="range"
|
|
class="form-label me-4"
|
|
>{{
|
|
__(":deg degrès", {
|
|
deg: String(intRotationText),
|
|
})
|
|
}}
|
|
</label>
|
|
<input
|
|
ref="rotationSlider"
|
|
@input.stop="rotationChange($event as Event)"
|
|
@change.stop="rotateTo(Number.parseInt(($event.target as HTMLInputElement).value))"
|
|
type="range"
|
|
class="form-range"
|
|
id="range"
|
|
min="0"
|
|
max="360"
|
|
value="0"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row mt-3">
|
|
<div class="col-12 col-md-6 p-0 mb-3">
|
|
<img
|
|
class="imageModification"
|
|
ref="imgEditor"
|
|
src=""
|
|
>
|
|
</div>
|
|
<div
|
|
ref="previewBox"
|
|
class="col-12 col-md-6 p-0 bg-light previewIMG"
|
|
>
|
|
<div
|
|
:id="`Preview${intId}`"
|
|
:style="intPreviewStyle"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button
|
|
type="button"
|
|
class="btn btn-secondary"
|
|
data-bs-dismiss="modal"
|
|
:aria-label="__('Fermer la fenêtre sans valider le contenu')"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Fermer la fenêtre sans valider le contenu')"
|
|
>
|
|
{{ __("Fermer") }}
|
|
</button>
|
|
<button
|
|
@click.prevent="exportToBlob"
|
|
type="button"
|
|
class="btn btn-primary"
|
|
data-bs-toggle="tooltip"
|
|
data-bs-dismiss="modal"
|
|
:title="__('Valider le contenu et fermer la fenêtre')"
|
|
>
|
|
{{ __("Valider") }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="!intPreview && intValue"
|
|
:id="`ModalPreview${intId}`"
|
|
class="modal"
|
|
tabindex="-1"
|
|
role="dialog"
|
|
data-bs-backdrop="static"
|
|
data-bs-keyboard="false"
|
|
>
|
|
<div
|
|
class="modal-dialog modal-xl"
|
|
role="document"
|
|
>
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">
|
|
{{ __("Prévisualisation") }}
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
class="btn-close"
|
|
data-bs-dismiss="modal"
|
|
:aria-label="__('Fermer la fenêtre')"
|
|
data-bs-toggle="tooltip"
|
|
:title="__('Fermer la fenêtre sans valider le contenu')"
|
|
/>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<small
|
|
:id="`PreviewHelp${intId}`"
|
|
class="form-text text-muted d-block"
|
|
>{{
|
|
__("Prévisualisation de l'image")
|
|
}}</small>
|
|
<img
|
|
class="img-fluid"
|
|
:src="intValue"
|
|
:alt="__('Image placeholder')"
|
|
:aria-describedby="`PreviewHelp${intId}`"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent} from "vue";
|
|
import Cropper from "cropperjs";
|
|
import { Tooltip } from "bootstrap";
|
|
import trans from "../../modules/trans";
|
|
|
|
const UNITS = ["byte", "kilobyte", "megabyte", "gigabyte", "terabyte", "petabyte"];
|
|
const BYTES_PER_KB = 1024;
|
|
|
|
export default defineComponent({
|
|
mixins: [trans],
|
|
emits: ["browseFile"],
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "");
|
|
// * INIT Bootstrap tooltips
|
|
let tooltipTriggerList = [].slice.call(
|
|
document.querySelectorAll(".ImageInput [data-bs-toggle=\"tooltip\"]")
|
|
);
|
|
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|
return new Tooltip(tooltipTriggerEl, {
|
|
delay: { show: 1000, hide: 300 },
|
|
});
|
|
});
|
|
if (json.length) {
|
|
// * Init uppon Laravel Blade
|
|
const data = JSON.parse(json);
|
|
this.intId = data.id;
|
|
this.intName = data.name;
|
|
this.intHelper = data.helper ?? "";
|
|
this.intWidth = data.width;
|
|
this.intHeight = data.height;
|
|
this.intValue = String(data.value);
|
|
if (this.intValue.length) {
|
|
this.intValueFileName = this.intValue;
|
|
this.intValue = this.intValue.replace(/^\/|^/, "/");
|
|
}
|
|
if (data.preview !== undefined) {
|
|
this.intPreview = data.preview ? true : false;
|
|
}
|
|
if (data.required !== undefined) {
|
|
this.intRequired = data.required ? true : false;
|
|
}
|
|
if (data.browseEvent !== undefined) {
|
|
this.intBrowseEvent = data.browseEvent ? true : false;
|
|
}
|
|
} else {
|
|
// * Init Uppon Vue component
|
|
this.intId = this.id;
|
|
this.intName = this.name;
|
|
this.intHelper = this.helper;
|
|
this.intWidth = this.width;
|
|
this.intHeight = this.height;
|
|
this.intValue = this.value;
|
|
if (this.intValue.length) {
|
|
this.intValueFileName = this.intValue;
|
|
this.intValue = this.intValue.replace(/^\/|^/, "/");
|
|
}
|
|
this.intPreview = this.preview;
|
|
this.intRequired = this.required;
|
|
this.intBrowseEvent = this.browseEvent;
|
|
}
|
|
this.intHasImage = false;
|
|
},
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
required: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
helper: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
preview: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
browseEvent: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data(): {
|
|
intId: string;
|
|
intValue: string;
|
|
intValueFileName: string;
|
|
intHelper: string;
|
|
intName: string;
|
|
intRequired: boolean;
|
|
intWidth: number;
|
|
intHeight: number;
|
|
intPreview: boolean;
|
|
|
|
intBrowseEvent: boolean;
|
|
|
|
intRotationText: number;
|
|
intRotationValue: number;
|
|
intScaleX: number;
|
|
intScaleY: number;
|
|
intHasImage: boolean;
|
|
intHasModdedImage: boolean;
|
|
intCropper: Cropper | null;
|
|
|
|
intOriginalFile: File | null;
|
|
intOriginalFileDimensions: {
|
|
height: number;
|
|
width: number;
|
|
};
|
|
intOriginalFileName: string;
|
|
intPreviewStyle: string;
|
|
} {
|
|
return {
|
|
intId: "",
|
|
intValue: "",
|
|
intValueFileName: this.__("Sélectionnez une image"),
|
|
intHelper: "",
|
|
intName: "",
|
|
intRequired: true,
|
|
intWidth: 0,
|
|
intHeight: 0,
|
|
intPreview: true,
|
|
|
|
intBrowseEvent: false,
|
|
|
|
intRotationText: 0,
|
|
intRotationValue: 0,
|
|
intScaleX: 1,
|
|
intScaleY: 1,
|
|
intHasImage: false,
|
|
intHasModdedImage: false,
|
|
intCropper: null,
|
|
|
|
intOriginalFile: null,
|
|
intOriginalFileDimensions: {
|
|
height: 0,
|
|
width: 0,
|
|
},
|
|
intOriginalFileName: "",
|
|
intPreviewStyle: "",
|
|
};
|
|
},
|
|
computed: {
|
|
imageRatio() {
|
|
return this.intWidth / this.intHeight;
|
|
},
|
|
cropperOption(): Cropper.Options {
|
|
return {
|
|
autoCrop: true,
|
|
background: true,
|
|
autoCropArea: 1,
|
|
// * full crop box
|
|
viewMode: 0,
|
|
dragMode: "move",
|
|
movable: true,
|
|
rotatable: true,
|
|
scalable: true,
|
|
zoomable: true,
|
|
zoomOnTouch: false,
|
|
zoomOnWheel: false,
|
|
cropBoxMovable: true,
|
|
cropBoxResizable: false,
|
|
toggleDragModeOnDblclick: false,
|
|
aspectRatio: this.intWidth / this.intHeight,
|
|
preview: `#Preview${this.intId}`,
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
intRotationValue(value) {
|
|
if (!(this.intCropper instanceof Cropper)) {
|
|
throw new Error("cropped not initialized");
|
|
}
|
|
this.intCropper.rotateTo(value);
|
|
},
|
|
intValue() {
|
|
if (this.intBrowseEvent) {
|
|
this.intHasImage = true;
|
|
}
|
|
},
|
|
value() {
|
|
this.intValue = this.value.replace(/^\/|^/, "/");
|
|
this.intValueFileName = this.value;
|
|
},
|
|
},
|
|
methods: {
|
|
previewStyleCompute() {
|
|
const previewBox = this.$refs.previewBox as HTMLElement,
|
|
style = window.getComputedStyle(previewBox),
|
|
targetWidth = Number.parseFloat(style.width) / 1.2,
|
|
targetHeight =
|
|
(this.intHeight * Number.parseFloat(style.width)) / this.intWidth / 1.2;
|
|
this.intPreviewStyle = `width: ${targetWidth.toFixed(
|
|
3
|
|
)}px;height:${targetHeight.toFixed(3)}px;`;
|
|
},
|
|
reset() {
|
|
if (!(this.intCropper instanceof Cropper)) {
|
|
return;
|
|
}
|
|
this.intCropper.reset();
|
|
},
|
|
zoom(v: number) {
|
|
if (!(this.intCropper instanceof Cropper)) {
|
|
return;
|
|
}
|
|
this.intCropper.zoom(v);
|
|
},
|
|
move(x: number, y: number) {
|
|
if (!(this.intCropper instanceof Cropper)) {
|
|
return;
|
|
}
|
|
this.intCropper.move(x, y);
|
|
},
|
|
scale(horizontal: boolean) {
|
|
if (!(this.intCropper instanceof Cropper)) {
|
|
return;
|
|
}
|
|
if (horizontal) {
|
|
this.intScaleX = -1 / this.intScaleX;
|
|
this.intCropper.scaleX(this.intScaleX);
|
|
} else {
|
|
this.intScaleY = -1 / this.intScaleY;
|
|
this.intCropper.scaleY(this.intScaleY);
|
|
}
|
|
},
|
|
rotate(value: number) {
|
|
const rotationSlider = this.$refs.rotationSlider as HTMLInputElement;
|
|
let res = this.intRotationValue + value;
|
|
res = res < 0 ? 0 : res;
|
|
res = res > 360 ? 360 : res;
|
|
this.intRotationValue = res;
|
|
this.intRotationText = this.intRotationValue;
|
|
rotationSlider.value = String(this.intRotationValue);
|
|
},
|
|
rotateTo(value: number) {
|
|
value = value < 0 ? 0 : value;
|
|
value = value > 360 ? 360 : value;
|
|
this.intRotationValue = value;
|
|
this.intRotationText = this.intRotationValue;
|
|
},
|
|
rotationChange(e: Event) {
|
|
const el = e.target;
|
|
if (!el || !(el instanceof HTMLInputElement)) {
|
|
throw new Error("target element is not an input");
|
|
}
|
|
this.rotateTo(Number.parseFloat(el.value));
|
|
},
|
|
chooseAFile() {
|
|
const actualImage = this.$refs.actualImage as HTMLInputElement;
|
|
if (this.intBrowseEvent) {
|
|
this.$emit("browseFile", this.intId);
|
|
return;
|
|
}
|
|
actualImage.click();
|
|
},
|
|
removeFile() {
|
|
const actualImage = this.$refs.actualImage as HTMLInputElement;
|
|
actualImage.value = "";
|
|
this.intValueFileName = this.__("Sélectionnez une image");
|
|
this.intValue = "";
|
|
},
|
|
changedImage(e: Event) {
|
|
const self = this,
|
|
reader = new FileReader();
|
|
const el = e.target;
|
|
if (!el || !(el instanceof HTMLInputElement)) {
|
|
throw new Error("confirmDoneJS can only be executed on an exising form");
|
|
}
|
|
if (!el.files) {
|
|
throw new Error();
|
|
}
|
|
self.intHasImage = true;
|
|
reader.addEventListener(
|
|
"load",
|
|
() => {
|
|
// On convertit l'image en une chaîne de caractères base64.
|
|
self.intValue = String(reader.result);
|
|
},
|
|
false
|
|
);
|
|
if (el.files[0]) {
|
|
self.intOriginalFile = el.files[0];
|
|
reader.readAsDataURL(el.files[0]);
|
|
reader.onloadend = () => this.fetchDataUrlImageSizes(String(reader.result));
|
|
this.intValueFileName = el.files[0].name;
|
|
}
|
|
},
|
|
prepareImageEditor(e: Event) {
|
|
const self = this,
|
|
actualImage = this.$refs.actualImage as HTMLInputElement,
|
|
imgEditor = this.$refs.imgEditor as HTMLImageElement,
|
|
createCropper = () => {
|
|
if (self.intCropper) {
|
|
self.intCropper.destroy();
|
|
}
|
|
self.intCropper = new Cropper(imgEditor, self.cropperOption);
|
|
};
|
|
|
|
if (!self.browseEvent) {
|
|
if (!actualImage || !actualImage.files) {
|
|
throw new Error("actualImage is not defined");
|
|
}
|
|
self.intOriginalFile = actualImage.files[0];
|
|
self.intOriginalFileName = actualImage.files[0].name;
|
|
imgEditor.src = URL.createObjectURL(actualImage.files[0]);
|
|
|
|
self.previewStyleCompute();
|
|
this.$nextTick(() => createCropper());
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
this.$nextTick(() => {
|
|
fetch(self.value.replace(/^\/|^/, "/"))
|
|
.then((response) => {
|
|
self.intOriginalFileName = response.url.substring(
|
|
response.url.lastIndexOf("/") + 1
|
|
);
|
|
return response.blob();
|
|
})
|
|
.then((blob: Blob) => {
|
|
imgEditor.src = URL.createObjectURL(blob);
|
|
|
|
self.previewStyleCompute();
|
|
self.$nextTick(() => createCropper());
|
|
});
|
|
});
|
|
},
|
|
dataURLtoBlob(dataUrl: string) {
|
|
const arr = dataUrl.split(",");
|
|
if (!arr[0] || !arr[1]) {
|
|
throw new Error("invalid data url");
|
|
}
|
|
const mime = arr[0].match(/:(.*?);/);
|
|
if (!mime || mime.length < 2) {
|
|
throw new Error("invalid mime");
|
|
}
|
|
const bstr = window.atob(arr[1]);
|
|
let n = bstr.length;
|
|
const u8arr = new Uint8Array(n);
|
|
while (n--) {
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
return new Blob([u8arr], { type: mime[1] });
|
|
},
|
|
fetchDataUrlImageSizes(dataUrl: string) {
|
|
const img = new Image(),
|
|
self = this;
|
|
try {
|
|
img.onload = () => {
|
|
self.intOriginalFileDimensions.width = img.width;
|
|
self.intOriginalFileDimensions.height = img.height;
|
|
};
|
|
img.src = dataUrl;
|
|
} catch (e) {
|
|
self.intOriginalFileDimensions.width = img.width;
|
|
self.intOriginalFileDimensions.height = img.height;
|
|
}
|
|
},
|
|
exportToBlob() {
|
|
const self = this,
|
|
actualImage = this.$refs.actualImage as HTMLInputElement,
|
|
container = new DataTransfer();
|
|
if (!(self.intCropper instanceof Cropper)) {
|
|
return;
|
|
}
|
|
if (!actualImage.files) {
|
|
throw new Error();
|
|
}
|
|
self.intHasModdedImage = true;
|
|
self.intValue = self.intCropper
|
|
.getCroppedCanvas({
|
|
fillColor: "rgba(0, 0, 0, 0)",
|
|
width: self.intWidth,
|
|
height: self.intHeight,
|
|
imageSmoothingEnabled: true,
|
|
imageSmoothingQuality: "high",
|
|
})
|
|
.toDataURL("image/png");
|
|
this.fetchDataUrlImageSizes(self.intValue);
|
|
const file = new File([self.dataURLtoBlob(self.intValue)], self.intOriginalFileName, {
|
|
type: "image/png",
|
|
lastModified: new Date().getTime(),
|
|
});
|
|
this.intOriginalFile = file;
|
|
container.items.add(file);
|
|
actualImage.files = container.files;
|
|
},
|
|
humanFileSize(sizeBytes: number | bigint): string {
|
|
let size = Math.abs(Number(sizeBytes));
|
|
|
|
let u = 0;
|
|
while (size >= BYTES_PER_KB && u < UNITS.length - 1) {
|
|
size /= BYTES_PER_KB;
|
|
++u;
|
|
}
|
|
|
|
return new Intl.NumberFormat([], {
|
|
style: "unit",
|
|
unit: UNITS[u],
|
|
unitDisplay: "short",
|
|
maximumFractionDigits: 1,
|
|
}).format(size);
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scopped>
|
|
@import "~cropperjs/dist/cropper.css";
|
|
@import "../../../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
|
|
|
|
.ImageInput {
|
|
/* Ensure the size of the image fit the container perfectly */
|
|
.imageModification {
|
|
display: block;
|
|
|
|
/* This rule is very important, please don't ignore this */
|
|
max-width: 100%;
|
|
}
|
|
.rotateButton {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.rotateDrag {
|
|
display: flex;
|
|
flex-direction: column-reverse;
|
|
width: 100%;
|
|
& > input {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.previewIMG {
|
|
position: relative;
|
|
& > div {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid black;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
}
|
|
}
|
|
input.rightAligned {
|
|
direction: ltr !important;
|
|
overflow: hidden !important;
|
|
}
|
|
input.rightAligned:not(:focus) {
|
|
direction: rtl !important;
|
|
text-align: left !important;
|
|
text-overflow: ellipsis !important;
|
|
}
|
|
}
|
|
</style>
|