add custom control button

[arnold-b]

Hello from newbie is there anywhere a sample for a custom control button. i dont know how to handle controls.js

i just want to add a button for SavetoURL and LoadFromUrl and a div for dropImage thanks

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[jaxon93]

Hello. I'm want to do exact same thing. Have you solved it?

[arnold-b]

Hi, i made a workaround. But for me good enough. Its bad that this development is not very active. even its a good tool.

`<script>`
window.Dropzone.autoDiscover = false;

$( document ).on( "ImgEditorNewImageSaved", {
    foo: "bar"
}, function( event, arg1, arg2 ) {
    console.log( event.data.foo ); // "bar"
    console.log( arg1 );           // "bim"
    console.log( arg2 );           // "baz"
	let owner = arg2;
	if (typeof owner === 'string')
	{		
		owner = document.getElementById(elementID);
	} 
	if(owner.id == "itemImgOrg")
	{
		
			var ino = document.getElementById("itemno").value;
			Item.loadpic(ino);
			owner.onload = function () {
					showMessage('success','center',"Image refreshed on Item");
			};
	}
});
 


var dropzone ="";
var imageEditor;  
var imageEditorOwner="";

function dataURItoBlob(dataURI) {
	var byteString = atob(dataURI.split(",")[1]);
	var mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];

	var ab = new ArrayBuffer(byteString.length);
	var ia = new Uint8Array(ab);
	for (var i = 0; i < byteString.length; i++) {
	  ia[i] = byteString.charCodeAt(i);
	}
	return new Blob([ab], { type: mimeString });
}


function saveImage(image) {
	//const editorInstance = editorRef.current.getInstance();
	const data = imageEditor.toDataURL();
	var blob = dataURItoBlob(data);
	const file = new File([blob], `edited-` + image, {
	  type: "image/jpeg",
	  lastModified: new Date(),
	});
	//var URL = document.getElementById("datapath").value+"/"+document.getElementById("dataname").value;
	var URL = image;
				var newURL = URL.replace (/^[a-z]{4}\:\/{2}[a-z]{1,}\:[0-9]{1,4}.(.*)/, '$1');
	var formData = new FormData();
	formData.action = "upload";
	var buf = imageEditorOwner;
	if (typeof imageEditorOwner === 'object')
	{
		buf = imageEditorOwner.id;
	}
	formData.append('owner',buf);
	formData.append('filename', blob,newURL);		
	console.log(blob);
	showMessage('info','top',"Do FileUpload");

			  $.ajax('/cgi-bin/upload.pl?do=upload', {
				method: "POST",
				data: formData,
				processData: false,
//				dataType :"json",
				contentType: false,
				success: function (data) {
				  var data = JSON.parse(data);
				  var tmp = "Filename: "+data["file"]+"<br>";
				  tmp += "\nFilesize:"+data["size"];
				  console.log('Upload success\n'+tmp);
				  showMessage('success','center',"File uploaded succesfully<br>"+tmp);
				  $( document ).trigger( "ImgEditorNewImageSaved", [ "ImgEditorNewImageSaved", imageEditorOwner ] );
		
				},
				error: function (err) {
				  console.log(err.responseText);
				   showMessage('error','center',"ERROR to upload file"+"<br>"+err.responseText);
				}
			  });
			

}
function showMessage(type,layout,message) {
			new Noty({
			type:type,
			
				layout: layout,
  				theme: 'relax', // or relax
				timeout: 5000, // [integer|boolean] delay for closing event in milliseconds. Set false for sticky notifications
  				progressBar: true, // [boolean] - displays a progress bar
   animation: {
      open: "animated shMsgAnimate", // or Animate.css class names like: 'animated bounceInLeft'
      close: "animated bounceOut", // or Animate.css class names like: 'animated bounceOutLeft'
      //NOTE: easing and speed has no effect when string class name is being used.
    },

			closeWith: ['click'], // ['click', 'button', 'hover', 'backdrop'] // backdrop click will close all notifications

    			text: message,
			}).show();		   
}



function doSaveImg()
{
  saveImage($("#imgdataname").val());
}
	
