canvas转图片上传

269 阅读1分钟

1.获取canvas的dataUrl,并转为base64

// canvas为你自己的canvas元素
const base64Str = canvas.toDataURL().split(',')[1]

2.将base64字符转为blob二进制数据

    const byteCharacters = atob(base64Str);
    // 创建一个8位无符号整数值的数组,其长度等于字符串长度
    const byteArrays = new Uint8Array(byteCharacters.length);
    // 将每个字符的charCodeAt转换为Uint8Array的元素
    for (let i = 0; i < byteCharacters.length; i++) {
        byteArrays[i] = byteCharacters.charCodeAt(i);
    }
    // 创建Blob对象
    const blob = new Blob([byteArrays], {type: 'image/png'});

3.添加进formData,提交

    const option = new FormData();
    // 注意,这里可以声明文件名为xxx.png/jpg什么的,这样方便加载图片
    option.append('image', blob, +new Date() + '.png');
    const res = await uoloadImgApi(option)