Commit 2ca6cba7 authored by liujiaxin's avatar liujiaxin

fix: change image

parent 01ad28c8
......@@ -9,7 +9,9 @@
</div>
<div class="edit-wrap" *ngIf="picId">
<!--<img [src]="picId | resource" alt="" #img>-->
<angular-cropper [cropperOptions]="cropperConfig"
<angular-cropper
(ready)="onCropperReady($event)"
[cropperOptions]="cropperConfig"
[imageUrl]="picId"
#angularCropper></angular-cropper>
</div>
......
......@@ -90,6 +90,7 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
preview: '.crop-preview'
};
private newCropper: Cropper;
constructor(private appRef: ApplicationRef,
......@@ -184,6 +185,8 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
*/
refresh() {
setTimeout(() => {
this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges();
this.appRef.tick();
}, 1);
}
......@@ -201,13 +204,22 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
// }
this.imageUploader.click();
// const self = this;
// this.picId = 0;
}
onCropperReady(evt) {
console.log('onCropperReady', evt);
if (evt === true) {
return;
}
}
onImageUploadSuccess(e) {
// this.picId = null;
// this.changeDetectorRef.markForCheck();
// this.changeDetectorRef.detectChanges();
this.item.contentObj.pic_id = e.url;
this.picId = e.url;
this.update.emit(this.item);
......@@ -215,8 +227,11 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
this.item.contentObj.pic_id = this.picId = e.url;
this.cropperParts.length = 0;
if (this.angularCropper && this.angularCropper.cropper) {
this.angularCropper.cropper.reset();
this.angularCropper.cropper.destroy();
// this.angularCropper.cropper.reset();
// this.angularCropper.cropper.destroy();
this.newCropper = this.angularCropper.cropper.replace(e.url);
console.log(this.newCropper)
// this.angularCropper.cropper = this.angularCropper.cropper.replace(e.url);
this.colorIndex = 0;
}
}
......@@ -258,7 +273,7 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
addPart() {
addPart = () => {
// console.log('addPart');
// const inv_idx = this.cropperParts.findIndex(item => {
// return !item.word || !item.word.trim();
......@@ -282,7 +297,10 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
// });
// this.colorIndex++;
// const color = this.colors[this.colorIndex % this.colors.length];
// @ts-ignore
if (!this.angularCropper.cropper.url && this.newCropper) {
this.angularCropper.cropper = this.newCropper;
}
this.cropperParts.push({
word: '',
data: this.angularCropper.cropper.getData(),
......@@ -311,7 +329,7 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
}, 10);
}
editPart(evt, idx) {
editPart = (evt, idx) => {
const img = evt.currentTarget.parentNode.parentNode.querySelector('img')
console.log('editPart');
this.currentEditPartIndex = idx;
......@@ -335,7 +353,7 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
this.colorIndex = 0;
}
}
exitEditPart(evt, idx) {
exitEditPart = (evt, idx) => {
console.log('exitEditPart')
// if( !this.cropperParts[idx].word) {
......@@ -365,7 +383,7 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
this.refresh();
}
savePart(evt, idx) {
savePart = (evt, idx) => {
// const el = this.partConfigBoxes.toArray()[idx].nativeElement.querySelector('.part-word');
// if (!el.value) {
......@@ -393,11 +411,11 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
this.changeDetectorRef.detectChanges();
this.refresh();
}
previewUserSelectPart(idx) {
previewUserSelectPart = (idx) => {
const part = this.cropperParts[idx];
this.angularCropper.cropper.setData(part.data);
}
initPart(evt, idx) {
initPart = (evt, idx) => {
console.log('initPart', evt);
const part = this.cropperParts[idx];
const img = evt.target || evt;
......@@ -487,7 +505,7 @@ export class FormComponent implements OnInit, OnChanges, AfterViewInit, OnDestro
// this.enableChangeImage = true;
// this.angularCropper.cropper.setDragMode('move');
// console.log('initCropper save imgData');
console.log('initCropper save imgData');
this.item.contentObj.imgData = this.angularCropper.cropper.getImageData();
// console.log(this.item.contentObj['imgData']);
// this.item.contentObj['parts'] = [];
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment