Add crop(per) support - Githubissues

kurtextrem commented 9 years ago

To use cropper, simply embed the cropper.(min).js and the cropper.(min).css from https://github.com/fengyuanchen/cropper

<!doctype html>
<html>
<head>
    <title>tapatar test</title>

    <link rel="stylesheet" href="dist/tapatar.css">
    <link rel="stylesheet" href="src/cropper/cropper.min.css">
</head>
<body>
    <input type="hidden" class="tapatar">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="src/tapatar.js"></script>
    <script src="src/tapatar-source.js"></script>
    <script src="src/sources/local.js"></script>
    <script src="src/cropper/cropper.min.js"></script>
    <script>
        $.fn.ready(function (){
            $('input.tapatar').tapatar({ cropper: {enabled:true}})
        })
    </script>
</body>
</html>

thomask commented 9 years ago

Awesome! Will review this ASAP

thomask commented 9 years ago

If I run Grunt and next run the demo, I get a non desirable result:

Did you run Grunt?

kurtextrem commented 9 years ago

Nope, compiled LESS by hand. Do you know what it could be? Maybe I forgot to check in some LESS code. Am 19.11.2015 11:56 vorm. schrieb "thomask" notifications@github.com:

If I run Grunt and next run the demo, I get a non desirable result:

[image: screen shot 2015-11-19 at 11 54 22] https://cloud.githubusercontent.com/assets/448755/11269009/89fb5a82-8eb4-11e5-81b8-fcd1a723f347.png

Did you run Grunt?

— Reply to this email directly or view it on GitHub https://github.com/Tapfiliate/tapatar/pull/7#issuecomment-158022434.

thomask commented 9 years ago

Hard to say. Are you able to run Grunt, and check the output on your end?

kurtextrem commented 9 years ago

Yes, I am. Just hold on a few days - currently low on time :-)

kurtextrem commented 9 years ago

Updated. Not sure what happened, but now it works :)

thomask commented 9 years ago

Hey, thanks for the update! Still running into some issue:

1) The initial size of the preview image:

2) Some sizing issues for certain images:

Problematic image: icon-light

Don't know whether this is a cropper or a CSS issue (or combined, seeing as the cropper probably gets its size from the current dimensions of the image). Perhaps there are some good defaults we could set on the cropper.

3) Duplicate preview

See how both the preview for the Gravatar source and the Local source now reference the same image.

4) Original image

Once you have cropped and hit save, but decide to reopen the plugin again, there is no way to get the original image back. A reset button or something similar would be nice

Normally I would have loved to dive into these issue, but got no time unfortunately at the moment. Would be awesome if you could have a look at these issue, provided you got some time to spare :-)

kurtextrem commented 9 years ago

1) Seen it. I have changed the css, so it doesn't upscale tiny images. That way users see the actual output.

2) Cropper issue. Didn't dig too deep into the options though.

3) Will look into it :)

4) I think the best idea is to leave cropper open (or re-init it on the original image). Will look into it.

thomask commented 9 years ago

Great!

I reckon it would be best to always keep the original image data around. That way you keep the most flexibility.

kurtextrem commented 9 years ago

I somehow can't reproduce 3).

I've fixed 1) (and 2) at the same time).

Tapfiliate / tapatar

Add crop(per) support #7