В Remotion опция обрезки изображения не работает. ⇐ Javascript

[Anonymous]

Я пытаюсь создать видео с помощью библиотеки remotion.
Я использовал следующие два изображения




Я обрезал верхний вариант изображения и поместил его после другого по вертикали. Пожалуйста, проверьте следующий снимок экрана, который является ожидаемым результатом.


Но как только я создаю видео, изображения не обрезаются и отображается все изображение. пожалуйста, проверьте следующий снимок экрана, который является текущим результатом и не обрезал изображение.


Я заметил, что та же проблема есть и в этом приложении.
https://video.designcombo.dev/
Я использую следующий код.

Код: Выделить всё

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

Будем очень признательны за любую помощь.

Подробнее здесь: https://stackoverflow.com/questions/797 ... ot-working