canvasの画像データをblobに変換し、axiosでpost.する方法

トリミングした画像のアップロードで躓いていたので、自分へのメモとして書きました

Blobに変換

canvas.ts

const url: string = canvas.toDataURL("image/png");
const bin: string = atob(url.split(",")[1]);
const buffer: any = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) {
    buffer[i] = bin.charCodeAt(i);
}
const blob: Blob = new Blob([buffer.buffer], {type: "image/png"});

axiosでpost

axios.ts

const data = new FormData()
data.append("icon", blob, "image.png")
axios.post("url", data, {
    header: {
        "content-type": "multipart/form-data",
    }
})

参考にした記事

Canvasに描いた画像をpngなどの形式のBlobに変換する方法