Записать строку в кодировке base64 как Image с javascript - PullRequest
Новая
       33

Записать строку в кодировке base64 как Image с javascript

2 голосов
/ 20 апреля 2020

Я использую FFmpeg и html2canvus и пытаюсь создать видео в формате mp4 со скриншотами, снятыми со слайдера.

вот моя рабочая инициализация 

const worker = createWorker({
    //logger: ({ message }) => console.log(message),
    progress: (p) => console.log(p),
});

Затем я нажимаю на скриншоты и вставляю в видео 

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

У меня настроен codepen здесь . Это работает, если я помещаю путь к изображению, но не работает, если я напрямую передаю строку base64. Здесь Я обнаружил, что он также поддерживает строку base64 и URL. Вот так это выглядит в консоли enter image description here Заранее спасибо.

1 Ответ

0 голосов
/ 21 апреля 2020

Я исправил это, только что изменил строку кода. 

imgData = `data:image/png;base64,`+canvas.toDataURL('image/png', 1.0).split('base64,')[1];

В этом я просто добавляю URL данных и меняю тип изображения с JPEG на png, и это работает.

...