canvas生成时间戳图片

generateTimeStampEverySec(){
var canvas = document.createElement("canvas");
var img = new Image();
img.src="../../../../assets/img/xxxx.png" //设置图片基底
// 获取绘画上下文
let ctx = canvas.getContext("2d");
//设置画布宽高与图片宽高
canvas.width = 130;
canvas.height = 17;
ctx.fillStyle = 'black'; // 设置文字颜色
ctx.font="12px Arial"; // 设置文字大小和字体
ctx.fillText(new SimpleDateFormat().format("yyyy-MM-dd hh:mm:ss"),10,10);
//绘制图片
ctx.drawImage(img, 0, 0, 400, 400);
//图片展示的 data URI
var dataUrl = canvas.toDataURL('image/png'); //将图片转化为base64(dataUrl)
// 生成png时默认是透明的背景,但是生成jpeg的时候生成的默认是黑色的
console.log(dataUrl)
}

posted @ 2021-06-03 13:18  gsfs  阅读(69)  评论(0编辑  收藏  举报