Real Time Image Cropping

[UPDATE] Because FileMaker has updated security and privileges, you need to enable the Privilege setting of Allow URLs to run FileMaker scripts (fmurlscript) in order for this technique to work. Also note that it's now possible to modify this technique such that urls are not required. You can use the bidirectional feature of Web Viewers to execute the JavaScript. This requires enabling the setting of Allow JavaScript to perform FileMaker scripts which is a setting on each individual web viewer object.

Original post

FileMaker Pro is always advancing its collection of tools in order to accomplish more and more every day tasks. It provides default widgets such as tab panels and sliders and offers useful functions such as GetThumbnail() for resizing images.

GetThumbnail, however, will only get you so far. It will only resize an image to another size and provides no functionality regarding the manipulation of that image in any other way. This is where you need to turn to either a plug-in or JavaScript within a Web Viewer.

With a plug-in, you’re limited in terms of what you can do within the FileMaker client on mobile devices. FileMaker Go doesn’t support plug-ins. With a web viewer, you can take full advantage of the JavaScript engine embedded within the browser.

In this video, I show you how to integrate and use a freely available and very powerful javascript library called Cropper.js. If your goal is to provide an easy-to-use cropping feature within your FileMaker solution, then you won’t find a quicker result than simply copying from the provided file!

AttachmentSize
RealTimeImageCropping2.zip2.02 MB

External links

Comments

Hi Matt,
It's seems that the attachment file is not correct.
Thanks
Anna

Posted by: anna.anto
Fri, 07/29/2016 - 10:44am

The file is within the container field in the Technique file. You just need to click in the container field in order to export the file.

-- Matt Petrowsky - ISO FileMaker Magazine Editor

Posted by: Editor
Fri, 07/29/2016 - 7:01pm

Hi Matt.

I was wondering if you had any suggestions for resources to learn/get a better understanding of JavaScript. I've messed around with many of the examples that you have provided on FileMaker Magazine, but I'd like to get a deeper understanding to perhaps start crafting my own. And this examples shows that if you can build items in JS, you can really unlock a lot of cool functionality.

Thanks in advance.

Marc

Posted by: Hillio
Sun, 07/31/2016 - 1:32pm

Windows 10/FileMaker 15

I can't seem to get the example file to work (yes, I exported it from the container field already).

I can drag my own image into it, but the image doesn't center or auto-size within the web viewer (like it seemed to in the video) Then, resizing the crop box does not update the Base64 field (or the resulting Base64_IMG).

The CSS result also appears to be different from the video: the buttons show up on the bottom as a separate bar instead of an overlaid transparent bar on top.

Posted by: aewerdt
Tue, 08/02/2016 - 10:16am

I just loaded it on my Windows 7 with IE and it's not working. Looks like I would need to troubleshoot it for Windows. Since I implemented it for my own use on iOS only, I didn't test for Windows.

Ultimately, it will work. Because, if you head to https://github.com/fengyuanchen/cropper within an IE Browser on Windows then it works there. If it works on the web then it should work within a FileMaker Web Viewer. The only limitation you have on web viewers is that the version embedded into FileMaker may be too old to support some new tech within newer versions of JavaScript. A good example is loading a GitHub page within a Web Viewer and it will likely say that github does not support older versions of IE.

While I don't have the time to immediately troubleshoot this now. I'll try to work on it because I will need it myself some day. It's typically a mix of the version of jQuery and the CSS being used.

Just know that it will work on Windows, it just needs to be debugged.

-- Matt Petrowsky - ISO FileMaker Magazine Editor

Posted by: Editor
Tue, 08/02/2016 - 12:34pm

Thanks. Hopefully the old-IE workaround isn't too painful (and hopefully the next version of FileMaker will finally upgrade the embedded web viewer engine).

I was excited about this video because it is exactly what I need for both FileMaker Pro (Mac & Windows, but it either has to work for everybody or not be exposed as a feature) as well as Custom Web Publishing. Your video might be enough for me to get it working via CWP next time I have a "free" day!

Posted by: aewerdt
Wed, 08/03/2016 - 6:32am

Hi Matt

Very clever solution! This was exactly what I had been looking for. I've got a solution working great locally but now that I have uploaded it to FileMaker Server the image crop has stopped working. I suspect it may be to do with the path to the database (and its script) referenced in the JavaScript, but so far I have been unsuccessful in 'fixing' the syntax. Can you tell me what the path syntax should be for a hosted solution?

Cheers

Posted by: NickCthulhu
Tue, 09/27/2016 - 12:47am

Fortunately I was just being dopey. The fmp://<hostname>/<databaseName>. It turns out a .local address is not enough.

Posted by: NickCthulhu
Tue, 09/27/2016 - 1:08am

Yeah, fmp:// urls need to be very specific in terms of the file. You can use fmp://$ for a local file, but if it's hosted you need to have the right host IP. For this I use the Custom Function and simply get the host IP with Get ( HostIPAddress ).

-- Matt Petrowsky - ISO FileMaker Magazine Editor

Posted by: Editor
Thu, 09/29/2016 - 11:47pm

We have been looking for a way to crop images and this looks perfect, but we need it to work on Windows. Hope to see an update soon!

Posted by: WillB
Fri, 10/21/2016 - 7:57am

Hi matt - do you know whether this technique will work with PDF? and if yes some guidance would be very helpful. Much appreciated. John

