canvas實現繪製圖片/字體轉base64

1. 繪製字體轉base64:  canvas繪製垂直和水平居中的文本字體，並轉換爲base64格式。

let width=160;
let height=90;
let x=0;
let y=0;
let font='要繪製的文本';
let fontSize=32;

let canvas = document.getElementById("canvas");
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext("2d");

ctx.fillStyle="#FFFFFF"; 
ctx.fillRect(x, y, width, height);  
ctx.fillStyle="#000000";
ctx.textAlign='center'
ctx.textBaseline='middle'
ctx.font=fontSize+'px sans-serif';
let w = ctx.measureText(font).width;  //文本的寬度
while(w > width) {  //當文本寬超出畫布寬時，縮小文本字體
    fontSize = fontSize - 2;
    ctx.font=fontSize+'px sans-serif';
    w = ctx.measureText(font).width;
}
ctx.fillText(font, width/2 , height/2 );
let dataUrl = canvas.toDataURL('image/png');  //canvas繪製字體轉base64
console.log(dataUrl) //結果：data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAABaCAYAAAA/xl1SAAADxklEQVR4Xu3dIXIqQRDG8YmMBoeL4RABDTdAhOiIKAQSKgUHwIQTEAQ3IJ4cAMkBkGgkqdnKUGFgN49X1PZ27z/mVbFku+frX2bZRby7w+FwcPyQgFACdwAUSp6ySQIABIJoAgAUjZ/iAMSAaAIAFI2f4gDEgGgCABSNn+IAxIBoAgAUjZ/iAMSAaAIAFI2f4gDEgGgCABSNn+IAxIBoAgAUjZ/iAMSAaAIAFI2f4gDEgGgCABSNn+IAxIBoAgAUjZ/iAMSAaAIAFI2f4gDEgGgCABSNn+IAxIBoAgAUjZ/iAMSAaAIAFI2f4gDEgGgCABSNn+IAxIBoAgAUjZ/iAMSAaAIAFI2f4gDEgGgCpQQ4Ho/dw8ODe3p6Ogt/s9m4Tqfj1ut1cuzl5cVNJhN3f39/9t79fu96vZ57fn52j4+PZ8e/vr5co9E4vj4ajdxgMLg4cF/37e3Nvb+/u0qlIooiz+KlAjifz123203y/fj4OAMY8PX7/eTYbrdL/vW4Yjge8XA4TM61Wq3OAAZ84Vh87jDkUOPz89O1Wi3newRgnn8COdQKO1Wz2XTtdjtB5XeteAf0qLbb7cmO5yG9vr66xWLh6vX6EaUHWa1Wk91yOp2eAAz1arXaCVyPazabHZH5c/ua/vXlcnlyLIdYClGiVDugTzzsODHAtNfTdi5/rnAsBpj2erwr/hYQ4yyEjhyaAOBPyGlosi7DWdB+75phjlmYAZiD9iKU+Gun+9fLadYOGF+24897ly7/ACyCjhx6AGAOIV9Rgkswl+AruNz+rQD8yfTam5P/uQlJ+8zoz8Ul+Pa4C3nGNGjh0Ylv+veD57TPc1kA025cspABsJBcbt9UGkBfKTwmCQ+ps96bBTDsaP6hd/wgOr7JCSsE4O1nXcgz/oUq/vrs0jcm8WOVLFThmxf/O5e+MQEg/2F1If9QytJU6W5CyjJYLesEoJZJGe0TgEYHq2VZANQyKaN9AtDoYLUsC4BaJmW0TwAaHayWZQFQy6SM9glAo4PVsiwAapmU0T4BaHSwWpYFQC2TMtonAI0OVsuyAKhlUkb7BKDRwWpZFgC1TMponwA0OlgtywKglkkZ7ROARgerZVkA1DIpo30C0OhgtSwLgFomZbRPABodrJZlAVDLpIz2CUCjg9WyLABqmZTRPgFodLBalgVALZMy2icAjQ5Wy7IAqGVSRvsEoNHBalkWALVMymifADQ6WC3LAqCWSRntE4BGB6tlWQDUMimjfQLQ6GC1LAuAWiZltE8AGh2slmUBUMukjPb5DUPOViB754WNAAAAAElFTkSuQmCC

2. 繪製圖片轉base64: 

let img = document.createElement('img');
img.src = './images/1.png';
img.onload =() =>{
    let canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    let ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);

    let dataURL = canvas.toDataURL("image/png"); //圖片轉base64格式
    console.log(dataURL)
}