Search results

Render ImageEditor in Dialog in JavaScript (ES5) ImageEditor control

25 Jan 2023 / 3 minutes to read

Image Editor is rendered within a dialog and opens an image by passing its URL path to the open method of the Image Editor control.

The following operations are supported in the Image Editor:

  • Selection : Multiple selection options are available. The selection region can be a square or circle, customized to various aspect ratios, and customized by dragging and resizing.
  • Crop : The image can be cropped based on the selection.
  • Rotate : The image can be rotated both clockwise and anticlockwise by 90 degrees.
Source
Preview
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

this.default = function () {
	var img = document.querySelector('#custom-img');
	img.onload = function () {
		var canvas = document.querySelector('#img-canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = img.width < img.height ? img.width : img.height;
		canvas.height = canvas.width;
		ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	};
	var dialogObj = new ej.popups.Dialog({
		header: 'Edit Profile Image',
		animationSettings: { effect: 'None' },
		showCloseIcon: true,
		closeOnEscape: true,
		target: '.control-section',
		width: '340px',
		height: '400px',
		visible: false,
		position: {X: 'center', Y: 0 },
		close: function () {
			var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
			imageEditor.destroy();
			document.getElementById('image-editor').className = '';
		},
		open: function () {
			new ej.imageeditor.ImageEditor({
				fileOpened: function () {
					var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
					imageEditor.select('circle');
				},
				created: function () {
				  var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
				  imageEditor.theme = window.location.href.split('#')[1].split('/')[1];
			  },
				toolbar: []
			}, '#image-editor');
		},
		buttons: [
			  {
				  click: function () {
					  document.getElementById('img-upload').click();
				  },
				  buttonModel: { content: 'Open', isPrimary: false, cssClass: 'e-custom-img-btn e-img-custom-open' }
			  },{
				click: function () {
					var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
					imageEditor.reset();
				},
				buttonModel: { content: 'Reset', isPrimary: false, cssClass: 'e-custom-img-btn e-img-custom-reset' }
			},
			{
				click: function () {
					var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
					imageEditor.rotate(-90);
				},
				buttonModel: { content: 'Rotate', isPrimary: false, cssClass: 'e-custom-img-btn e-img-custom-rotate' }
			},
			{
			  click: function () {
				  var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
				  imageEditor.crop();
				  var croppedData = imageEditor.getImageData();
				  var canvas = document.querySelector('#img-canvas');
				  var ctx = canvas.getContext('2d');
				  var parentDiv = document.querySelector('.e-profile');
				  var tempCanvas = parentDiv.appendChild(ej.base.createElement('canvas'));
				  var tempContext = tempCanvas.getContext('2d');
				  tempCanvas.width = croppedData.width;
				  tempCanvas.height = croppedData.height;
				  tempContext.putImageData(croppedData, 0, 0);
				  ctx.clearRect(0, 0, canvas.width, canvas.height);
				  ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height);
				  tempCanvas.remove();
				  parentDiv.style.borderRadius = '100%';
				  canvas.style.backgroundColor = '#fff';
				  dialogObj.hide();
			  },
				buttonModel: { content: 'Apply', isPrimary: true, cssClass: 'e-img-custom-apply' }
			}]
	});
	dialogObj.appendTo('#profile-dialog');
	document.getElementById('custom-edit').onclick = function () {
	  dialogObj.show();
	  var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
	  var canvas = document.querySelector('#img-canvas');
	  imageEditor.open(canvas.toDataURL());
	};
	document.getElementById('img-upload').onchange = function (args) {
	  var URL = window.URL;
	  var url = URL.createObjectURL(args.target.files[0]);
	  var imageEditor = ej.base.getComponent(document.getElementById('image-editor'), 'image-editor');
	  imageEditor.open(url.toString());
	  document.getElementById('img-upload').value = null;
	};
	document.getElementsByClassName('sb-desktop-wrapper')[0].onclick = function (args) {
	  if (args.target.className.indexOf('col-lg-12 control-section e-img-editor-sample') > -1 || args.target.className.indexOf('sb-content') > -1) {
		  dialogObj.hide();
	  }
	};
  };
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Essential JS 2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="description" content="Essential JS 2">
    <meta name="author" content="Syncfusion">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/20.4.38/ej2-image-editor/styles/material.css" rel="stylesheet">


    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet">

    <!--system js reference and configuration-->
    
    
<script src="https://cdn.syncfusion.com/ej2/20.4.38/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div class="col-lg-12 control-section e-img-editor-sample">
        <div class="e-profile">
            <div class="e-custom-wrapper">
                <canvas id="img-canvas" style="max-width: 200px; max-height: 200px;"></canvas>
                <img alt="img" id="custom-img" crossorigin="anonymous" src="images/profile.png" style="display: none;">
                <input type="file" id="img-upload" style="display:none">
                <span id="custom-edit" class="e-custom-edit" contenteditable="false">
                    <span class="e-custom-icon sb-icons" contenteditable="false"></span>
                </span>
            </div>
        </div>
    </div>
    <div id="profile-dialog">
        <div id="image-editor"></div>
    </div>
    
    
    <style>
        .e-img-editor-sample,
        .e-img-editor-sample .control-wrapper {
            position: relative;
        }
    
        .e-profile {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            -webkit-transform: translate(-50%, 30%);
            transform: translate(-50%, 30%);
            border-radius: 50%;
        }
    
        .e-custom-wrapper {
            position: relative;
        }
    
        .e-custom-edit {
            position: absolute;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: blue;
            top: calc(100% - 54px);
            left: calc(100% - 47px);
        }
    
        .e-custom-icon::before {
            content: '\e911';
            font-size: 28px;
            color: white;
            left: 5px;
            top: -2px;
            position: absolute;
        }
</style>    



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard