使用javascript将base64编码字符串写入图像
我正在使用使用javascript将base64编码字符串写入图像,javascript,jquery,ffmpeg,web-worker,html2canvas,Javascript,Jquery,Ffmpeg,Web Worker,Html2canvas,我正在使用FFmpeg和html2canvus并尝试使用从滑块上截取的屏幕截图创建mp4视频 这是我的工人初始化 const worker = createWorker({ //logger: ({ message }) => console.log(message), progress: (p) => console.log(p), }); 然后在点击中,我将截图放到视频中 const image2video = async () => { disp
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
});
});
});
};
我已经安装了一个。如果我放置映像路径,它可以工作,但是如果我直接传递base64字符串,它就不工作。我发现它还支持base64字符串和URL。
这是它在控制台中的外观
提前谢谢。我修复了刚刚更改了一行代码的问题
imgData = `data:image/png;base64,`+canvas.toDataURL('image/png', 1.0).split('base64,')[1];
在本文中,我只是添加了一个数据URL,并将图像类型从JPEG更改为png,结果成功了