Canvas截图转为Blob对象上传

说明： 部分代码由AI生成

Canvas如何截图

    const dataUrl = canvas.value.toDataURL('image/png');
    console.log(dataUrl)

如何转为Blob对象

function dataURLToBlob(dataURL) {
    var arr = dataURL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

完整的示例代码（Vue3）

<template>
    <div>
        <canvas ref="canvas" width="300" height="200"></canvas>
        <button @click="screenshotAndUpload">截图并上传</button>
    </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, computed } from "vue";
import router from "@/router";

const canvas = ref(null)

// dataUrl 转为 Blob 对象
function dataURLToBlob(dataURL) {
    var arr = dataURL.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

function screenshotAndUpload() {
    // 将Canvas内容转换为DataURL
    const dataUrl = canvas.value.toDataURL('image/png');
    console.log(dataUrl)

    const blob = dataURLToBlob(dataUrl)

    // 创建一个表单数据对象
    const formData = new FormData();
    formData.append('file', blob, 'canvas_screenshot.png');

    // 创建一个请求
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'images', true);

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            alert('图像已成功上传！');
        } else if (xhr.readyState === 4) {
            alert('图像上传失败！');
        }
    };

    // 发送请求
    xhr.send(formData);
}

onMounted(() => {
    const ctx = canvas.value.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);
})
</script>

问题（这个不重要）

Uniapp 做iOS Android原生开发，使用一个 html2canvas 的改版库，最后输出图片上传，基于手上现有的接口写了个demo实现