So far i've only been able to test with an Android phone and an IPad. Both do not allow resizing or moving of the crop box.

Unrelated to drupal I did some searching for jquery cropping plugins. Out of all the ones I tested only 1 worked. It was called Jcrop
http://deepliquid.com/content/Jcrop.html
Looking @ the code it seems around line #365 @ https://github.com/tapmodo/Jcrop/blob/ac3f54c77ac2bfe985e26afb75be4661fa...
might help.

I also ran into this http://furf.com/exp/touch-punch/resizable.html
which I tried to add manually to the page-imagecrop.tpl.php page but it didn't seem to work. I'm only guessing, but it could be because that example site uses a newer version of jquery and jquery UI compared to D6 with jquery update.

Hopefully this is a good starting point to get the ball rolling.

CommentFileSizeAuthor
#3 jcrop_integration.patch63.61 KBgooddesignusa

Comments

gooddesignusa’s picture

My original plan was to pull out the code that made touch devices work with jcrop and integrate it with this modules cropping code. After looking at the Jcrop code it seemed like the touch code was in everything. I gave up on that and tried to get furf.com's touch-punch plugin to work. Which basically turned touch clicks into mouse clicks. I had it loading but it wasn't work.

Looking at his demo page I noticed he was running a different version of jquery UI. I found a patch for the jquery UI drupal module to run that version. Updated everything and it still didn't work.

So as a last resort I started converting this plugin to have an option to use Jcrop instead of the built in cropping. I Know zuuperman didn't want to totally change over to using Jcrop so inside the imagecache preset there is a checkbox that allows you to enable Jcrop for that preset.

I'm in the process of converting all the features over from the imagecache preset so everything will work correctly.

So far I've done:
crop width and height. working with #'s and percents. - I noticed on the original cropping the percent thing doesn't seem to work correctly.
offsets work with #'s or top,right,bottom,left,center. also made it so it uses that as a starting point now. instead of 0,0
resizable option is working
Do not allow down scaling is working correctly - modules original version seemed to not work correctly.
Still need to finish up aspect ratio.

also got it to correctly show previous crops. I will post a patch in another day or so.

nils.destoop’s picture

I just downloaded jcrop. But i notice that it also depends on jquery 1.5.1. Jquery update for d6 only goes till 1.3.2. So this will probably be a problem.

What would need to be done: imagecrop has his own jquery / jquery update that comes with the module. None of the drupal core / other modules js should be loaded on imagecrops pages.

gooddesignusa’s picture

StatusFileSize
new63.61 KB

Finally got a working patch. Every option inside the imagecache preset works with jcrop. Including aspect ratio & offset. In order to get the crop to use the xoffset and yoffset as a starting point I had to move some code up a little bit. It didn't seem to break anything. I tested the old crop as well to make sure nothing broke in the process of adding Jcrop option. I've tested on an Ipad & android phone and it does work. The only issue is you can not resize the page by pinching. That is an issue with how Jcrop detects touch events.

I tested this patch using the same jQuery Update 6.x-2.0-alpha1 module I needed for imagecrop. I did not need to upgrade juery. Also worth mentioning is Jcrop does not need jquery UI.

MarkAgarunov’s picture

I applied the patch this morning and it works well. Being able to crop from my phone or tablet is definitely a plus.

marinex’s picture

Hi your patch works well. I have one problem with infinite loading Have you any solution?
thanks M.

gooddesignusa’s picture

marinex is the issue you posted to related to this patch? Does this only happen after applying the patch?

gooddesignusa’s picture

Title: Mobile Integration » Mobile Integration - JCrop patch
Status: Active » Needs review
nils.destoop’s picture

marinex his post has nothing to do with this issue.
I applied the patch locally, and everything seems to work ok.

nils.destoop’s picture

Status: Needs review » Fixed

I removed all the jcrop settings and the dependency on jquery ui. From now jcrop is always used. This is now on dev.

nils.destoop’s picture

Version: 6.x-1.x-dev » 7.x-1.x-dev
Status: Fixed » Needs work

Busy with porting this to D7

nils.destoop’s picture

Status: Needs work » Fixed

This is now also ported to d7 :)

gooddesignusa’s picture

Sorry about that patch taking out stuff that had nothing to do with the jcrop integration. I didn't notice it did that.
I did get a chance to test out the latest dev and it seems to be working good.
I am however getting an error when I run cron. But this is unrelated to the jcrop integration. I experienced this issue on the dev before you added jcrop.
When you run cron you get this error msg.

user warning: Unknown column 'ic.presetid' in 'field list' query: SELECT ic.fid, ic.presetid FROM imagecrop ic WHERE NOT EXISTS (SELECT fid FROM files f WHERE ic.fid = f.fid) AND ic.reference = 'files' in /Users/**/Sites/crop_nov_6/drupal-6.22/sites/all/modules/imagecrop/imagecrop.module on line 115.
user warning: Unknown column 'ic.presetid' in 'field list' query: SELECT ic.fid,ic.presetid FROM imagecrop ic WHERE NOT EXISTS (SELECT presetid FROM imagecache_action ia where ic.presetid = ia.presetid AND ia.action = 'imagecrop_javascript') AND ic.reference = 'files' in /Users/**/Sites/crop_nov_6/drupal-6.22/sites/all/modules/imagecrop/imagecrop.module on line 132.

I can open a new issue if you would like for tracking but I'm guessing its a quick fix.

nils.destoop’s picture

Idd, that was already in before. The cleanup still queries on presetid, but that is changed by presetname.
I'll fix this today.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

geberele’s picture

Component: User interface » Documentation

Great patch! Thanks
I can upload and crop images on my website with the iPad now!
Geberele

Krunaldabhi’s picture

Issue summary: View changes

Jcrop is running good with touch devices
follow the below,

Don't call function "onChange : updatePreview"

jQuery(function($) {
var cropContainer = $('#canvas');
cropContainer.Jcrop({
// onChange : updatePreview,
onSelect : updatePreview,
aspectRatio : 1
});

chrischinchilla’s picture

Worked for me to!