Grey Area overlaying Image Preview

[Kelly]

Hi All,

I can't seem to get past this issue of a grey area covering the entire
image in some instances. My browser is IE 7.

Here is a link to show my issue:

http://picasaweb.google.com/lh/photo/NXZfvW1yz90iRmwo4cOZ_EZAIpBaSoZRCyQAxbEllBo?feat=directlink

[David Spurr]

Kelly,

Are you loading the cropper via AJAX loaded content or in a modal
window?

-D

On Jul 16, 9:46 am, Kelly <kcfergus...@gmail.com> wrote:
> Hi All,
>
> I can't seem to get past this issue of a grey area covering the entire
> image in some instances.  My browser is IE 7.
>
> Here is a link to show my issue:
>

> http://picasaweb.google.com/lh/photo/NXZfvW1yz90iRmwo4cOZ_EZAIpBaSoZR...

[Kelly]

I believe just a model window.

We have a file called ImageEdit.jsp, hope you don't mind me including
the source here:


<%@ page import="com.sap.km.image.upload.bean.ImageBean" %>
<%@ page import="com.sap.km.image.upload.bean.Message" %>
<%@ page import="java.util.List" %>
<%@ page import="com.sapportals.htmlb.MessageBar" %>
<%@ page import="com.sap.km.image.util.ApplicationUtil" %>
<%@ page import="java.util.ResourceBundle" %>


<%@ taglib uri="tagLib" prefix="hbj" %>




<%
// storing ids from different controls
String formId = "";
String coordx1 = "";
String coordy1 = "";
String width = "";
String height = "";

// get the resource
ResourceBundle res = componentRequest.getResourceBundle();


