I am using FFmpeg
and html2canvus
and trying to create an mp4 video with the screenshots taken from a slider.
here is my worker initialization
const worker = createWorker({
//logger: ({ message }) => console.log(message),
progress: (p) => console.log(p),
});
Then in click, I take the screenshots and putting into the video
const image2video = async () => {
displayLoader();
var zip = new JSZip();
let selectedbanners = $(".selected_templates:checked");
await worker.load();
let promise = new Promise((resolve, reject) => {
let Processed = 0;
selectedbanners.each(async function () {
var dataIndex = $(this).data('index');
let ad = adTemplates[dataIndex];
var innercounter = 0;
$(`.template-container-${ad.name}`).each(async function () {
var imgData;
await html2canvas($(`.template-container-${ad.name}`)[innercounter], {allowTaint: true, width: ad.width, height: ad.height}).then(canvas => {
imgData = canvas.toDataURL('image/jpeg', 1.0).split('base64,')[1];
//await worker.write(`tmp.${ad.name}.${innercounter}.png`, imgData);
});
await worker.write(`tmp.${ad.name}.${innercounter}.png`, imgData);
//await worker.write(`tmp.0.png`, `static/triangle/tmp.0.png`); This is working
});
});
});
};
I have setup a codepen here . It works if I put the image path but doesn't work if I directly pass the base64 string. Here I found that it also supports the base64 string as well as the URL. This is how it looks in console Thanks in advance.
I fixed that just changed a line of code.
imgData = `data:image/png;base64,`+canvas.toDataURL('image/png', 1.0).split('base64,')[1];
In this, I just append a data URL and changed the image type from JPEG to png and it worked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.