Skip to content

Commit 1d8d4c7

Browse files
DhinaSF4211DhinaSF4211
committed
992782: Add UG Documentation for Fit to Width and Height
1 parent 7aa9386 commit 1d8d4c7

File tree

12 files changed

+189
-17
lines changed

12 files changed

+189
-17
lines changed

‎ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/razor‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
@Html.EJS().Button("clearImage").CssClass("e-primary").Content("Clear Image").Click("clearImage").Render()
55

66
<script>
7-
var base64String;
87
function created() {
98
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
109
if (ej.base.Browser.isDevice) {

‎ej2-asp-core-mvc/code-snippet/image-editor/how-to/clear-image/tagHelper‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
<ejs-button id="clearImage" onclick="clearImage()" cssClass="e-primary" content="Clear Image"></ejs-button>
66

77
<script>
8-
var base64String;
98
function created() {
109
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
1110
if (ej.base.Browser.isDevice) {

‎ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
public ActionResult Default()
2+
{
3+
return View();
4+
}

‎ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/razor‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<div class="col-lg-12 control-section e-img-editor-sample" >
2+
@Html.EJS().ImageEditor("image-editor").Created("created").Render()
3+
</div>
4+
@Html.EJS().Button("fitwidth").CssClass("e-primary").Content("Fit Width").Click("fitwidth").Render()
5+
@Html.EJS().Button("fitheight").CssClass("e-primary").Content("Fit Height").Click("fitheight").Render()
6+
7+
<script>
8+
function created() {
9+
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
10+
if (ej.base.Browser.isDevice) {
11+
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
12+
} else {
13+
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
14+
}
15+
}
16+
function fitwidth() {
17+
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
18+
imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Width
19+
const containerWidth = imageEditorObj.upperCanvas.width;
20+
const { width: oldWidth } = imageEditorObj.getImageDimension();
21+
let imageWidth = oldWidth, zoomFactor = 0.1, newZoom = 1;
22+
while (imageWidth < containerWidth) {
23+
newZoom++;
24+
imageWidth = oldWidth * (1 + zoomFactor);
25+
zoomFactor += 0.1;
26+
}
27+
imageEditorObj.zoom(newZoom);
28+
}
29+
function fitheight() {
30+
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
31+
imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Height
32+
const containerHeight = imageEditorObj.upperCanvas.height;
33+
const { height: oldHeight } = imageEditorObj.getImageDimension();
34+
let imageHeight = oldHeight, zoomFactor = 0.1, newZoom = 1;
35+
while (imageHeight < containerHeight) {
36+
newZoom++;
37+
imageHeight = oldHeight * (1 + zoomFactor);
38+
zoomFactor += 0.1;
39+
}
40+
imageEditorObj.zoom(newZoom);
41+
}
42+
</script>
43+
44+
<style>
45+
.image-editor {
46+
margin: 0 auto;
47+
}
48+
49+
.e-img-editor-sample {
50+
height: 80vh;
51+
width: 100%;
52+
}
53+
54+
@@media only screen and (max-width: 700px) {
55+
.e-img-editor-sample {
56+
height: 75vh;
57+
width: 100%;
58+
}
59+
}
60+
61+
.control-wrapper {
62+
height: 100%;
63+
}
64+
</style>

‎ej2-asp-core-mvc/code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<div class="col-lg-12 control-section e-img-editor-sample">
2+
<ejs-imageeditor id="image-editor" created="created"></ejs-imageeditor>
3+
</div>
4+
<ejs-button id="fitwidth" onclick="fitwidth()" cssClass="e-primary" content="Fit Width"></ejs-button>
5+
<ejs-button id="fitheight" onclick="fitheight()" cssClass="e-primary" content="Fit Height"></ejs-button>
6+
7+
<script>
8+
function created() {
9+
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
10+
if (ej.base.Browser.isDevice) {
11+
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/flower.png');
12+
} else {
13+
imageEditorObj.open('https://ej2.syncfusion.com/demos/src/image-editor/images/bridge.png');
14+
}
15+
}
16+
function fitwidth() {
17+
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
18+
imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Width
19+
const containerWidth = imageEditorObj.upperCanvas.width;
20+
const { width: oldWidth } = imageEditorObj.getImageDimension();
21+
let imageWidth = oldWidth, zoomFactor = 0.1, newZoom = 1;
22+
while (imageWidth < containerWidth) {
23+
newZoom++;
24+
imageWidth = oldWidth * (1 + zoomFactor);
25+
zoomFactor += 0.1;
26+
}
27+
imageEditorObj.zoom(newZoom);
28+
}
29+
function fitheight() {
30+
var imageEditorObj = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
31+
imageEditorObj.zoom(1); // Reset zoom to original size before applying Fit Height
32+
const containerHeight = imageEditorObj.upperCanvas.height;
33+
const { height: oldHeight } = imageEditorObj.getImageDimension();
34+
let imageHeight = oldHeight, zoomFactor = 0.1, newZoom = 1;
35+
while (imageHeight < containerHeight) {
36+
newZoom++;
37+
imageHeight = oldHeight * (1 + zoomFactor);
38+
zoomFactor += 0.1;
39+
}
40+
imageEditorObj.zoom(newZoom);
41+
}
42+
</script>
43+
44+
<style>
45+
.image-editor {
46+
margin: 0 auto;
47+
}
48+
49+
.e-img-editor-sample {
50+
height: 80vh;
51+
width: 100%;
52+
}
53+
54+
@@media only screen and (max-width: 700px) {
55+
.e-img-editor-sample {
56+
height: 75vh;
57+
width: 100%;
58+
}
59+
}
60+
61+
.control-wrapper {
62+
height: 100%;
63+
}
64+
</style>

‎ej2-asp-core-mvc/image-editor/how-to/clear-image.md‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
---
22
layout: post
3-
title: Filter in ##Platform_Name## Image editor control | Syncfusion
4-
description: Learn here all about Filter in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more.
5-
platform: ej2-asp-core-mvc
6-
control: Clear Image
3+
title: Clear an Image in ##Platform_Name## Image editor control | Syncfusion
4+
description: Learn here all about Clear an Image in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Clear an Image
77
publishingplatform: ##Platform_Name##
88
documentation: ug
9-
domainurl: ##DomainURL##
109
---
1110

12-
# Clear an Image ##Platform_Name## Image Editor control
11+
# Clear an Image
1312

1413
The `clearImage` method in the image editor control is indeed useful for scenarios where you need to ensure that the image editor is emptied before reopening it, especially if the editor is used within a dialog. By using clearImage before closing the dialog, you can ensure that the editor does not retain the previously loaded image when the dialog is reopened. This allows users to start fresh with a new image selection.
1514

‎ej2-asp-core-mvc/image-editor/how-to/fit-to-width-and-height.md‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
layout: post
3+
title: Fit to Width and Height in ##Platform_Name## Image editor | Syncfusion
4+
description: Learn here all about Fit to Width and Height in Syncfusion ##Platform_Name## ImageEditor component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Fit to Width and Height
7+
publishingplatform: ##Platform_Name##
8+
documentation: ug
9+
---
10+
11+
# Fit Image to Editor Width and Height
12+
13+
The Image Editor's `zoom` method to fit an image to the editor by width or height. Programmatically increase the zoom level until the image dimension matches the editor container's width or height.
14+
15+
This example demonstrates scenarios that include buttons for fitting the image to its width (Fit Width) or height (Fit Height).
16+
17+
{% if page.publishingplatform == "aspnet-core" %}
18+
19+
{% tabs %}
20+
{% highlight cshtml tabtitle="CSHTML" %}
21+
{% include code-snippet/image-editor/how-to/fit-to-width-and-height/tagHelper %}
22+
{% endhighlight %}
23+
{% highlight c# tabtitle="Default.cs" %}
24+
{% include code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs %}
25+
{% endhighlight %}
26+
{% endtabs %}
27+
28+
{% elsif page.publishingplatform == "aspnet-mvc" %}
29+
30+
{% tabs %}
31+
{% highlight razor tabtitle="CSHTML" %}
32+
{% include code-snippet/image-editor/how-to/fit-to-width-and-height/razor %}
33+
{% endhighlight %}
34+
{% highlight c# tabtitle="Default.cs" %}
35+
{% include code-snippet/image-editor/how-to/fit-to-width-and-height/default.cs %}
36+
{% endhighlight %}
37+
{% endtabs %}
38+
{% endif %}
39+
40+
Output be like the below.
41+
42+
![ImageEditor Sample](../images/image-editor-fit-to-width-and-height.jpg)

‎ej2-asp-core-mvc/image-editor/how-to/open-dialog.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
---
22
layout: post
3-
title: Filter in ##Platform_Name## ImageEditor Control | Syncfusion
4-
description: Learn here all about Filter in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more.
3+
title: Render Editor in Dialog in ##Platform_Name## ImageEditor | Syncfusion
4+
description: Learn here all about Render Image Editor in Dialog in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more.
55
platform: ej2-asp-core-mvc
6-
control: Dialog
6+
control: Render Image Editor in Dialog
77
publishingplatform: ##Platform_Name##
88
documentation: ug
9-
domainurl: ##DomainURL##
109
---
1110

1211
# Render Image Editor in Dialog

‎ej2-asp-core-mvc/image-editor/how-to/reset.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
---
22
layout: post
3-
title: Reset an image in Image Editor Component | Syncfusion
4-
description: Learn here all about How to Reset an image in Image Component of Syncfusion Essential JS 2 and more.
5-
control: Reset
3+
title: Reset an image in ##Platform_Name## ImageEditor Control | Syncfusion
4+
description: Learn here all about How to Reset an image in Syncfusion ##Platform_Name## Image editor control of Syncfusion Essential JS 2 and more.
5+
platform: ej2-asp-core-mvc
6+
control: Reset an image
67
publishingplatform: ##Platform_Name##
78
documentation: ug
8-
domainurl: ##DomainURL##
99
---
1010

11-
# Reset in the ##Platform_Name## Image Editor control
11+
# Reset an image
1212

1313
The `reset` method in the Image Editor control provides the capability to undo all the changes made to an image and revert it back to its original state. This method is particularly useful when multiple adjustments, annotations, or transformations have been applied to an image and you want to start over with the original, unmodified version of the image.
1414

‎ej2-asp-core-mvc/image-editor/images/image-editor-fit-to-width-and-height.jpg‎

64 KB
Loading

0 commit comments

Comments
 (0)