1. 用 Canvas 生成图片

const getQrCode = () => {
    const drp = 2
    const width = 290.5 * drp
    const height = (width * 462) / 290.5
    const c = document.getElementById('myCanvas')
    const ctx = c.getContext('2d')
    ctx.fillStyle = '#fff'
    ctx.fillRect(0, 0, width, height)
    return c.toDataURL('image/jpeg')
}

2. 将 dataURL 转成 Blob

const dataURItoBlob = dataURI => {
    var byteString
    if (dataURI.split(',')[0].indexOf('base64') >= 0) byteString = atob(dataURI.split(',')[1])
    else byteString = unescape(dataURI.split(',')[1])
    var mimeString = dataURI
        .split(',')[0]
        .split(':')[1]
        .split(';')[0]
    var ia = new Uint8Array(byteString.length)
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i)
    }
    return new Blob([ia], { type: mimeString, name: '123.jpg' })
}

3. 上传到阿里云

const uploadBase = async files => {
    var oMyForm = new FormData()
    try {
        const name = files.name
        oMyForm.append('name', name)
        oMyForm.append('file', files)
        // 其他参数省略
        const { Status, message } = await api.fetch(apiUrl, oMyForm)
        if (Status === 'Ok') return Promise.resolve(url)
        return Promise.reject(message || '上传失败')
    } catch (error) {
        return Promise.reject(error.toString())
    }
}

4. 完整调用

(async () => {
    const dataUri = getQrCode()
    let url
    try {
        url = await uploadBase(dataURItoBlob(dataUri))
    } catch (error) {
        url = ''
    }
    console.log(url)
})()