使用 javascript 将 base64 编码的字符串写为 Image答案

【问题标题】：Write base64 encoded string as Image with javascript使用 javascript 将 base64 编码的字符串写为 Image
【发布时间】：2020-08-02 16:16:44
【问题描述】：

我正在使用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 here。如果我放置图像路径它可以工作，但如果我直接传递 base64 字符串则不起作用。 Here我发现它也支持base64字符串以及URL。这就是它在控制台中的样子提前致谢。

【问题讨论】：

标签： javascript jquery ffmpeg web-worker html2canvas

【解决方案1】：

我修复了，只是更改了一行代码。

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

在此，我只是附加了一个数据 URL，并将图像类型从 JPEG 更改为 png 并且它起作用了。

【讨论】：