javascript - 有没有办法在不使用 React 或 Vue 的情况下使用裁剪框在 JavaScript 中裁剪视频？

Question

我尝试使用cropper.js 裁剪视频，但据我了解这是不可能的，并且仅适用于照片。我到处寻找资源来做到这一点，但我找不到任何东西。如果你不知道我在说什么，我想要这样的 https://codesandbox.io/s/react-easy-crop-for-videos-lfhme但使用 JavaScript 而不是 React。我不想切换到前端框架的原因是因为我使用 Django 作为我的后端，并且不习惯切换到 API 以及使用 React 或 Vue，因为我对我的项目非常了解。如果可能，我还想避免使用混合架构。如果有人知道任何库或存储库，我可以查看可能对我有帮助的信息，我们将不胜感激。

以防我可以在cropper.js 中使用视频，这是我的源代码。

    // 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.com/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'

          });
        });
    });

Answer 1

您没有详细解释您的用例，但如果您只想使用一些已知的纵横比选项裁剪视频，您可以使用普通 HTML、CSS 和 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%);
}

纵横比始终是高度除以宽度 * 100%。

然后你可以应用你想要的类，例如:

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}`);
}

这是 example fiddle .