I am using shotstack api and loving it.
Used ImageAsset and its working fine. I am using drag and drop interface to build json data for the api but how can i adjust the width and height for the image to be displayed in the final video exactly according to the interface.
Interface Image:
Rendered Video Image:
I know there is a scale element for the image, for the above video i have set it to 0.6 but the question is if i go with that scale option then how can i calculate it?
Hi mr_amdev,
At this point we do not allow for freehand changing of width and height of image assets, which appears what you are looking to achieve. This essentially squashes the image and removes the original aspect ratio. I have added it to the feature requests for a future release.
What you can do is crop the image. While this maintains the aspect ratio you can fix the width based on what you need. As an example for an image of 1000px in width you can cut the left and right side of the image using the crop property to have cut away 200px on the left and 200px on the right:
{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "image",
"src": "https://shotstack-assets.s3.amazonaws.com/images/waterfall.jpeg",
"crop": {
"left": 0.2,
"right": 0.2
}
},
"start": 0,
"length": 1
}
]
}
]
},
"output": {
"format": "jpg",
"size": {
"width": 800,
"height": 667
}
}
}
The crop property uses a ratio relative to the original width and height of the image asset. If you want to use pixels you’ll need a function that will convert those pixels to a ratio similar to the following:
const convertPixelsToDecimals = (target, original) => {
let percentage = 1 - ((original - target) / original);
return Math.round(percentage * 1000) / 1000;
}
You would be able to get the original asset dimensions using the media inspector API by calling your image or video asset using the following url:
https://api.shotstack.io/edit/v1/probe/https%3A%2F%2Fshotstack-assets.s3.amazonaws.com%2Fimages%2Fwaterfall.jpeg
Just make sure to encode the URL you want to inspect.
This will give you something like the following (truncated a bit for readability):
{
"success": true,
"message": "ok",
"response": {
"metadata": {
"streams": [
{
"codec_name": "mjpeg",
"codec_long_name": "Motion JPEG",
"profile": "Progressive",
"width": 1000,
"height": 667,
"coded_width": 1000,
"coded_height": 667,
"display_aspect_ratio": "1000:667",
"pix_fmt": "yuvj420p",
"bits_per_raw_sample": "8",
}
],
"format": {
"filename": "https://shotstack-assets.s3.amazonaws.com/images/waterfall.jpeg",
"format_name": "image2",
"duration": "0.040000",
"size": "306648",
"bit_rate": "61329600"
}
}
}
}
@dazzatron Hi, Thanks for your message.
Actually for i cannot crop the image as from my frontend i will be using a full image and user expect it to be the same in the video.
Thus i 'll wait for the width and height availability.
Although i have a little confusion in the following function can you please elaborate a little bit that will help me to understand the parameters involved?
const convertPixelsToDecimals = (target, original) => {
let percentage = 1 - ((original - target) / original);
return Math.round(percentage * 1000) / 1000;
}
and please tell me a little more about the following url. what should i put in {{ENV}} and it says forbidden.
https://api.shotstack.io/edit/{{ENV}}/probe/https%3A%2F%2Fshotstack-assets.s3.amazonaws.com%2Fimages%2Fwaterfall.jpeg
and one more thing is there anything i do using the Scale option, can i somehow calculate it according to the width and height of the image?
That function converts the pixels you want from the original amount of pixels in your image to a ratio you can use for the crop and scale property.
An example would be an image of 1000px in width, but you want it change it to 800 pixels (a reduction of 200px). That function would calculate the ratio as follows:
percentage = 1 - ((1000 - 800) / 1000) = 0.8
Which is the exact ratio you need to reduce the width of your image by 200px.
Try the following url: https://api.shotstack.io/edit/v1/probe/https%3A%2F%2Fshotstack-assets.s3.amazonaws.com%2Fimages%2Fwaterfall.jpeg
@MR_AMDEV - what is the reason you want users to be able to distort the image? The scale feature is set to scale both axis at the same time so that images and videos can not be distorted out of shape.
You can use our HTML asset to create blocks of solid color and set the width and height of these how you want, useful for creating backgrounds for text to sit on etc… but for images we deliberately avoided allowing users to distort the shape/aspect ratio of an image.
@Jeff.S Hi, Thank you.
Actually i am building a video editor/maker and i know it is good to scale images using their aspect ratio.
But sometimes users want to resize the image with their desired width and height.
Thus, this feature is important for people that really wants to increase the width of the image only or just want to resize the image.
