utilisation de l'api rest pour preview crop/rotate + correctif remplacement de ressource (4f68cada) · Commits · certic / Vue Jama

src/components/JamaResource.vue

+5 −2

Original line number	Diff line number	Diff line
		@@ -400,7 +400,10 @@ export default {
		replaceId = r[0].id
		}
		if(replaceId){
		await this.$store.dispatch('replaceResource', {from : this.resource.id, to : replaceId});
		await this.$store.dispatch('replaceResource', {
		from : replaceId,
		to : this.resource.id
		});
		EventBus.$emit('goto-resource', this.currentCollection.id, replaceId);
		}
		else {
		@@ -410,7 +413,7 @@ export default {
		},

		collectionLinkClick(collection) {
		this.$emit('collection-selected', collection/, this.ancestorPath(ancestor)/);
		this.$emit('collection-selected', collection);
		},

		tagAdded(tag) {

src/components/editors/ImageResourceEditor.vue

+83 −30

Original line number	Diff line number	Diff line
		@@ -2,15 +2,23 @@
		<v-card class="jama-image-editor ma-0 pa-0 flex justify-center">
		<v-card-actions class="flex justify-center pa-0 pt-2">
		<template v-if="!preview">
		<v-btn @click="preview=true; drawPreview()" :disabled="loading">Aperçu</v-btn>
		<v-btn @click="preview=true;" :disabled="loading">Aperçu</v-btn>
		<v-btn color="primary" @click="doIt()" :loading="loading" :disabled="loading">
		VALIDER
		</v-btn>
		<v-btn color="secondary" @click="reset();resetZoom();$emit('close')" :disabled="loading">ANNULER</v-btn>
		</template>
		<template v-else>
		<v-progress-circular
		v-if="loading"
		indeterminate
		color="primary"
		></v-progress-circular>
		<v-btn v-else @click="preview=false">
		Quitter l'aperçu
		</v-btn>
		</template>

		</v-card-actions>
		<v-card-text v-if="this.imageDimensions && this.maxWidth" class="text-center ma-0 pa-0 d-flex justify-center"
		@mousemove="mouseMove($event)"
		@@ -50,7 +58,10 @@

		<!-- <div v-else id="img-preview" :style="getPreviewImageCSS"></div>-->

		<canvas v-else id="preview-canvas" class="mt-2"></canvas>
		<v-container v-else>
		<img :src="previewImage" />
		</v-container>
		<!-- <canvas v-else id="preview-canvas" class="mt-2"></canvas>-->

		<v-card v-if="!preview" id="form" class="d-flex flex-column caption" width="80px" color="#272727">
		<v-card-text>
		@@ -182,6 +193,19 @@ export default {

		normalizedRotation(){
		return this.rotation >=0 ? this.rotation : Number(this.rotation) + 360;
		},

		previewImage(){
		return this.endPoint + this.resource.hash
		+ '/rotate/'
		+ this.normalizedRotation
		+ '/scale/'
		+ this.scale
		+ '/crop/'
		+ this.cropTop +','
		+ this.cropRight +','
		+ this.cropBottom +','
		+ this.cropLeft
		}
		},

		@@ -252,6 +276,11 @@ export default {
		},

		doIt() {

		this.$jamaConfirm(
		this.$t('confirm'),
		(res) => {
		if (res) {
		this.loading = true;
		this.$jamaClient.pictureRotateCrop(this.resource.id, this.normalizedRotation, this.cropTop, this.cropRight, this.cropBottom, this.cropLeft).then((res) => {
		if (res)
		@@ -264,6 +293,11 @@ export default {
		this.resetZoom();
		this.loading = false;
		})
		}
		}
		)


		},

		updateRenderedDimensions() {
		@@ -430,19 +464,25 @@ export default {
		},

		drawPreview() {
		setTimeout(() => {
		let canvas = document.getElementById('preview-canvas');
		const w = this.renderedImageDimensions.width - (this.cropLeft + this.cropRight) * this.scale;
		const h = this.renderedImageDimensions.height - (this.cropTop + this.cropBottom) * this.scale
		canvas.width = w;
		canvas.height = h;
		let ctx = canvas.getContext('2d');
		let img = new Image();
		img.onload = () => {
		ctx.drawImage(img, this.cropLeft * this.scale, this.cropTop * this.scale, w, h, 0, 0, w, h);
		};
		img.src = this.scaledAndRotatedImageUrl;
		}, 500)//waiting for canvas dom injection
		// console.log("PREVIEW");
		// console.log('cleft ->' + this.cropLeft);
		// console.log('scale ->' + this.scale);
		// this.loading = true;
		// setTimeout(() => {
		// let canvas = document.getElementById('preview-canvas');
		// const w = this.renderedImageDimensions.width - (this.cropLeft + this.cropRight) * this.scale;
		// const h = this.renderedImageDimensions.height - (this.cropTop + this.cropBottom) * this.scale
		// canvas.width = w;
		// canvas.height = h;
		// let ctx = canvas.getContext('2d');
		// ctx.clearRect(0, 0, canvas.width, canvas.height);
		// let img = new Image();
		// img.onload = () => {
		// ctx.drawImage(img, this.cropLeft * this.scale, this.cropTop * this.scale, w, h, 0, 0, w, h);
		// this.loading = false;
		// };
		// img.src = this.scaledAndRotatedImageUrl;
		// }, 1000)//waiting for canvas dom injection

		},

		@@ -594,3 +634,16 @@ input[type=color] {
		top: -3px;
		}
		</style>


		<i18n>
		{
		"en": {
		"confirm": "confirm ?"
		},
		"fr": {
		"confirm": "Confirmer la modification de la ressource ?"

		}
		}
		</i18n>
		No newline at end of file