Trouble including a jQuery Plugin

ionic-v1
1

I’m having some trouble including a jQuery plugin, and can’t identify why. The workflow goes like this.

  1. Acquire an image from the phonegap camera plugin (works)
  2. Set the src attribute of an image to the base 64 encoded URI returned by the plugin (works)
  3. Draw a selection box around an area of the displayed image using jQuery plugin jCrop. (Starting at step 3, all of these things work in the Phonegap Developer app, but when I send it to Phonegap Build, they don’t work in the resulting app).
  4. Use the x, y, height, and width parameters sent by the jCrop plugin, redraw a cropped, zoomed image on a canvas.

As mentioned, this all works perfectly when tested using the Phonegap Developer app. But once built, it fails on Step 3.

All resources are local and packaged into the app - no external references. The start of the failure seems to be around this line of code:

jQuery('#myImage').Jcrop({ paramsObject });

I think from what I’ve read that the jQuery reference must be prior to the angular/ionic bootstrap. I have tried that, as well as after. Both ways, it works in the developer app. But neither of them work in the built version.

Sampling of index.html with jQuery included after ionic (I’ve tried both before & after):

<link href="js/jcrop-master/css/jquery.jcrop.min.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/jquery/jquery-2.1.1.min.js"></script> 
<script src="lib/angular-local-storage.js"></script>
<script src="phonegap.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/factories.js"></script>
<script src="js/services.js"></script>
<script src="js/trendgraph.js"></script>
<script src="js/trendgraphDirective.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="js/jcrop-master/js/jquery.jcrop.min.js"></script>

And then finally, here’s a visual of what it’s supposed to do (and does do in Phonegap developer app) vs. what happens in the built version.

The jCrop plugin draws a selection box around part of the image. That selected area is drawn, zoomed and cropped as appropriate onto the canvas below. In the built version, the jCrop selection does not appear.

I’m completely baffled as to why this works fine in the Phonegap Developer App, but not in the actual app compiled with Phonegap Build. I really am not sure how to get visibility into what’s different. Any help appreciated.

2

I guess if no one has a specific answer, just a push in the right direction or guess would be huge. Does this sound like an issue specific to phonegap build? Or does it seem more related to the interaction between AngularJS, ionic, and jquery?

With no error messages visible, I’m just at a loss for how to troubleshoot. My best clues usually come from running in Chrome via ionic serve and watching the console, but I can’t test that way here because the camera plugin has to be called first…

3

Well first thing I’ve noticed is this

<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/jquery/jquery-2.1.1.min.js"></script>

Try changing to jquery 1.9.1, as jquery 2.0 isn’t supported by angular (a choice of the angular core team).

Also, change the load order. Jquery should be loaded before Ionic.

<script src="js/jquery/jquery-1.9.1.min.js"></script> 
<script src="lib/ionic/js/ionic.bundle.js"></script>
4

Many thanks for your suggestion @mhartington. I switched the jQuery version out for 1.9.1, and also switched it to loading prior to the ionic bundle as prescribed. Unfortunately, the results are the same. It works exactly as desired/expected when tested on the Phonegap Developer app, but the built version (via Phonegap build) does not work. In the complied version, the selection area (provided by jCrop) does not appear on the image, and thus the downstream features (preview pan/crop on the canvas) also do not work.

A bit of debugging from the weinre server, using the built version of the app.

Any other suggestions?

5

Were you able to solve this?
I was also thinking of using jCrop in my app.

6

No, it’s still currently an open issue for me. Which is a shame because it’s a nice solution and works beautifully in the Phonegap Developer app. I’ll post the solution if I’m able to work it out, and am open to any other suggestions out there. Truth be told though, I’m close to abandoning it and finding another solution, as I just don’t have any insight into why this fails (no errors).

1 Like
7

If you do find one, please keep us updated. i’d love to use somesort of in app image edit tool, i use these as options for my getPicture function
allowEdit : true,
targetWidth : 500,
targetHeight : 500,
this makes the user make his image 500x500 with a native picture edit app, it does the work but would find it way smoother to do it in app with an image preview

8

I’ve integrated this image crop directive to my app
https://www.npmjs.org/package/ng-img-crop
It works in the browser, and had to do a couple fixes to pick up the touch events to get it working when deployed to my Android phone, which was replace in a few spots

pageX=e.changedTouches[0].pageX;
pageY=e.changedTouches[0].pageY;

with

if(e.changedTouches === undefined) {
      	  pageX=e.originalEvent.changedTouches[0].pageX;
      	  pageY=e.originalEvent.changedTouches[0].pageY;
        }	else {
      	  pageX=e.changedTouches[0].pageX;
      	  pageY=e.changedTouches[0].pageY;
        }

as jQuery wraps the event and doesn’t expose the changedTouches