canvas安裝有時會出現(xiàn)無法更新狀態(tài) 可以設(shè)置npm配置canvas鏡像
npm?install?canvas?--canvas_binary_host_mirror=https://npm.taobao.org/mirrors/node-canvas-prebuilt/?
生成圖片:
const fs = require('fs');
const path = require('path');
const { loadImage, createCanvas} = require('canvas');
let generateClassImage =async (name,? icon , back?, filePath)=> {
? ? let image =await loadImage(back); //加載背景圖
? ? let {width, height} = image; //獲取背景圖寬高
? ? let cv = createCanvas(width, height); //創(chuàng)建cv
? ? let ctx = cv.getContext('2d');
? ? ctx.drawImage(image, 0, 0); //將背景圖寫入畫布
? ? ctx.font ='30px Impact';
? ? ctx.textAlign ='center';
? ? ctx.fillText(name, 160, 120); //編輯名字
? ? ctx.stroke();
? ? let iconImage =await loadImage(icon?);??//加載icon圖
? ? ctx.drawImage(iconImage, 38, 732, 236, 236); //將icon圖 寫入畫布
? ? let buf = cv.toDataURL();
? ? let base64Data = buf.replace(/^data:image\/\w+;base64,/, ""); //生成圖片格式
? ? let dataBuffer = Buffer.from(base64Data, 'base64');?
????fs.writeFileSync(filePath, dataBuffer); //保存圖片
};
圖片翻轉(zhuǎn) 讀取成base64數(shù)據(jù)
const fs =require("fs");
const util =require("util");
const imageData =await util.promisify(fs.readFileSync(fileUrl));/
const imageBase64 = imageData.toString("base64");
const imagePrefix ="data:image/png;base64,";
console.log(imagePrefix + imageBase64);