Canvas Object - Add JavaScript 3rd Party Code - How ?

[andyhill]

I am trying to add JavaScript 3rd Party Crop to a canvas (cArea) object.

This usually works in unigui when dealing with an element within a htmlframe but I am struggling with canvas implementation - please advise how ? Thanks

 

SERVERMODULE // https://cdnjs.com/libraries/jquery-jcrop
 
CustomFiles.Add('<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js" integrity="sha512-KKpgpD20ujD3yJ5gIJqfesYNuisuxguvTMcIrSnqGQP767QNHjEP+2s1WONIQ7j6zkdzGD4zgBHUwYmro5vMAw==" crossorigin="anonymous"></script>');
 
CustomCSS.Add('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" integrity="sha512-bbAsdySYlqC/kxg7Id5vEUVWy3nOfYKzVHCKDFgiT+GsHG/3MD7ywtJnJNSgw++HBc+w4j71MLiaeVm1XY5KDQ==" crossorigin="anonymous" />');

 

FORM CREATE
  Script.Clear;
  s:= '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css">';
  //Script.Add(s); FAILS

  cArea ExtEvents
  s:= 'updatePreview=function updatePreview(c) '+
      '{ '+
      '  if(parseInt(c.w) > 0) '+
      '  { '+
      '    ajaxRequest(fMain.cArea, "getCroppedXY", ["cx="+c.x, "cy="+c.y, "cw="+c.w, "ch="+c.h]); '+
      '  } '+
      '}';
  cArea.ClientEvents.ExtEvents.Add(s);
 
  s:= 'fetchImage=function fetchImage(c) '+
      '{ '+
      '  ajaxRequest(fMain.cArea, "getCroppedImg", ["cx="+c.x, "cy="+c.y, "cw="+c.w, "ch="+c.h]); '+
      '}';
  cArea.ClientEvents.ExtEvents.Add(s);

 

...

FORM CANVAS REQUEST VIA BUTTON EVENT (Jcrop / a.Jcrop FAILS ???)
    with cArea, JSInterface do begin
      JSCode('var a = document.getElementById("'+JSName+'_canvas"); a.Jcrop({'+
                                                                             'options: {'+
                                                                             '           allowResize: true, '+
                                                                             '           allowMove: true, '+
                                                                             '           enableHandles: true'+
                                                                             '         }, '+
                                                                             'onSelect: a.updatePreview, '+
                                                                             'onDblClick: a.fetchImage'+
                                                                             '});');
    end; // with
 

[andyhill]

Sherzod (Hayri too), I look to you both as accomplished coders - please help 🙏

[andyhill]

Here is one of my many attempts, does not crash, does not work.

    with cArea, JSInterface do begin
      JSCode('$('#1'.getEl().select("_canvas").elements[0]).Jcrop('+
             '{'+
             '  options: '+
             '  {'+
             '    allowResize: true, '+
             '    allowMove: true, '+
             '    enableHandles: true'+
             '  }, '+
             '  onSelect: '+JSName+'.updatePreview, '+
             '  onDblClick: '+JSName+'.fetchImage'+
             '});');
    end; // with
 

[Sherzod]

7 hours ago, andyhill said:

Sherzod (Hayri too), I look to you both as accomplished coders - please help 🙏

Hello,

Perhaps things are different with the canvas. We will check.

[andyhill]

Hoping to move forward, any progress Sherzod ?

[Sherzod]

42 minutes ago, andyhill said:

Hoping to move forward, any progress Sherzod ?

I'm sorry, not yet.

[andyhill]

Gentle Reminder

[andyhill]

I know you are busy Sherzod, any progress ?

[andyhill]

Any progress ?

[Sherzod]

9 hours ago, andyhill said:

Any progress ?

Hello,

You may want to analyze this plugin?

https://fengyuanchen.github.io/cropperjs/

[andyhill]

Thanks, do you have an example of a UniGUI Canvas implementation ?

[Sherzod]

4 minutes ago, andyhill said:

do you have an example of a UniGUI Canvas implementation ?

I'm sorry, no.

[andyhill]

It says image must be in HTML tags

<div>
  <img id="image" src="picture.jpg">
</div>

img {
  display: block;
  max-width: 100%;
}

Canvas has no HTML tags - am I missing something ?

[Sherzod]

8 minutes ago, andyhill said:

It says image must be in HTML tags

Sorry, yes. You are right.

[Sherzod]

OK, I will keep looking.