Posted by: Aussie John
Tue, 11/01/2016 - 7:49pm

Just adding my name to the list of people requesting some instruction on how to update jquery and CSS to work on windows

Jonathan Marcus

Posted by: j.a.marcus
Wed, 04/19/2017 - 2:01pm

Hi Jonathan

I managed to figure out the fix for windows if you are interested.

Regards
Kev

Posted by: kevinmortimer
Fri, 01/26/2018 - 11:07am

Hi Kev,

I am definitely interested ;-)
Are you willing to share your fix for windows ?

Regards.

Posted by: Tatai
Wed, 05/09/2018 - 9:52am

Very old message I know, but would also love your solution for windows implementation if you could share it. I have it working beautifully in Mac - just need to tweak for Windows. Thanks, Caitlin

Posted by: appsmith
Mon, 12/09/2019 - 9:36am

I can't get the example to work. I can add an image but as soon as soon as I try to move the crop area or click the crop icon I get an error: "Your access privileges do not allow you to perform this action." Anyone else have this issue or a way to get around it?

Posted by: skdmarx
Thu, 10/26/2017 - 6:18pm

You'll need to go into the Security area and enable the ability for the privilege set to be able to use fmpurls. They are required when using Javascript based solutions.

Posted by: admin
Fri, 10/27/2017 - 2:10am

I had to quit and restart FileMaker. Then the new extended priv took.

Thanks Matt.

Philip Jaffe

Posted by: Philip_Jaffe
Mon, 03/04/2019 - 3:59pm

Thanks for this tutorial... I could not have figured this out on my own. I can see where in your JS field you can change the aspect ratio of the crop box... how can I replace that with a variable, based on a filemaker number field?

Also you set up your example so it could input jpegs and png images -- but I'd also like to output as a png ( so that transparent areas will remain so). I'm sure this is another simple thing to do, I just can't figure out where to set that up. Thanks again for your excellent guide!

Katherine
www.makepopupcards.com

Posted by: MakeAnythingPopUp
Tue, 01/23/2018 - 9:17pm

Adding to this... so you know I'm not being lazy. I see in the github documentation that there is a function called setAspectRatio(aspectRatio) -- but I don't know how or where to add this to the code. I've tried a few things, like copying one of the functions you have (with all the punctuation) in the js field and replacing it with this name (and in the parentheses adding a reference to my aspect ratio field) but whatever iteration I try seems to break the cropper. The tool disappears and is replaced by a full size portion of my image. I've also tried adding a line to the "Let" calculation at the top of the html with ~aspectRatio = GetasNumber (Artwork::AspectRatio); which is possibly step 1, but I can't figure out where in the code to put a reference to that ~aspectRatio.

Katherine
www.makepopupcards.com

Posted by: MakeAnythingPopUp
Thu, 01/25/2018 - 5:46pm

Hi Matt, this file still not working on windows, I really need it for my project

Posted by: selmanguven
Wed, 08/01/2018 - 3:43pm

Thanks for a superb and highly professional magazine and an insight into the real power of Filemaker through this tutorial. Although I'm pretty advanced with Filemaker, I'm a total newcomer to Java but have got this utility pretty much up and running, albeit with one exception. Since my solution is running on a server, I am unsure how to edit the path to my solution file in the custom jss field. I presume one must provide the hostname as well as the filename when replacing your filename in "window.location = "fmp://$/Real%20Time%20Image%20Cropping?script= ...", but everything I have tried has been unsuccessful? BTW, I'm using OSX/IOS throughout.

Posted by: ctshuman
Mon, 09/03/2018 - 7:54am

Dear Matt, I have resolved this problem. This related to external data source specification which I have fixed. Another problem which I have also resolved was that of switching to a different version of FM than the one in use. I corrected this by specifying the default application used for URL. Have also implemented your Java barcode generation solution, also with great success. Thanks!

Posted by: ctshuman
Tue, 09/04/2018 - 11:08am

Another very cool trick! The sample file worked fine for me on FileMaker 16; but when I try to use on FileMaker 17, I get the following error: "The file "Real TimeImage Cropping.fmp12" could not be opened. Either the host is not available, or the file is not available on that host. Is there somewhere I need to update my specific host?

TLC Development

Posted by: TheLukeCommission
Fri, 09/28/2018 - 2:37pm

Matt,

You sort of mentioned in passing in the video that for Windows, we might need to use the clipboard to pass the encoded image if larger than 2500 characters. My images all range between 0.5 and 4MB. Works beautifully on a Mac, but failing on Windows 10.

Any more detail on how to use the clipboard to solve this?

Also, any thoughts on why the web viewer displays as expected on my Mac, but is off-set to the top/Left by about 50px on Windows (default chrome browser...if that matters)?

Philip Jaffe

Posted by: Philip_Jaffe
Tue, 03/05/2019 - 3:44pm

Aiuto!!! Il codice non funziona su windows. Sembrerebbe che non passa il codice BASE64 sull'apposito campo. Ho grande necessità di far girare questo codice su una mia soluzione filemaker. Come potete aiutarmi????? Esiste un'alternativa?

Posted by: EditAlex
Sat, 02/22/2020 - 5:54am

Hey Matt and other visitors - for FileMaker 19+ make sure you turn on the FileMaker URL extended permissions enabled or the file won't work.

Posted by: shdwmage
Tue, 04/05/2022 - 7:06pm