Commit 2ca6cba7 authored by liujiaxin's avatar liujiaxin

fix: change image

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