canvas toDataURL 给我一个不正确的base64代码答案

【问题标题】：canvas toDataURL give me an uncorrect base64 codecanvas toDataURL 给我一个不正确的base64代码
【发布时间】：2021-12-05 22:10:10
【问题描述】：

我正在使用画布绘制基数为 64 的裁剪图像，但问题是我的代码在 Chrome 上运行，但它在 Firefox 上给了我一个空白图像

async function base64SquareCrop(imgbase64, size = 224) {
const img = document.createElement("img");
await img.setAttribute("src", imgbase64);

let width = img.width;
let height = img.height;
const min = Math.min(width, height);
const scale = size / min;
const scaledW = Math.ceil(width * scale);
const scaledH = Math.ceil(height * scale);
const dx = scaledW - size;
const dy = scaledH - size;
canvasImage.width = canvasImage.height = size;
const ctx_img = canvasImage.getContext("2d");
await ctx_img.drawImage(
    img,
    ~~(dx / 2) * -1,
    ~~(dy / 2) * -1,
    scaledW,
    scaledH
);
return canvasImage.toDataURL("image/png");
}

【问题讨论】：

你能给出其中一个数据 url 的开头吗？
const canvasImage = document.getElementById("canvasImage"); @ErickTOliveira
不是这样的。看看这个question。也许它会帮助你。
请您澄清一下@ErickTOliveira 缺少什么
我遇到的问题是 (await img.setAttribute("src", imgbase64);) not set image src on right way the bas64 is not completed and that are occur on Firefox

标签： javascript html

【解决方案1】：

base64 的标头可能是错误的。由于您没有发布发生该问题的 imgbase64 的值，因此我无法确定。

错误标题的示例是this question。

【讨论】：