Jump to content

Get selection from image and copy to another image


Mike

Recommended Posts

On 9/21/2019 at 3:48 PM, Mike said:

Could you perhaps provide an example how to use it in uniGUI?

Hi,

Simple implementation:

1. http://deepliquid.com/content/Jcrop_Download.html

2. CustomFiles:

files/jquery.Jcrop.min.js
files/jquery.Jcrop.min.css
files/jquery.color.js

3. UniImage1:

     (Stretch = False)

     beforeInit:

function beforeInit(sender, config)
{
    sender.updatePreview = function(c) {
        if(parseInt(c.w) > 0) {
            //var rx = 100 / c.w;
     	      //var ry = 100 / c.h; 
            //console.log(c.x, c.y, c.w, c.h);
            ajaxRequest(sender, 'getCroppedImg', ['cx='+c.x, 'cy='+c.y, 'cw='+c.w, 'ch='+c.h]);
        }
    };
}

    OnAjaxEvent:

procedure TMainForm.UniImage1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin
  if EventName = 'getCroppedImg' then
  begin
    ShowMessage(Params.Values['cx']+', '+Params.Values['cy']+', '+Params.Values['cw']+', '+Params.Values['ch']);
  end;

end;

4. How to use:

procedure TMainForm.UniButton3Click(Sender: TObject);
begin
  UniImage1.JSInterface.JSCode('$('#1'.getEl().select("img").elements[0]).Jcrop({onSelect : '#1'.updatePreview});');
end;

jCrop1.png.be923cbf37fbdc049f846634a9d4717a.png

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 year later...

Hi 

I want to crop image with aspect ratio 1.25 for example crop box size most be 200pixel*250pixel.
I make a UniGui Sample for crop image from your instructions with carefully.
Unfortunately it show below error which you can see in the attachment picture. 
 

Thank you

CorpErr.jpg

Link to comment
Share on other sites

This is what I have so far, blue code works, red code fails to fire, please advise - Thanks:-

InfoHTMLFrame HTML

...

                  '   <script src="files/jquery.Jcrop.min.js"></script> '+
                  '   <script src="files/jquery.color.js"></script> '+

                  '   <link href="files/jquery.Jcrop.css" rel="stylesheet" type="text/css" /> '+

                  '   <script type="text/javascript"> '+
                  '     updatePreview = function(c) '+
                  '     { '+
                  '       if(parseInt(c.w) > 0) '+
                  '       { '+
                  '         ajaxRequest(MainForm.InfoHTMLFrame, "getCroppedImg", ["cx="+c.x, "cy="+c.y, "cw="+c.w, "ch="+c.h]); '+
                  '       } '+
                  '     }; '+
                  '  </script> '+

...

                   '<img id="myImage" oncontextmenu="return false" src="'+RelativeFileName+'" alt="" onclick="ajaxRequest(MainForm.InfoHTMLFrame, ''_info_img_crop_'', []);" > '+

...

 

procedure TMainForm.InfoHTMLFrameAjaxEvent(Sender: TComponent; EventName: string; Params: TUniStrings);
var
  s: String;
begin

  //////////////////////////////////////////////////////////////////////////////
  if EventName = '_info_img_crop_' then begin
    // Start Cropping
    InfoHTMLFrame.JSInterface.JSCode('$('#1'.getEl().select("img").elements[0]).Jcrop({onSelect : '#1'.
updatePreview});');
  end;

  //////////////////////////////////////////////////////////////////////////////
  if EventName = 'getCroppedImg' then begin
    ShowMessage(Params.Values['cx']+', '+Params.Values['cy']+', '+Params.Values['cw']+', '+Params.Values['ch']);
  end;

Link to comment
Share on other sites

Quick and nasty project.

Don't forget to set NonIdeFlag:= False; in TUniServerModule.UniGUIServerModuleBeforeInit(Sender: TObject); for default framework.

Issues with finding the crop css file ? Testing I put files in root as well but still issues.

Ideally I want to single click image, draw crop rectangle, move/stretch crop rectangle then dblClick crop rectangle to collect the parameters of the drawn cropping rectangle.
 

Project1.zip

Link to comment
Share on other sites

I removed all of the old references to the jcrop library and made these changes:-

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" />');

Main
InfoHTMLFrame.JSInterface.JSCode('$('#1'.getEl().select("img").elements[0]).Jcrop({onSelect : '#1'.updatePreview});');

to

InfoHTMLFrame.JSInterface.JSCode('$('#1'.getEl().select("img").elements[0]).Jcrop({onSelect : updatePreview});');

and it works, I would be happy for an explanation on why the '#1'. removal ?

Link to comment
Share on other sites

  • 3 weeks later...

Cropping <img inside html script, I have issues with Resizing and Moving selection frame (crop works without resizing/moving), can anyone please advise - Custom Files above - Thanks.

      InfoHTMLFrame.JSInterface.JSCode('$('#1'.getEl().select("img").elements[0]).Jcrop({'+
                                                                                       'options: {'+
                                                                                       '           allowResize: true, '+
                                                                                       '           allowMove: true, '+
                                                                                       '           enableHandles: true'+
                                                                                       '         }, '+
                                                                                       'onSelect: updatePreview, '+
                                                                                       'onDblClick: fetchImage'+
                                                                                       '});');
 

Link to comment
Share on other sites

1 hour ago, andyhill said:

Cropping <img inside html script, I have issues with Resizing and Moving selection frame (crop works without resizing/moving), can anyone please advise

Hello,

Do you have screenshots or videos to see the problem!?

Link to comment
Share on other sites

Here is a quick and nasty test, do not forget to set ProductionFlag to False in ServerModule in order to use IDE Default Framework (we maintain legacy versions).

Click CROP Button, define Region with mouse, DoubleClick within Region to see X/Y Region info, click outside of region to reset.

I want to get Resize and Move of selected Region to work.

Project1.zip

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...