canvas保存成File

canvas有两个方法 .toBlob() 和 .toDataURL() 可以使用。

canvas.toBlob()

canvas 转换成 File 的步骤是 canvas => Blob => File

canvas.toBlob(function(blob:any) {

    let fileName = 'cover.png';
    let file = new File([blob], fileName, { type: blob.type });
    
    const formFileData = new FormData();
    formFileData.append('file', file);

});

canvas.toDataURL()

canvas 转换成 File 的步骤是 canvas => uint8Array => File

let base64Data  = canvas.toDataURL(); // 默认是png

// atob() 如果传入字符串不是有效的 base64 字符串，比如其长度不是 4 的倍数，则抛出DOMException。
let binaryData = atob(base64Data.split(',')[1]); 
let uint8Array = new Uint8Array(binaryData.length);
for (var i = 0; i < binaryData.length; i++) {
    uint8Array[i] = binaryData.charCodeAt(i);
}

let fileName = 'cover.png';
let file = new File([uint8Array], fileName, { type: 'image/png' });

const formFileData = new FormData();
formFileData.append('file', file);

如果是想把html保存成图片可以使用 html2canvas

连接地址 html2canvas。

html2canvas(document.body).then(function(canvas) {
    // canvas 的操作 TODO...
})

注意: html标签元素必须是显示的。