Canvas draws a picture without a suffix

for example, the address is this
http://q1.qlogo.cn/g?b=qq&nk=...

I want to use the drawImage () method to draw this picture, how to achieve it? Js, can you convert this into base64? Or can it be converted to a format like 1.jpg with a suffix?

Server cdn html5

Jul.15,2022

Scheme 1: canvas.toDataURL ()

< html >
< head >

<meta charset="utf-8">
<title>Page Title</title>
<style>
    canavas{
        width: 200px;
        height: 200px;
    }
</style>

< / head >
< body >
< div id= "box" > < / div >

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var dataURL = c.toDataURL();//base64
console.log(dataURL);

< / script >
< / body >
< / html >

scenario 2: FileReader method
getBase64 ("https://z649319834.github.io/Learn_Example/video_track/webvtt.jpg")

function getBase64(imgUrl) {
    window.URL = window.URL || window.webkitURL;
    var xhr = new XMLHttpRequest();
    xhr.open("get", imgUrl, true);
    xhr.responseType = "blob";
    xhr.onload = function () {
        if (this.status == 200) {
            var blob = this.response;
            console.log("blob", blob)
            let oFileReader = new FileReader();
            oFileReader.onloadend = function (e) {
                let base64 = e.target.result;
                console.log(base64)
            };
            oFileReader.readAsDataURL(blob);
        }
    }
    xhr.send();
}

Previous: If you query all the data after the horizontal sub-table

Next: How to remove the string outside the regular