Canvas toBlob
HTML
<canvas id="canvas" width="100" height="100"></canvas>
JavaScript
function test() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = 'rgba(255, 255, 0, .5)';
context.fillRect(0, 0, 100, 100);
canvas.toBlob(function(blob) {
// alert(blob.type);
const file = new File([blob], 'image.png')
console.log(file)
}, 'image/wbmp');
}
window.setTimeout(test);