Dotted lines on top of cropbox

[Sedins]

I'm trying to create a canvas painting frame on top of the cropbox image, but unable to draw dotted lines (or anything else) with CSS in that area.

Something in the lines of the one at the following site (after uploading an image):
http://www.hellocanvas.co.uk/order

A fast test I did was just to do the following, which I had hoped should add a dotted line at the top of the draw area:
$("#cropimage").css("border-top", "1px dotted #ff0000").css("z-index", "9999");

Would be great with some feedback on how to be able to get dotted lines and filled areas on top, if possible. Do you know anything about this?

[acornejo]

I'm not sure I understand what you are trying to do.

However, if you want dotted lines around the selected area, you probably don't want to use a cropbox approach, but a traditional image select approach.

• Cropboxes are nice when you want to provide a default selected region, together with a preview in a small area (for instance, if you expect people might be using a cellphone or mobile device).
• Select areas are nice if you have lots of space on the page and you don't mind using it up to provide an interface to select an image region.

If you want a selectable area approach to cropping, I suggest you use Jcrop instead, see here:
http://deepliquid.com/projects/Jcrop/demos.php

PS: feel free to reopen this issue if I misunderstood your question.

[Sedins]

Oh, I think you misunderstood me quite a bit. Not that easy to explain.

I've made a picture to show you instead.

Trying to create those dotted lines (and hopefully also make the corners disappear).

Hope that will clear it up, not the best gfx-artist in the world :)

[acornejo]

Thanks for the artwork ;)

You could acomplish this with a combination of CSS and javascript, but in all honestly I don't think it is worth the effort. Did you take a look at Jcrop? It is still not what you want, but at least to me it seems closer to what you are looking for.

The whole point of a cropbox is NOT to draw the part of the image which is outside the selected region. What you want to do is first use cropbox to select part of the image, and then redraw the rest of the image outside. It can be done, but it will require quite a bit of hackery around the plugin.

If you are still interesting in doing it, here is how you would do it:

Create a 3x3 table, in the middle column and row put the image with the cropbox plugin. In the top, bottom, left and right cells you set the background-image property of the cells to the same image that you used for the cropbox. Now, using the "cropbox" event you update the background-position property of the cells. Pseudocode below:

<table border=0>
<tr>
<td></td><td id="topcell"></td><td></td>
</td>
<tr>
<td id="leftcell"></td><td id="cropboxcell"></td><td id="rightcell"></td>
</tr>
<tr>
<td></td><td id="bottomcell"></td><td></td>
</td>
</table>

  $('#cropboxcell').cropbox({
        width: 200,
        height: 200
    }).on('cropbox', function(e, data) {
        // use data to update
        $("#leftcell").css('background-position', getcssmargin(data, 'left'));
        $("#rightcell").css('background-position', getcssmargin(data, 'right'));
        $("#topcell").css('background-position', getcssmargin(data, 'top'));
        $("#bottomcell").css('background-position', getcssmargin(data, 'bottom'));
    });

All that is missing from the above is code for the getcssmargin function, which should use the data returned by the cropbox event to create a string that encodes the CSS margins for each of the cells (this string will be of the form "50px 75px", where the specific numbers depends on the cropbox data and the corresponding cell).

[Sedins]

Thanks for the code, but afraid that I can't use it as I may have explained the situation a bit rough.

I want cropbox to behave exactly like it use to now. It will crop the outer part of the image, not where the dotted lines are.

The dotted lines (and removed corners) should just be there as information to the user (to know where the wrapping part of the canvas painting is going to be).

So in short - I want to draw dotted lines (and something else to remove corners) on top of the image just to make it clear for the user how the canvas painting will look like after printing and assembling it. Please see the HelloCanvas link in the first post if it's unclear as it's basically this behavior I want.

Made another nice image to help explain a bit further. Not quitting my day job though ;)

[acornejo]

If I understand what you want, then you just want to overlay something on top of the cropbox frame. This is not cropbox specific question btw.

What you need to do is to add another node to the cropbox frame with your overlay (the node could be an image you created dynamically with canvas, or a fixed PNG if the size of the cropbox is always the same, or a collection of styled divs to create the effect you want, etc..).

To access the cropbox frame you can use the .$frame property of the cropbox instance, or you can use selectors to look for a div with class "cropFrame" which is created when you activate the cropbox.

You will need to use "position: absolute" on your CSS, and probably "top: 0; left: 0" assuming the overlay is the same size as the image and you want it to appear exactly above the image. Finally, to make sure the overlay appears on TOP of the image, use "z-index: 10", and make sure to hide the overlay when the mouse hovers over it, otherwise it will be impossible for the user to drag the cropbox.

As I said, all this has very little to do with the jquery-cropbox plugin, and it is more of a general javascript/css development, I suggest you post these questions in stack overflow instead (but if you have more questions specific to this plugin, feel free to post them here).

[Sedins]

Was unsure about if it had something to do with the actual plugin or not, as I was unable to draw on the image. With your help I found out that I was targeting the wrong tag (img instead of the $frame-property). Now it works like a charm. Thanks a lot for your help (again)...

[acornejo]

No problem, I'm glad it worked.

[Sedins]

Hi again,
Thought I should check if you've seen the problem I have with the offset being incorrect after first zooming and than changing the crop size?
#13
Would appreciate it a lot with some info on this one. Have tried to find the issue myself, but haven't found the source of it yet.
Regards,
Stefan

[acornejo]

Sorry @Sedins, i havent had time to fix it, and since I don't use that feature I keep forgetting. I know exactly what what the fix is, I'll commit something when I am at the computer.

[Sedins]

That would be very helpful, it's a feature that I use often. Thanks!