将HTML5画布上传为blob

<canvas id="myCanvas" width="300" height="150"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
ctx.lineTo(300, 300);
ctx.lineTo(0, 300);
ctx.closePath();

ctx.fillStyle = 'rgb(200, 100, 100)';
ctx.fill();

const canvas = document.getElementById('myCanvas');
const imageData = canvas.toDataURL('image/png');
const blob = await fetch(imageData).then(response => response.blob());

const file = new File([blob], 'image.png', { type: 'image/png' });

const xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('X-Filename', file.name);
xhr.send(file);