In Remotion funktioniert die Option „Bild zuschneiden“ nicht ⇐ JavaScript

[Anonymous]

Ich versuche, ein Video mithilfe der Remotion-Bibliothek zu erstellen.
Ich habe die folgenden zwei Bilder verwendet




Ich habe die obere Option des Bildes zugeschnitten und sie nacheinander vertikal platziert. Bitte überprüfen Sie den folgenden Screenshot, der die erwartete Ausgabe darstellt.


Aber sobald ich das Video erstelle, werden die Bilder nicht zugeschnitten und es wird das gesamte Bild angezeigt. Bitte überprüfen Sie den folgenden Screenshot, der die aktuelle Ausgabe darstellt und das Bild nicht zugeschnitten hat.


Mir ist aufgefallen, dass das gleiche Problem auch in dieser App auftritt.
https://video.designcombo.dev/
Ich verwende den folgenden Code.

Code: Select all

import { renderMediaOnLambda } from '@remotion/lambda/client';

const jsonData = {
"design": {
"id": "UmNk7eWwdkH37Qxy",
"size": {
"width": 1080,
"height": 1920
},
"fps": 30,
"tracks": [
{
"id": "SSx719iOIirwB-aa5ESoG",
"accepts": [
"text",
"image",
"video",
"audio",
"composition",
"caption",
"template",
"customTrack",
"customTrack2",
"illustration",
"custom",
"main",
"shape",
"linealAudioBars",
"radialAudioBars",
"progressFrame",
"progressBar",
"rect",
"progressSquare"
],
"type": "audio",
"items": [
"qAwgySht9x1V1pnr"
],
"magnetic": false,
"static": false
},
{
"id": "Mlw-cxwDNpD-u0Z08IqyW",
"accepts": [
"text",
"image",
"video",
"audio",
"composition",
"caption",
"template",
"customTrack",
"customTrack2",
"illustration",
"custom",
"main",
"shape",
"linealAudioBars",
"radialAudioBars",
"progressFrame",
"progressBar",
"rect",
"progressSquare"
],
"type": "image",
"items": [
"m8EJrAJsCnrBnGYo"
],
"magnetic": false,
"static": false
},
{
"id": "7ZjQ3_osOfYs4xSB1nroU",
"accepts": [
"text",
"image",
"video",
"audio",
"composition",
"caption",
"template",
"customTrack",
"customTrack2",
"illustration",
"custom",
"main",
"shape",
"linealAudioBars",
"radialAudioBars",
"progressFrame",
"progressBar",
"rect",
"progressSquare"
],
"type": "image",
"items": [
"HaNeBaS5lOVIFwFK"
],
"magnetic": false,
"static": false
}
],
"trackItemIds": [
"HaNeBaS5lOVIFwFK",
"m8EJrAJsCnrBnGYo",
"qAwgySht9x1V1pnr"
],
"trackItemsMap": {
"HaNeBaS5lOVIFwFK": {
"id": "HaNeBaS5lOVIFwFK",
"type": "image",
"name": "image",
"display": {
"from": 0,
"to": 5000
},
"playbackRate": 1,
"details": {
"src": "https://ik.imagekit.io/wombo/images/img1.jpg",
"width": 1280,
"height": 853,
"opacity": 100,
"transform": "scale(0.84375)",
"border": "none",
"borderRadius": 0,
"boxShadow": {
"color": "#000000",
"x": 0,
"y": 0,
"blur": 0
},
"top": 113.99651720007375,
"left": 208.45281875000006,
"borderWidth": 0,
"borderColor": "#000000",
"blur": 0,
"brightness": 100,
"flipX":  false,
"flipY": false,
"rotate": "0deg",
"visibility": "visible",
"crop": {
"x": 84.2642857142857,
"y": 77.866567194206,
"width": 407.6642857142857,
"height": 604.8566255364807
}
},
"metadata": {
"previewUrl": "https://ik.imagekit.io/wombo/images/img1.jpg?tr=w-190"
},
"isMain": false
},
"m8EJrAJsCnrBnGYo": {
"id": "m8EJrAJsCnrBnGYo",
"type": "image",
"name": "image",
"display": {
"from": 0,
"to": 5000
},
"playbackRate": 1,
"details": {
"src": "https://ik.imagekit.io/wombo/images/img4.jpg",
"width": 1280,
"height": 1920,
"opacity": 100,
"transform": "scale(0.84375)",
"border": "none",
"borderRadius": 0,
"boxShadow": {
"color": "#000000",
"x": 0,
"y": 0,
"blur": 0
},
"top": "1022.48px",
"left": "424.206px",
"borderWidth": 0,
"borderColor": "#000000",
"blur": 0,
"brightness": 100,
"flipX": false,
"flipY": false,
"rotate": "0deg",
"visibility": "visible",
"crop": {
"x": 463.48265895953756,
"y": 142.8894230769231,
"width": 485.9971098265896,
"height": 914.9134615384615
}
},
"metadata": {
"previewUrl": "https://ik.imagekit.io/wombo/images/img4.jpg?tr=w-190"
},
"isMain": false
},
"qAwgySht9x1V1pnr": {
"id": "qAwgySht9x1V1pnr",
"name": "Dawn of change",
"type": "audio",
"display": {
"from": 0,
"to": 4966.666666666667
},
"trim": {
"from": 0,
"to": 4966.666666666667
},
"playbackRate": 1,
"details": {
"src": "https://cdn.designcombo.dev/audio/Dawn%20of%20change.mp3",
"volume": 100
},
"metadata": {
"author": "Roman Senyk"
},
"duration": 117242.833,
"isMain": false
}
},
"transitionIds": [],
"transitionsMap": {},
"scale": {
"index": 7,
"unit": 300,
"zoom": 0.0033333333333333335,
"segments": 5
},
"duration": 5000,
"activeIds": [
"HaNeBaS5lOVIFwFK"
],
"structure": [],
"background": {
"type": "color",
"value": "transparent"
}
},
"options": {
"fps": 30,
"size": {
"width": 1080,
"height": 1920
},
"format": "mp4"
}
};

const { renderId, bucketName } = await renderMediaOnLambda(
{ region       : "us-east-1"
, functionName : config.lambdaFunction
, serveUrl     : config.serverUrl
, composition  : composition
, inputProps   : jsonData
, codec        : "h264"
, audioCodec   : "mp3"
, audioBitrate : "1M"
, videoBitrate : "1M"
, outName:
{ bucketName : config.bucket
, key        : outputFileName
}
, imageFormat     : "jpeg"
, maxRetries      : 1
, framesPerLambda : 1000
, privacy         : "public"
});

Zuschneideaktion im Bild beim Generieren eines Videos über Remotion?

Jede Hilfe wäre sehr dankbar.