fengyuanchen / cropper

⚠️ [Deprecated] No longer maintained, please use https://github.com/fengyuanchen/jquery-cropper
MIT License
7.75k stars 1.74k forks source link

manually set width and height on input tag #1047

Closed richdenis86 closed 5 years ago

richdenis86 commented 5 years ago

Screenshot_1

How to do that when entering the size of the height or width, set selection manually in the box or by pressed enter something like this

oskvortsov commented 5 years ago

@richdenis86 Hello. Today I did the same task, I used the method "setData"

richdenis86 commented 5 years ago

@richdenis86 Hello. Today I did the same task, I used the method "setData"

I tried but I did not succeed, can you please explain how you did it? or show code snippet?

richdenis86 commented 5 years ago

<input type="text" class="form-control" onchange="setData()" data-method="setData" id="dataHeight" placeholder="height"> something, like this doesnt work :(

oskvortsov commented 5 years ago

@richdenis86

const setFieldValue = (name, event) => {
    const value = parseFloat(event.target.value);
    if (cropper() && !isNaN(value)) {
      cropper().setData({
        ...cropper().getData(),
        ...{ [name]: value }
      });
    }
  };

and view


<Input
      value={cropData.width}
       type="number"
       onChange={value => setFieldValue("width", value)}
 />```
richdenis86 commented 5 years ago

may be i don't understand or something wrong? it doesnt work, can you send me html files pls? its very important, richdenis86@gmail.com Screenshot_1

oskvortsov commented 5 years ago

@richdenis86 You can see cropper with input

richdenis86 commented 5 years ago

big thank you bro, but when i 'm transfer this code to the html page , getiing error Uncaught TypeError: $image.cropper is not a function, https://codepen.io/richdenis86/pen/LwZEOZ i installed it without npm

Screenshot_2

richdenis86 commented 5 years ago

solved,and finally its worked! thank you @oskvortsov !!! :)