Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
ww_reading
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ww_reading
Commits
2ca6cba7
Commit
2ca6cba7
authored
Nov 09, 2020
by
liujiaxin
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: change image
parent
01ad28c8
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
32 additions
and
12 deletions
+32
-12
form.component.html
src/app/form/form.component.html
+3
-1
form.component.ts
src/app/form/form.component.ts
+29
-11
No files found.
src/app/form/form.component.html
View file @
2ca6cba7
...
...
@@ -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>
...
...
src/app/form/form.component.ts
View file @
2ca6cba7
...
...
@@ -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'] = [];
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment