有没有办法在不使用 React 或 Vue 的情况下使用裁剪框裁剪 JavaScript 中的视频?
Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?
我试图用 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'
});
});
});
你没有详细解释你的用例,但如果你只是想用一些已知的宽高比选项裁剪视频,你可以很容易地做到这一点用香草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。
我试图用 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'
});
});
});
你没有详细解释你的用例,但如果你只是想用一些已知的宽高比选项裁剪视频,你可以很容易地做到这一点用香草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。