crop the image

[thipperudra]

Hi Antun,

In my application i want to crop the image,by clicking the button, a selected regtangle(round) area should be crop.Which is as like a function of photoshop crop button.How to do this in Laszlo.Do you have any reference code for the same.

Thanks,
-Rudresh.

[antun]

You would put the view with the resource you want to crop inside of a view with its clip attribute set to true:


<canvas debug="true">
<view name="cliparea" clip="true" width="200" height="75">
<view resource="photo.jpg" />
</view>
</canvas>


Then you could resize the cliparea view as required.

-Antun

[thipperudra]

Hi Antun,

I want to crop selected portion of the image at the runtime automatically, as like in adobe photoshop, first select the portion of the image area by using "Rectangular Marquee Tool(M)",and then press the "Crop" button.So i want do same steps in laszlo: firstly the image should be original size and then i want to select (Rectangular)portion of the image and finally if i pressed the button the image should be crop and unslected portion of the image should be remove.How to do all these in Laszlo.

http://www.ofoto.com/Tour_4.jsp?

In the above link, they done same kind of stuffs.

Thanks,
Rudresh.

[antun]

I'm a little confused. Was my last post not what you were asking about?

Are you asking how to save the image somewhere, or are you asking how to crop it?

-Antun

[thipperudra]

Hi Antun,

I am asking how to crop the image dynamically.

At start the image did not crop.If user wants to crop(crop means the user has to select the particular protion of the image and remove the unselected image ) his selected rectangular portion of the image.Before he press the crop button he should know himself what protion of the image he selected visually(rectangular mark on the image),and then if he press the button the image should be crop.And if he wants again to crop the same cropped image, the same previous steps should be repeat.How can i do all these by lzx code?

http://www.ofoto.com/Tour_4.jsp? in this link they using one tool for manipulat the image.The tool name is "OfotoNow".That tool provides the option for crop the image.So how can i do like this.

Thanks alot
Rudresh

[antun]

But I think I answered that a couple of posts back:


You would put the view with the resource you want to crop inside of a view with its clip attribute set to true:

code:
<canvas debug="true">
<view name="cliparea" clip="true" width="200" height="75">
<view resource="photo.jpg" />
</view>
</canvas>

Then you could resize the cliparea view as required.

-Antun


Does this not provide the effect you're looking for? The clip attribute does crop its subviews to its own dimensions.

-Antun

[thipperudra]

Hi Antun,

<canvas debug="true">
<view name="cliparea" clip="true" width="200" height="75">
<view resource="photo.jpg" />
</view>
</canvas>

The above code will clip the image at start. I don't want to clip the image at start.I want to give this option of choosing a cliparea should be user.User should select how much cliparea on an image ,then he press one "clipbutton" then only selected cliparea should be clip (crop).Please refer(OfotoNow tool) the link what i gave in last post.

Thank you,
Rudresh

[antun]

Hi Rudresh

Like I said in an earlier post, resize the cliparea view as needed. So if you don't want any clipping to happen, set make the cliparea view really large.

You might also turn clipping on and off using setAttribute().

-Antun

[thipperudra]

Hi Antun,

<canvas debug="true">
<class name="topleftresizestate" extends="state" >
<attribute name="xroffset" value="$once{this.getMouse('x')}" />
<attribute name="initx" value="$once{this.x}" />
<attribute name="initwidth" value="$once{this.width}" />
<attribute name="width"
value="${this.initwidth+this.initx
-this.immediateParent.getMouse('x')+xroffset}" />
<attribute name="x"
value="${this.immediateParent.getMouse('x')
-this.xroffset}" />

<attribute name="yroffset" value="$once{this.getMouse('y')}" />
<attribute name="inity" value="$once{this.y}" />
<attribute name="initheight" value="$once{this.height}" />
<attribute name="height"
value="${this.initheight+this.inity
-this.immediateParent.getMouse('y')+yroffset}" />
<attribute name="y"
value="${this.immediateParent.getMouse('y')
-this.yroffset}" />
</class>
<view id="cliparea" clip="true" width="150" height="130" onmousedown="draggable.apply();" onmouseup="draggable.remove();" >
<view valign="top" align="left" id="clipimg" resource="054.jpg" stretches="both" clip="true"/>
<dragstate name="draggable"/>
<resizestate name="rs"/>
<topleftresizestate name="trrs"/>
<view align="left" valign="top" width="7" height="7" bgcolor="blue" onmousedown="cliparea.trrs.apply()" onmouseup="cliparea.trrs.remove()" />
<view align="right" valign="bottom" width="5" height="5" bgcolor="blue" onmousedown="cliparea.rs.apply()" onmouseup="cliparea.rs.remove()" />
</view>
</canvas>

I am trying with the above code,it clips the image when i move the bottom right blue point upward direction.But the samething not happenning with top left corner blue point,only drag the image towards down. So how can i rectify.And also i want to enlarge the clipped portion of the image.

Thank you,

Rudresh

[antun]

The reason you're seeing that effect is that when you resize the cliparea view from the top-left, you move it's origin (0,0), and naturally you also move clipimg view inside of it.

In order to get the clipimg view to look as though it's staying still, you actually have to move it opposite to the resize direction. So if you move the cliparea view to the right by 10px, you need to move the clipimg view to the left by 10px.

If you sketch this out, you'll find that the distance you have to move it is -1 * clipimg.x (or y). So the following constraint will fix it:


<view id="cliparea" clip="true" width="150" height="130"
onmousedown="draggable.apply();"
onmouseup="draggable.remove();">

<view valign="top" align="left" id="clipimg" resource="054.jpg"
x="${-parent.x}"
y="${-parent.y}"
stretches="both" />

<dragstate name="draggable"/>
<resizestate name="rs"/>
<topleftresizestate name="trrs"/>
<view align="left" valign="top" width="7" height="7"
bgcolor="blue" onmousedown="cliparea.trrs.apply()"
onmouseup="cliparea.trrs.remove()" />
<view align="right" valign="bottom" width="5" height="5"
bgcolor="blue" onmousedown="cliparea.rs.apply()"
onmouseup="cliparea.rs.remove()" />

</view>


This might affect the dragging. To fix that you might consider nesting the whole lot above in another view that you drag.

-Antun

[Andreeeas]

hi,

hopefully i can revive this post with my question ;)

Are you asking how to save the image somewhere, or are you asking how to crop it?

-Antun

i want to know how to save the resulting image elsewhere. how can i achieve that??

thx in forward

andreeeas

[antun]

If you want to save an image from an OpenLaszlo app, you can do so (on the server). There's a Flash API that you can call directly, which allows you to take a bitmap "screenshot" of a view and its children. Works in SWF8 only.

See here:
http://forum.openlaszlo.org/showthread.php?t=7932

-Antun