search

Vanthink-UED / vue-core-image-upload

a vue plugin for image to crop and upload
http://vanthink-ued.github.io/vue-core-image-upload/index.html
1.35k stars 207 forks source link

Resizing and cropping on same image? #64

Open choiRyan opened 7 years ago

choiRyan commented 7 years ago

Is it possible to resize and crop on the same image?

I can see how it might get awkward (Both at once? resize then crop? Or crop then resize?)

Currently, when I use both options (Chrome 58, Mac) I can resize the image, but two rows of OK/Cancel buttons are visible (shown below). The view closes when I press either OK button.

screen shot 2017-05-09 at 6 52 09 pm

Also there's a console.log in resize-bar.vue:95 in the latest release :)

JackPu commented 7 years ago

This is a bug. And we do not support crop and resize image together. And do you have any good suggestion? And this bug will be fixed soon.

choiRyan commented 7 years ago

Thanks for the quick response!

I think existing implementations of resize+crop have both going on at once. For some [jQuery] examples, here's Cropper, Cropbox, and a tutorial I found. I don't know how this plays with max-width and max-height in their current states. Maybe the image could be resized accordingly after crop/resizing, if the new image's dimensions exceed those values.

Some questions related to crop/resizing (on client):

  1. Is there any way I can access the image data url before uploading, but after cropping or resizing? It could bypass this problem as I could just resize the image programmatically after cropping.
  2. I'm not getting an imagechanged event when selecting an image with crop="local" with is-xhr=false
  3. Is image compression for jpeg only? In the demo page, this test png went from 180 to 242KB
  4. Do crop/resize work with animated gifs? Gifs aren't accepted in the demo.
  5. When max-file-size is set, shouldn't this check occur after resizing/cropping? Assuming a max-file-size of 3MB, someone could select a 6MB image, then crop/resize it client-side to <3MB, which would be OK to upload. (Or notify the user that the cropped/resized image is too large)
JackPu commented 7 years ago

Thanks a lot 😀. I think the max-width allow you to limit your image size if you crop one. For example when you crop an image but the crop area's width may be 800px and if you set max-width=500, finally the image's width should be 500px.

Unluckily 😭, Gif doesn't support the crop.

when you use imagechanged event props, you could receive a param function the function when you bind. And the param is an object which is an array of files object. And then you can get the data and show the image. You can view the example code here: http://jsfiddle.net/yjgcc6v8/3/

In fact, PNG compress algorithm is complex via canvas, but it should be a bug. I'll fix it together.

I agree with you about the support of resizing and cropping an image together.

My English is not good If you want to talk more you can add me Facebook Messager here: http://vanthink-ued.github.io/vue-core-image-upload/index.html#/en/others

choiRyan commented 7 years ago

Oh if that's how max-width works that's great, I can make do with that and imagechanged, then, but does the imagechanged event get sent if is-xhr="false"? When using is-xhr="false", only the imageuploading event is sent.

Yeah, working with gifs is rather hard... No worries there.

Thanks for all the work :)