Update cropperjs (reactjs) to use background video
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I need to be able to upload a video and use cropperjs on top of it. We will be doing some cropping on the video but I need to get a ui for the user to visually make it work so we can get the coordinates etc... so this bounty is to figure out how to make a video work with cropperjs (react lib) here is the cropperjs react version https://github.com/react-cropper/react-cropper

One param we need to expose from the original cropper lib is a fixed aspect ratio. youll notice on the original lib demo there is this feature built in so I hope we can expose it on your bounty demo

https://fengyuanchen.github.io/cropperjs/

as for the ui of the bounty. i followed some of this
https://fengyuanchen.github.io/cropperjs/ but simplified to just choosing a video, show the original with cropper on top. let us drag and resize the cropper area but fix it to an aspect ratio of (700 width x 1008 height) . after that is done we need a way to get the params of the crop.

The bounty has to be in react since that is the part we are stuck on. And it would be great if you can make your bounty work on repl.it so we can easily run it and test etc..

3 months ago
Tags
react-js

Crowdsource coding tasks.

1 Solution


you can use this.cropper.getCropBoxData(); or else check the below for the code.

Can you try this https://github.com/young666/video_cropper/blob/master/src/components/cropper/cropper.js

Do you mind setting a demo on repl.it ?
Qdev 4 months ago