Jump to content

Get selection from image and copy to another image


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 post
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 post
Share on other sites

Sherzod, instead of using a UniImage as the source, would you be so kind and show me how we could crop an embedded HTML <img ... and download the selection ? thanks in advance.

Link to post
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 post
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 post
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 post
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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...