JCrop Difficulties

[Webinator]

Thank you for JCrop (0.9.9) but I have ASP.net problems in 2 Browsers

Issue Details:
There is a Global Master Page which has a nested Master Page under it
and JCrop is included in a
User Control file (*.ascx) in a page placeholder. (Convoluted huh -
Thank You Microsoft)

The image is displayed in an <asp:Image> image control loaded from a
server folder on a previous page.
There are 3 possible places to set the display dimensions"

1.) In the User Control *.cs load code through the image controls
properties.
2.) In the styles for the image control
3.) In the JCrop properties during JCrop creation.

I am relying on the boxWidth & boxHeight properties of JCrop to set
the scaled image display size of 693 x 520 Pixels
All images tested are larger than the display size. (approx 2200 x
1700)
This returns the properly scaled crop coordinates in IE 8, latest
Firefox and Opera 11.x.

When I open the page in Safari & Chrome, the image has 0x0 dimensions.
Developer tools shows the image file is loaded and the JCrop styles
are present but the image displays at 0x0 dimensions.

If I set the image control display size to 693 x 520 in the control
load code using the image control properties (commented out below)
the image, and crop rectangle display properly in all browsers but the
crop coordinates returned are not scaled properly in any browser.

Any Ideas??? Relevant Code Excerpts below

// ASP aspx page

<%@ Page Language="C#" MasterPageFile="~/Public/Public.master"
AutoEventWireup="true" Inherits="Site.Public.Public_Crop" Title="Crop
Page" CodeFile="Crop.aspx.cs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="mainContent"
runat="Server">

<script src="js/jcrop/js/jquery.min.js" type="text/javascript"></
script>
<script src="js/jcrop/js/jquery.Jcrop.js" type="text/javascript"></
script>
<link rel="stylesheet" href="js/jcrop/css/jquery.Jcrop.css"
type="text/css" />

<script type="text/javascript">
var props;
var api;
var layout = 0; // 0 = Landscape 1 = Portrait

if ('<asp:Literal ID="aspectRatio" runat="server" />' == '8x10'){
props = { landscape: 1.25, portrait: .8 };
} else {
props = { landscape: 1.5, portrait: .67 };
}

// Did not work properly when using $(document).load()
$(document).ready(function()
{
api = $.Jcrop('.cropImg', {
onChange: showCoords,
onSelect: showCoords,
bgOpacity: .5,
bcColor: '#000000',
boxWidth: 693,
aspectRatio: props.landscape,
setSelect: [100, 100, 600, 400]
});

$('#flipBtn').click(function(e) // Button toggles portrait/
landscape
{
var W = parseInt($('#w').val());
var H = parseInt($('#h').val());
var X = parseInt($('#x').val());
var Y = parseInt($('#y').val());
var nX = Math.round(X - ((H - W)/2));
var nW = Math.round(nX + H);
var nY = Math.round(Y - ((W - H)/2));
var nH = Math.round(nY + W);
if (layout == 0) {
layout = 1;
api.setOptions({ aspectRatio: props.portrait });
api.setSelect([nX, nY, nW, nH]);
api.focus();
} else {
layout = 0;
api.setOptions({ aspectRatio: props.landscape });
api.setSelect([nX, nY, nW, nH]);
api.focus();
}
});

function showCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
};

});
</script>
<div style="margin-right: 14px;">
<div class="txt">
<table style="width: 700px;">
<tr>
<td style="width: 540px;">
To change the orientation of the selected
area, click on the button to the right.<a href="javascript:void(0)"
id="flipBtn" style="margin-left: 16px;">
<img src="images/resize/
orient.gif" alt="Image" style="vertical-align: middle; border: 0" /></
a>
</td>
<td style="text-align: right">
<asp:ImageButton runat="server" ID="btnUpload"
ImageUrl="images/resize/next.gif" OnClick="btnUpload_Click" />
</td>
</tr>
</table>
<asp:Label ID="lblMessage" runat="server" CssClass="alertMessage"
Visible="false" EnableViewState="false"></asp:Label>
<asp:ValidationSummary runat="server" ShowSummary="true"
HeaderText="Please correct the following errors and try again."
CssClass="errors" ShowMessageBox="false" />
<div style="text-align: center">
<asp:Image runat="server" ID="cropImg" CssClass="cropImg" />
</div>
<input type="hidden" id="x" name="x" /> // Crop
dimensions stored here
<input type="hidden" id="y" name="y" />
<input type="hidden" id="x2" name="x2" />
<input type="hidden" id="y2" name="y2" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
</div>
</div>
</asp:Content>

// aspx.cs page

public partial class Public_Crop : Page
{
protected virtual void Page_Load(object sender, EventArgs e)
{
BindControls();
}

// Image Loaded Here
protected virtual void BindControls()
{
Printer printer = new Printer();
printer.PrinterID = int.Parse(Request.QueryString.Get("p"));
aspectRatio.Text =
PrinterDAO.GetPrinterByID(printer).AspectRatio;
//cropImg.Width = 693;
//cropImg.Height = 520;
cropImg.ImageUrl = Page.ResolveClientUrl("~/Public/
Uploads/" + Request.QueryString.Get("f"));
}

//Image Cropped and Stored Here
private String CropImage()
{
String fileName =
Request.QueryString.Get("f").Substring(8);
Rectangle cropRect = new
Rectangle(int.Parse(Request.Params.Get("x")),
int.Parse(Request.Params.Get("y")),
int.Parse(Request.Params.Get("w")),
int.Parse(Request.Params.Get("h")));
Bitmap orig = new Bitmap(Server.MapPath("~/Public/
Uploads") + "\\" + Request.QueryString.Get("f"));
Bitmap cropped = new Bitmap(orig).Clone(cropRect,
orig.PixelFormat);
cropped.Save(Server.MapPath("~/Public/Uploads") + "\\" +
fileName);
return fileName;
}
}

Thanks! David Grik