function initImageEditor(srcfile,srcname)
{
	imageEditor = new tui.ImageEditor('#tui-image-editor-container', {
        includeUI: {
          loadImage: {
            path: srcfile,
            name: srcname,
          },
          theme: blackTheme, // or whiteTheme
          initMenu: 'crop',
          menuBarPosition: 'left',
        },
        cssMaxWidth: 700,
        cssMaxHeight: 500,
        usageStatistics: false,
      });
	  imageEditor.ui.activeMenuEvent()
	  var buttons = "<div id='dropzone' class='dropzone'>Click or Drop to load</div>";
	  buttons +='<button type="button" class="btn btn-primary btn-lg btn-style" data-bs-dismiss="modal">Close</button>';
	  buttons += '<button type="button" onclick = "doSaveImg()" class="btn btn-primary btn-lg btn-style">Save</button>';
	  buttons += '<input type="text" id="imgdataname">';
	  buttons += '<input type="text" id="imgdatalock">';
	  imageEditorOwner="";
	  
	  $('.tui-image-editor-header-logo').replaceWith(buttons);
	  
	  $('#imgdataname').val(srcfile);
      window.onresize = function () {
        imageEditor.ui.resizeEditor();
      };
	  $('#imgdatalock').val(false);
	  $('#imgdataname').prop('readonly', false);
	   dropzone = new Dropzone('#dropzone', {
	  url: "donothing()",
	   dictDefaultMessage: "",

	  addRemoveLinks: true,
	 
	  createImageThumbnails: false,
	  autoProcessQueue: false,
	  
	});
	dropzone.on('addedfile', function(file) {
		imageEditor.loadImageFromFile(file);
		dropzone.removeFile(file);
		var imgname = imageEditor.getImageName();
		if ($('#imgdatalock').val == false)
		{
			$('#imgdataname').val(imgname);
		}
	});
}
function iniImageEditorDlg()
{
	
	if (!$('#tui-image-editor-container'))
	{
		initImageEditor();
	}
}
function callImgEditorRef(elementID,lock,ref)
{
	let owner = elementID;
	if (typeof elementID === 'string')
	{
		owner = document.getElementById(elementID);
	} 
	var src ="";
	if (ref=='src')
	{   src = owner.src;
		
	}
	else { src = $(owner).attr("data-href");
	callImgEditor(src,lock,owner)
	}
}
function callImgEditor(src,lock,owner)
{
	//itemThumpImg
	initImageEditor("","");
	//initImageEditor(src,"test");
	if(owner.firstChild)
	{
		if (owner.firstChild.id != "itemThumpImg")  // Dont have real image
		{
			var res = imageEditor.loadImageFromURL(src, 'My sample image')
		}
	}
	else
	{
		var res = imageEditor.loadImageFromURL(src, 'My sample image')
	}
	imageEditorOwner = owner;
	$('#imgdataname').val(src);
	$('#imgdatalock').val(lock);
	$('#imgdataname').prop('readonly', lock);
	$('#ImgEditorDlg').modal('show');
}
function doCloseModalImg()
{
	$('#ImgEditorDlg').modal('hide');
}
function createModalEditor(owner) // owner no use
{
  if (!document.getElementById(owner))
  {
	  console.error  ('%c ' + "CreateModalEditor parent dont exist",'color: blue; font-weight:bold');
	 
  } 
  else 
  {	
	if(!document.getElementById('ImgEditorDlg'))
	{
	  // modal-dialog-imgeditor wird nur benötigt da bei carmen fullscreen nicht funktioniert
	  var htmlstr = '<div class="modal fade" id="ImgEditorDlg" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> \
		<div class="modal-dialog modal-dialog-imgeditor modal-fullscreen-xxl-down modal-dialog-scrollable">\
		<div class="modal-content">\
			<div class="modal-header">\
				<div class="modal-body">\
					<div id="tui-image-editor-container"></div>\
				</div></div></div></div>';
		document.getElementById(owner).innerHTML=htmlstr;
	//    $( "body" ).append(htmlstr);
	 
	}
  }
}

[jaxon93]

First of all, thank you very much. I'm new to web development, so I'll need to study this code. Would it be possible for me to see your project along with its source code for educational purposes? I've spent three days trying to add this feature, but I couldn't figure it out. I would really appreciate it if you could share your project with me.

My email: [email protected] thanks a lot~~