// include required javascript files
ApplicationUtil.includeJS(pageContext,"scripts/lib/
prototype.js",componentRequest);
ApplicationUtil.includeJS(pageContext,"scripts/lib/
scriptaculous.js",componentRequest);
ApplicationUtil.includeJS(pageContext,"scripts/
cropper.js",componentRequest);
%>



<hbj:content
id="myContext">
<hbj:page
title="PageTitle">
<jsp:useBean
id="imageBean"
scope="session"
class="com.sap.km.image.upload.bean.ImageBean" />

<style type="text/css">
label {
clear: left;
margin-left: 50px;
float: left;
width: 5em;
}

#testWrap {
width: 200px;
float: left;
margin: 20px 0 0 50px;
}

#previewArea {
margin: 20px; 0 0 20px;
float: left;
}
</style>


<hbj:group
id="headlineGroup"
design="SAPCOLOR"
width="20%">
<%
headlineGroup.setTitle(res.getString("image.edit.image_edit"));

headlineGroup.setTooltip(res.getString("image.edit.image_edit"));
%>
<hbj:groupBody>


<hbj:form id="myForm">
<%
// get the id of the form
//formId = myContext.getParamIdForComponent(myForm);
formId = myContext.getCurrentFormId();
if(imageBean.hasMessages()){
List msgList = imageBean.getMessages();

for(int i = 0; i < msgList.size(); i++){
Message msg = (Message)msgList.get(i);
MessageBar msgBar = new MessageBar("msgBar" + i);
msgBar.setMessageType(msg.getType());
msgBar.setMessageText(msg.getText());
myForm.setMessageBar(msgBar);
msgBar.render(myContext);
}
}
%>
<table border=0>
<tr>
<td>
<div id="testWrap" style="height:<%=imageBean.getHeight()
%>px;">

<img src="<%=imageBean.getImageUrl()%>" alt="<
%=res.getString("image.edit.uploaded_image")%>" id="testImage" width="<
%=imageBean.getWidth()%>" height="<%=imageBean.getHeight()%>" />


</div>
</td>
<td>
<div id="previewArea"></div>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="2">
<hbj:button
id="editFinishButton"
onClick="onEditFinish"
width="100"
design="EMPHASIZED">
<%

editFinishButton.setText(res.getString("image.edit.image_edit_finish"));

editFinishButton.setTooltip(res.getString("image.edit.image_edit_finish"));
%>
</hbj:button>
<hbj:button
id="editCancelButton"
onClick="onEditCancel"
width="100">
<%

editCancelButton.setText(res.getString("image.edit.image_edit_cancel"));

editCancelButton.setTooltip(res.getString("image.edit.image_edit_cancel"));
%>
</hbj:button>
</td>
</tr>
</table>

<hbj:inputField id="x1" visible="false" type="string"
jsObjectNeeded="true">
<% coordx1 = myContext.getParamIdForComponent(x1); %>
</hbj:inputField>
<hbj:inputField id="y1" visible="false" type="string"
jsObjectNeeded="true">
<% coordy1 = myContext.getParamIdForComponent(y1); %>
</hbj:inputField>

<hbj:inputField id="imageWidth" visible="false" type="string"
jsObjectNeeded="true">
<% width = myContext.getParamIdForComponent(imageWidth); %>
</hbj:inputField>
<hbj:inputField id="imageHeight" visible="false" type="string"
jsObjectNeeded="true">
<% height = myContext.getParamIdForComponent(imageHeight); %>
</hbj:inputField>
</hbj:form>
</hbj:groupBody>
</hbj:group>
</hbj:page>
</hbj:content>
<script type="text/javascript" charset="utf-8">
function onEndCrop( coords, dimensions ) {
<%=formId%>['<%=coordx1%>'].value = coords.x1;
<%=formId%>['<%=coordy1%>'].value = coords.y1;
<%=formId%>['<%=width%>'].value = dimensions.width;
<%=formId%>['<%=height%>'].value = dimensions.height;
}

// example with a preview of crop results, must have minimumm
dimensions
Event.observe(
window,
'load',
function() {
new Cropper.ImgWithPreview(
'testImage',
{
minWidth: 100,
minHeight: 130,
ratioDim: { x: 100, y: 130 },
onEndCrop: onEndCrop,
previewWrap: 'previewArea'
}
)
}
);
</script>

> >http://picasaweb.google.com/lh/photo/NXZfvW1yz90iRmwo4cOZ_EZAIpBaSoZR...- Hide quoted text -
>
> - Show quoted text -

[Kelly]

I also just tested in Firefox and it works perfectly there.

> > >http://picasaweb.google.com/lh/photo/NXZfvW1yz90iRmwo4cOZ_EZAIpBaSoZR...Hide quoted text -

[David Spurr]

Kelly,

Try moving the image you're adding the cropper to out of the table. For some reason it doesn't work reliably in a table.

-D

> --
> You received this message because you are subscribed to the Google Groups "javascript-image-cropper-ui" group.
> To post to this group, send email to javascript-im...@googlegroups.com.
> To unsubscribe from this group, send email to javascript-image-cr...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/javascript-image-cropper-ui?hl=en.
>

[Kelly]

Thanks for the reply, I did remove the table and it still seems to
have the issue.

On Jul 17, 1:02 pm, David Spurr <david.sp...@gmail.com> wrote:
> Kelly,
>

> Try moving the image you're adding the cropper to out of the table. For some reason it doesn't work reliably in a table.
>
> -D
>

> ...
>
> read more »- Hide quoted text -

[Kelly]

Any other ideas on how to fix this issue?
Strange how it seems to work ok in Firefox but not in IE7.

Should i try different combinations of scriptaculous and prototype?
Maybe a different version of of cropper?

Also does it matter what i append to the loading of scriptaculous? for
example....

scripts/lib/scriptaculous.js?load=builder,dragdrop

> ...
>
> read more »

[David Spurr]

Maybe check that the image is ready and loaded before attaching the cropper. If you're still having issues then can you give a link to a live page demonstrating the issue.

-D

[Kelly]

Thanks for reply, do you know how to check that the image is ready and
loaded before attaching the cropper?

On Jul 18, 12:04 pm, David Spurr <david.sp...@gmail.com> wrote:
> Maybe check that the image is ready and loaded before attaching the cropper. If you're still having issues then can you give a link to a live page demonstrating the issue.
>
> -D
>

[Kelly]

Hi Dave,

Just trying to check your suggestion...

do you know how to check that the image is ready and
loaded before attaching the cropper?

> ...
>
> read more »

[Dale Newfield]

I've been having some difficulty with the cropper in IE, but found that
adding a meta tag telling IE to render in "standards" mode, it works fine.

-Dale

[Kelly]

Thanks Dale, are you referring to a tag like this?
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

[Dale Newfield]

On 7/20/10 12:51 PM, Kelly wrote:
> Thanks Dale, are you referring to a tag like this?
> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

Yes, although I'm using IE=edge (the image being cropped disappears if
using the mode mimicing 7).

-Dale