I was trying to crop videos with cropper.js, but from what I understand that it is impossible and only works for photos. I've looked everywhere for resources to do such, but I couldn't find anything. If you don't know what I am talking about I would like something like this but uses JavaScript instead of React. The reason I don't want to switch to a frontend framework is because I am using Django for my backend, and am not fortable with switching to APIs, and using React or Vue, since I am really far into my project. I also want to avoid using a hybrid architecture if possible. If anyone knows of any libraries or repositories I can check out that might help me that would be much appreciated.

Just in case I can use videos in cropper.js here is my source code.

    // file-box is the id of the div element that will store our cropping file preview
    const filebox = document.getElementById('file-box')
        // crop-btn is the id of button that will trigger the event of change original file with cropped file.
    const crop_btn = document.getElementById('crop-btn')
    // id_file is the id of the input tag where we will upload the file
    const input = document.getElementById('id_file')

    // When user uploads the file this event will get triggered
    input.addEventListener('change', ()=>{
      // Getting file file object from the input variable
      const img_data = input.files[0]
      // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
      // The new object URL represents the specified File object or Blob object.
      const url = URL.createObjectURL(img_data)

      // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
      filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
      // Storing that cropping view file in a variable
      const file = document.getElementById('file')

      // Displaying the file box
      document.getElementById('file-box').style.display = 'block'
      // Displaying the Crop buttton
      document.getElementById('crop-btn').style.display = 'block'
      // Hiding the Post button
      document.getElementById('confirm-btn').style.display = 'none'

      // Creating a croper object with the cropping view file
      // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
      // For more settings, check out their official documentation at 
      const cropper = new Cropper(file, {
      autoCropArea: 1,
      aspectRatio: 1/1,
      viewMode: 1,
      scalable: false,
      zoomable: false,
      movable: false,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      })

      // When crop button is clicked this event will get triggered
      crop_btn.addEventListener('click', ()=>{
        // This method coverts the selected cropped file on the cropper canvas into a blob object
        cropper.getCroppedCanvas().toBlob((blob)=>{

          // Gets the original file data
          let fileInputElement = document.getElementById('id_file');
          // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
          let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
          // Create a new container
          let container = new DataTransfer();
          // Add the cropped file file to the container
          container.items.add(file);
          // Replace the original file file with the new cropped file file
          fileInputElement.files = container.files;

          // Hide the cropper box
          document.getElementById('file-box').style.display = 'none'
          // Hide the crop button
          document.getElementById('crop-btn').style.display = 'none'
          // Display the Post button
          document.getElementById('confirm-btn').style.display = 'block'

          });
        });
    });

I was trying to crop videos with cropper.js, but from what I understand that it is impossible and only works for photos. I've looked everywhere for resources to do such, but I couldn't find anything. If you don't know what I am talking about I would like something like this https://codesandbox.io/s/react-easy-crop-for-videos-lfhme but uses JavaScript instead of React. The reason I don't want to switch to a frontend framework is because I am using Django for my backend, and am not fortable with switching to APIs, and using React or Vue, since I am really far into my project. I also want to avoid using a hybrid architecture if possible. If anyone knows of any libraries or repositories I can check out that might help me that would be much appreciated.

Just in case I can use videos in cropper.js here is my source code.

    // file-box is the id of the div element that will store our cropping file preview
    const filebox = document.getElementById('file-box')
        // crop-btn is the id of button that will trigger the event of change original file with cropped file.
    const crop_btn = document.getElementById('crop-btn')
    // id_file is the id of the input tag where we will upload the file
    const input = document.getElementById('id_file')

    // When user uploads the file this event will get triggered
    input.addEventListener('change', ()=>{
      // Getting file file object from the input variable
      const img_data = input.files[0]
      // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
      // The new object URL represents the specified File object or Blob object.
      const url = URL.createObjectURL(img_data)

      // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
      filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
      // Storing that cropping view file in a variable
      const file = document.getElementById('file')

      // Displaying the file box
      document.getElementById('file-box').style.display = 'block'
      // Displaying the Crop buttton
      document.getElementById('crop-btn').style.display = 'block'
      // Hiding the Post button
      document.getElementById('confirm-btn').style.display = 'none'

      // Creating a croper object with the cropping view file
      // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
      // For more settings, check out their official documentation at https://github./fengyuanchen/cropperjs
      const cropper = new Cropper(file, {
      autoCropArea: 1,
      aspectRatio: 1/1,
      viewMode: 1,
      scalable: false,
      zoomable: false,
      movable: false,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      })

      // When crop button is clicked this event will get triggered
      crop_btn.addEventListener('click', ()=>{
        // This method coverts the selected cropped file on the cropper canvas into a blob object
        cropper.getCroppedCanvas().toBlob((blob)=>{

          // Gets the original file data
          let fileInputElement = document.getElementById('id_file');
          // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
          let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
          // Create a new container
          let container = new DataTransfer();
          // Add the cropped file file to the container
          container.items.add(file);
          // Replace the original file file with the new cropped file file
          fileInputElement.files = container.files;

          // Hide the cropper box
          document.getElementById('file-box').style.display = 'none'
          // Hide the crop button
          document.getElementById('crop-btn').style.display = 'none'
          // Display the Post button
          document.getElementById('confirm-btn').style.display = 'block'

          });
        });
    });

• javascript
• reactjs
• puter-vision

Share Improve this question Follow asked Mar 2, 2022 at 5:50 Anthony HumphreysAnthony Humphreys 13522 silver badges2222 bronze badges 3

• 1 What do you mean by cropping? Do you want to only display part of the video, do you want to display a crop box, and/or do you want to create a new file of the cropped video? You may get more helpful answers if you detail exactly what you want the user to see and how the page is supposed to interact with your server – Steve Commented Mar 7, 2022 at 18:07
• 1 I want to have a crop box where you can select what part of the video you would like to see and crop out everything that is not in the box,, and then display that cropped version of the video on to the screen. Just like this but with a video fengyuanchen.github.io/cropperjs . – Anthony Humphreys Commented Mar 8, 2022 at 4:25
• Have you tried fabric.js? fabricjs. Check thess examples: codepen.io/shkaper/pen/xXOgGq fabricjs./video-element. It seems to fit your needs. – José A. Zapata Commented Mar 11, 2022 at 4:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7 +50

You didn't explain your use case in much detail, but if you just want to crop videos with a few known aspect ratio options, you can do this pretty easily do this with vanilla HTML, CSS, and JavaScript.

HTML:

<div class="crop-container aspect-ratio-16x9">
   <video id="the-video" autoplay>
       <source src="https://vid.ly/5u4h3e?content=video" type="video/mp4">
   </video>
</div>

CSS:

.crop-container {
    overflow:hidden;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 0;
    position: relative;
}

.crop-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.aspect-ratio-16x9 {
  padding-top: calc(9 / 16 * 100%);
}

.aspect-ratio-4x3 {
  padding-top: calc(3 / 4 * 100%);
}

The aspect ratio is always the height divided by the width * 100%.

And then you can apply the the classes however you want, for example:

function switchAspectRatio(ratio) {
  const el = document.querySelector('.crop-container');
  
  // Remove any previous aspect ratios
  for (let i = el.classList.length - 1; i >= 0; i--) {
      const className = el.classList[i];
      if (className.startsWith('aspect-ratio-')) {
          el.classList.remove(className);
      }
  }
  
  // Add the new one
  el.classList.add(`aspect-ratio-${ratio}`);
}

Here's an example fiddle.