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?
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?
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();
}