peter/doneit-web
1
0
Fork 0
mirror of https://code.equilibrium.co.ao/ITO/doneit-web.git synced 2026-04-18 12:37:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

added croppe to new publications on mobile

Browse Source
This commit is contained in:
Equilibrium ITO
2024-03-27 10:21:54 +01:00
parent bce2a4f0f0
commit a6c8265ab0
3 changed files with 194 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/modals/crop-image/crop-image.page.html
+24 -3
View File
@@ -6,9 +6,9 @@
<ion-content>
<!-- <div style="height: 100%; width: 100%;">
<div style="height: 100%; width: 100%;">
<image-cropper
[imageBase64]="this.capturedImage"
[imageBase64]="this.base64ToCroppe"
[maintainAspectRatio]="true"
[aspectRatio]="1 / 1"
format="jpeg"
@@ -17,6 +17,27 @@
(imageLoaded)="imageLoaded($event)"
(loadImageFailed)="loadImageFailed()"
></image-cropper>
</div> -->
</div>
<!-- <div>
<button (click)="save()">Salvar</button>
<button (click)="cancel()">Cancelar</button>
</div> -->
<ion-footer class="ion-no-border">
<ion-toolbar class="footer-toolbar">
<ion-buttons slot="start">
<button class="btn-ok" fill="clear" color="#fff" (click)="save()">
<ion-label>Gravar</ion-label>
</button>
</ion-buttons>
<ion-buttons slot="end">
<button class="btn-cancel" fill="clear" color="#061b52" (click)="cancel()">
<ion-label>Cancelar</ion-label>
</button>
</ion-buttons>
</ion-toolbar>
</ion-footer>
</ion-content>
src/app/modals/crop-image/crop-image.page.ts
+27 -13
View File
@@ -1,4 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { NavParams } from '@ionic/angular';
import { ImageCroppedEvent, ImageCropperComponent } from 'ngx-image-cropper';
@Component({
@@ -12,10 +14,18 @@ export class CropImagePage implements OnInit {
croppedImage: any = '';
@ViewChild('cropper') cropper: ImageCropperComponent;
capturedImage: any = "";
base64ToCroppe = "";
constructor() { }
constructor(
private navParams: NavParams,
private modalController: ModalController,
) {
this.base64ToCroppe = this.navParams.get('base64ToCroppe')
console.log('To cropp',this.base64ToCroppe)
}
ngOnInit() {
console.log('To cropp',this.base64ToCroppe)
}
fileChangeEvent(event: any): void {
@@ -28,19 +38,23 @@ export class CropImagePage implements OnInit {
console.log('Croped image 22',this.croppedImage)
// event.blob can be used to upload the cropped image
}
/* cropperReady() {
if(this.croppedImage != '')
var fileObject = {
FileBase64: this.croppedImage,
FileExtension: 'jpeg',
OriginalFileName: 'image',
FileSize: this.fileSizeToMB(this.croppedImage.length)
}
this.seletedContent.push(fileObject)
return true
imageLoaded($event){
}
loadImageFailed() {
// show message
} */
console.log('cropp iage faile')
}
save() {
this.modalController.dismiss({
base64ToCroppe: this.croppedImage
});
}
cancel() {
this.modalController.dismiss()
}
}
src/app/pages/publications/new-publication/new-publication.page.ts
+143 -135
View File
@@ -37,6 +37,7 @@ import { VideoconvertService } from 'src/app/services/videoconvert.service'
import { PublicationAttachmentEntity } from 'src/app/shared/publication/upload/upload-streaming.service';
import { PublicationFromMvService } from "src/app/shared/publication/upload/publication-from-mv.service"
import { File } from '../../../models/chatMethod';
import { CropImagePage } from 'src/app/modals/crop-image/crop-image.page';
const config = {
quality: 0.5,
@@ -160,7 +161,7 @@ export class NewPublicationPage implements OnInit {
)
})
for(const files of newFiles) {
for (const files of newFiles) {
this.PublicationFromMvService.form.Files.push(files)
}
}
@@ -203,36 +204,9 @@ export class NewPublicationPage implements OnInit {
resultType: CameraResultType.Base64,
source: CameraSource.Camera
});
console.log(capturedImage)
this.capturedImage = 'data:image/jpeg;base64,' + capturedImage.base64String;
this.capturedImageTitle = 'foto';
const compressedImage = await this.compressImageBase64(
this.capturedImage,
800, // maxWidth
800, // maxHeight
0.9 // quality
).then((picture) => {
console.log('take picture', this.removeTextBeforeSlash(picture, ','),)
this.filecontent = true;
this.photoOrVideo = false;
const newAttachment = new PublicationAttachmentEntity(
{
base64: this.removeTextBeforeSlash(picture, ','),
extension: capturedImage.format,
OriginalFileName: "image",
FileType: 'image'
}
)
this.PublicationFromMvService.form.Files.push(newAttachment)
});
this.showCroppModal();
}
@@ -268,15 +242,15 @@ export class NewPublicationPage implements OnInit {
this.filesSizeSum = this.filesSizeSum + element.size
// element.size
try {
if (this.platform.is('ios')) {
this.recordevideoIos(element.fullPath, element)
} else {
this.recordVideoAndroid(element.fullPath, element)
}
if (this.platform.is('ios')) {
this.recordevideoIos(element.fullPath, element)
} else {
this.recordVideoAndroid(element.fullPath, element)
}
} catch (e) {
console.error('Unable to write file', e);
}
} catch (e) {
console.error('Unable to write file', e);
}
});
@@ -286,36 +260,36 @@ export class NewPublicationPage implements OnInit {
}
async loadVideo() {
const result = await FilePicker.pickMedia ({ multiple: true, });
const result = await FilePicker.pickMedia({ multiple: true, });
console.log(result.files)
result.files.forEach(async element => {
this.filesSizeSum = this.filesSizeSum + element.size
if (this.fileSizeToMB(this.filesSizeSum) <= 20) {
console.log('pass size verificartion')
if (this.checkFileType.checkFileType(element.mimeType) == 'video' && this.platform.is('ios')) {
let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl)
try {
let resultUrl = decodeURIComponent(element.path); console.log('pass type verification ', resultUrl)
try {
this.recordevideoIos(resultUrl, element)
} catch (error) {
console.log('upload video error: ', error)
}
} else if (this.checkFileType.checkFileType(element.mimeType) == 'image' || this.checkFileType.checkFileType(element.mimeType) == 'video') {
let resultUrl = decodeURIComponent(element.path);
console.log('pass type verification ', resultUrl)
try {
this.loadVideoAndroid(resultUrl,element)
} catch (error) {
console.log('upload video error: ', error)
}
console.log('pass type verification ', resultUrl)
try {
this.loadVideoAndroid(resultUrl, element)
} catch (error) {
console.log('upload video error: ', error)
}
} else {
if (this.PublicationFromMvService.form.Files.length === 0)
this.filesSizeSum = 0
this.httpErrorHandle.validationMessagge('filessize')
}
});
};
} else {
if (this.PublicationFromMvService.form.Files.length === 0)
this.filesSizeSum = 0
this.httpErrorHandle.validationMessagge('filessize')
}
});
};
chossePhotoOrVideo() {
@@ -676,37 +650,37 @@ export class NewPublicationPage implements OnInit {
const stringGerada = this.gerarStringAleatoria();
this.videoconvertService.convertVideo(fullPath,directory.uri,stringGerada,'mp4').then(async () => {
await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4`})
this.videoconvertService.convertVideo(fullPath, directory.uri, stringGerada, 'mp4').then(async () => {
await Filesystem.readFile({ path: `${directory.uri}${stringGerada}.mp4` })
.then(async (content) => {
this.filecontent = true;
.then(async (content) => {
this.filecontent = true;
const file = new File([element.blob], element.name);
const file = new File([element.blob], element.name);
const newAttachment = new PublicationAttachmentEntity(
{
base64: 'data:video/mp4;base64,' + content.data,
extension: 'mp4',
blobFile: file,
FileType: this.checkFileType.checkFileType('mp4') as any,
OriginalFileName: 'load video'
}
)
const newAttachment = new PublicationAttachmentEntity(
{
base64: 'data:video/mp4;base64,' + content.data,
extension: 'mp4',
blobFile: file,
FileType: this.checkFileType.checkFileType('mp4') as any,
OriginalFileName: 'load video'
}
)
this.PublicationFromMvService.form.Files.push(newAttachment)
this.PublicationFromMvService.form.Files.push(newAttachment)
const deleteSecretFile = async () => {
await Filesystem.deleteFile({
path: `${stringGerada}.mp4`,
directory: Directory.Cache,
});
};
await deleteSecretFile().then((value) => {
console.log('delete file',value)
const deleteSecretFile = async () => {
await Filesystem.deleteFile({
path: `${stringGerada}.mp4`,
directory: Directory.Cache,
});
};
await deleteSecretFile().then((value) => {
console.log('delete file', value)
})
})
})
.catch((erro) => console.error('read converted video erro ', erro));
.catch((erro) => console.error('read converted video erro ', erro));
});
@@ -726,26 +700,26 @@ export class NewPublicationPage implements OnInit {
console.log(savedFile.uri)
Filesystem.readFile({ path: savedFile.uri })
.then(async (content) => {
.then(async (content) => {
this.filecontent = true;
this.filecontent = true;
const file = new File([element.blob], element.name);
window['a'] = element
const newAttachment = new PublicationAttachmentEntity(
{
base64: 'data:video/mp4;base64,' + content.data,
extension: 'mp4',
blobFile: file,
FileType: this.checkFileType.checkFileType( 'mp4') as any,
OriginalFileName: 'load video'
}
)
this.PublicationFromMvService.form.Files.push(newAttachment)
const file = new File([element.blob], element.name);
window['a'] = element
const newAttachment = new PublicationAttachmentEntity(
{
base64: 'data:video/mp4;base64,' + content.data,
extension: 'mp4',
blobFile: file,
FileType: this.checkFileType.checkFileType('mp4') as any,
OriginalFileName: 'load video'
}
)
this.PublicationFromMvService.form.Files.push(newAttachment)
})
.catch((error) => console.error('reade converted video erro ',error));
})
.catch((error) => console.error('reade converted video erro ', error));
} catch (error) {
console.log('record video android erro ', error)
@@ -759,41 +733,42 @@ export class NewPublicationPage implements OnInit {
loadVideoAndroid(resultUrl, element) {
Filesystem.readFile({ path: resultUrl })
.then(async (content) => {
.then(async (content) => {
this.filecontent = true;
this.filecontent = true;
if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") {
if (this.removeTextBeforeSlash(element.mimeType, '/') == "mp4") {
const newAttachment = new PublicationAttachmentEntity(
{
base64: content.data,
extension: this.removeTextBeforeSlash(element.mimeType, '/'),
FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
OriginalFileName: 'load video'
}
)
const newAttachment = new PublicationAttachmentEntity(
{
base64: content.data,
extension: this.removeTextBeforeSlash(element.mimeType, '/'),
FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any,
OriginalFileName: 'load video'
}
)
newAttachment.needUpload()
this.PublicationFromMvService.form.Files.push(newAttachment)
newAttachment.needUpload()
this.PublicationFromMvService.form.Files.push(newAttachment)
} else {
} else {
this.capturedImage = 'data:image/jpeg;base64,' + content.data;
this.showCroppModal()
/* const newAttachment = new PublicationAttachmentEntity(
{
base64: 'data:image/jpeg;base64,' + content.data,
extension: this.removeTextBeforeSlash(element.mimeType, '/'),
FileType: this.checkFileType.checkFileType(this.removeTextBeforeSlash(element.mimeType, '/')) as any,
OriginalFileName: 'image'
}
)
const newAttachment = new PublicationAttachmentEntity(
{
base64: 'data:image/jpeg;base64,' + content.data,
extension: this.removeTextBeforeSlash(element.mimeType, '/'),
FileType: this.checkFileType.checkFileType( this.removeTextBeforeSlash(element.mimeType, '/')) as any,
OriginalFileName: 'image'
}
)
this.PublicationFromMvService.form.Files.push(newAttachment)
}
this.PublicationFromMvService.form.Files.push(newAttachment) */
}
})
.catch((err) => console.error(err));
})
.catch((err) => console.error(err));
}
@@ -860,21 +835,21 @@ export class NewPublicationPage implements OnInit {
newAttachment.needUpload()
this.PublicationFromMvService.form.Files.push(newAttachment)
fileObject ={};
const deleteSecretFile = async () => {
await Filesystem.deleteFile({
path: `${filename}.mp4`,
directory: Directory.Cache,
});
};
deleteSecretFile().then((value) => {
console.log('delete file',value)
fileObject ={};
})
.catch((erro) => console.error('read converted video erro ', erro));
});
fileObject = {};
const deleteSecretFile = async () => {
await Filesystem.deleteFile({
path: `${filename}.mp4`,
directory: Directory.Cache,
});
};
deleteSecretFile().then((value) => {
console.log('delete file', value)
fileObject = {};
})
.catch((erro) => console.error('read converted video erro ', erro));
});
});
});
}
} catch (error) {
@@ -915,5 +890,38 @@ export class NewPublicationPage implements OnInit {
}
async showCroppModal() {
const modal = await this.modalController.create({
component: CropImagePage,
componentProps: {
base64ToCroppe: this.capturedImage
},
cssClass: 'modal modal-desktop'
});
modal.onDidDismiss().then((res) => {
if (res) {
this.capturedImage = res.data
this.filecontent = true;
this.photoOrVideo = false;
const newAttachment = new PublicationAttachmentEntity(
{
base64: res.data.base64ToCroppe,
extension: 'jpeg',
OriginalFileName: "image",
FileType: 'image'
}
)
this.PublicationFromMvService.form.Files.push(newAttachment)
}
}, (error) => {
console.log(error)
});
await modal.present();
}
}