Dynamic changing of cropper image when used with preview

[Jason]

I am trying to combine dynamically changing the cropper image (as in
example-DynamicImage.htm) with a preview area. I found an old comment
#73 from Dave indicating that this wasn't implemented, but I am trying
to do it anyway.

My stumbling block is that the cropper is creating two DOM nodes with
the same id, which is a no-no according to W3C specs and the Prototype
docs.

So the result you see depends on whether your preview image comes
before or after the cropper image in your DOM tree. When you go to
switch images only the first one will get changed to show the new
image. I can go into Firebug and manually change the other one to
match and then things look correct - both the cropper image and the
preview image are both updated.

I could try to monkey around with the cropper source to prevent it
from using the same id twice, or I could try some hack to look for the
duplicate id myself and change the img property on the second one to
match. My problem in monkeying around with the cropper source is that
when point to cropper.uncompressed.js it doesn't run anymore. I'm not
sure if there is anything else needed to run the cropper in that
manner.

Anyone have ideas on this?

thanks,
Jason

[Dave Spurr]

Really, I didn't think I was using the same ID for the preview area,
that's bad.

As for switching out cropper.js for cropper.uncompressed.js that's a
known issue (as the cropper does a lookup on it's own path to
dynamically include the stylesheet, so is always looking for cropper.js)
so simply rename cropper.js to cropper.compressed.js (or delete it if
you're going to monkey around with the source) and rename the
uncompressed version.

To do what you want with the preview area you should just be able to add
some hooks to the parts that remove the cropper and re-add them so that
the preview can interact with it. The cropper really does need
re-writing to fix all these little issue, one day... soon.

-D

[Jason]

Thanks for the info, Dave. (and the awesome tool)

I was able to work-around the preview issue by adding a
class="cropperimage" to the testImage img, which then gets replicated
when this img is copied into the previewArea div.

Then I modified the setImage function in CropImageManager as shown
below to loop through anything with that class value and update the
image properties:

setImage: function( imgSrc, w, h ) {
var f = $$('.cropperimage');
for(var i=0; i<f.length; i++){
f[i].src = imgSrc;
f[i].width = w;
f[i].height = h;
}
this.attachCropper();
},

So now I seem to have dynamic image changing with preview!