用canvas海报添加文字
canvas给海报添加文件
·
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>
<body>
<canvas id="tutorial" width="1240" height="2208"></canvas>
</body>
<script>
var canvas = document.getElementById('tutorial');
ctx = canvas.getContext("2d");
var img = new Image();
// 需要添加文字的图片
img.src = "./1.jpg";
// 等待图片加载完成
img.onload = function(){
// 将图片添加到canvas
ctx.drawImage(img, 0, 0, 1240, 2208)
// 设置字体
ctx.font = "73px 微软雅黑 bolder"
// 设置字体颜色
ctx.fillStyle = "#955f17"
ctx.textAlign = "center"
// 添加文字和位置
ctx.fillText("微信名", 621, 1050);
// 导出为图片
let url = canvas.toDataURL("image/jpeg")
const a = document.createElement('a');
const image = document.createElement('img');
image.onload = () => {
a.href = getImageDataURL(image)
a.click()
}
image.src = url
}
</script>
</html>
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)