Mike Posted September 21, 2019 Share Posted September 21, 2019 Hi, I would like to select a part of an image and copy it to another image. Is this possible? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted September 21, 2019 Share Posted September 21, 2019 30 minutes ago, Mike said: I would like to select a part of an image and copy it to another image. Hi, I used this library at one time: http://deepliquid.com/projects/Jcrop/demos.php Quote Link to comment Share on other sites More sharing options...
Mike Posted September 21, 2019 Author Share Posted September 21, 2019 Hi, That should do the trick. Could you perhaps provide an example how to use it in uniGUI? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted September 21, 2019 Share Posted September 21, 2019 5 minutes ago, Mike said: Could you perhaps provide an example how to use it in uniGUI? Unfortunately I did not save an example made on the basis of this library. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted September 21, 2019 Share Posted September 21, 2019 10 minutes ago, Mike said: Could you perhaps provide an example how to use it in uniGUI? I will try. Quote Link to comment Share on other sites More sharing options...
Mike Posted September 21, 2019 Author Share Posted September 21, 2019 Thanks! I appreciate it. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted September 23, 2019 Share Posted September 23, 2019 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; Quote Link to comment Share on other sites More sharing options...
Freeman35 Posted September 23, 2019 Share Posted September 23, 2019 @Sherzod I wish to add example project. Quote Link to comment Share on other sites More sharing options...
Mike Posted September 23, 2019 Author Share Posted September 23, 2019 @Sherzod Thank you! I will try it asap. Quote Link to comment Share on other sites More sharing options...
Mike Posted September 23, 2019 Author Share Posted September 23, 2019 Got this working! Any suggestions how to copy the selected part of image to another uniimage? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted September 23, 2019 Share Posted September 23, 2019 8 minutes ago, Mike said: Got this working! Any suggestions how to copy the selected part of image to another uniimage? As you understand, here we pass X and Y coordinates, height and width of the cut-out area to the server. Quote Link to comment Share on other sites More sharing options...
Mike Posted September 26, 2019 Author Share Posted September 26, 2019 Thanks again! I will try to figure this out. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 7, 2019 Share Posted October 7, 2019 On 9/26/2019 at 6:10 PM, Mike said: Thanks again! I will try to figure this out. Also this post (example) may help you: http://forums.unigui.com/index.php?/topic/6685-crop-image/ Quote Link to comment Share on other sites More sharing options...
Mike Posted October 8, 2019 Author Share Posted October 8, 2019 Thank you! Will check it. Quote Link to comment Share on other sites More sharing options...
Ario.Paxaz Posted February 21, 2021 Share Posted February 21, 2021 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 Quote Link to comment Share on other sites More sharing options...
andyhill Posted February 21, 2021 Share Posted February 21, 2021 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. Quote Link to comment Share on other sites More sharing options...
andyhill Posted February 22, 2021 Share Posted February 22, 2021 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; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 22, 2021 Share Posted February 22, 2021 5 minutes ago, andyhill said: This is what I have so far, blue code works, red code fails to fire, please advise Hello, Do you have a simple testcase to check? Quote Link to comment Share on other sites More sharing options...
andyhill Posted February 22, 2021 Share Posted February 22, 2021 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 Quote Link to comment Share on other sites More sharing options...
andyhill Posted February 23, 2021 Share Posted February 23, 2021 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 ? Quote Link to comment Share on other sites More sharing options...
andyhill Posted March 10, 2021 Share Posted March 10, 2021 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'+ '});'); Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 10, 2021 Share Posted March 10, 2021 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!? Quote Link to comment Share on other sites More sharing options...
andyhill Posted March 10, 2021 Share Posted March 10, 2021 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 Quote Link to comment Share on other sites More sharing options...
andyhill Posted March 11, 2021 Share Posted March 11, 2021 Sherzod, please advise. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted March 11, 2021 Share Posted March 11, 2021 17 minutes ago, andyhill said: please advise Well, I don't know if this is possible with this plugin at all... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.