将文字转成图片上传
需求:在博客中常见封面图,如果没有合适的图片一般就是标题转成封面图
// 标题转图片
const convertTitleToImage = async () => {
if (!store.formData.title) {
ElMessage.warning('请输入商品标题');
return;
}
// 创建canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
canvas.width = 400;
canvas.height = 200;
// 设置背景色
ctx.fillStyle = '#015e88';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 设置文字样式
ctx.font = 'bold 30px Arial';
ctx.fillStyle = 'white';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// 处理文字换行
const maxWidth = canvas.width - 80; // 两边各留40px
const words = store.formData.title.split('');
let line = '';
const lines = [];
for (let i = 0; i < words.length; i++) {
const testLine = line + words[i];
const metrics = ctx.measureText(testLine);
if (metrics.width > maxWidth && i > 0) {
lines.push(line);
line = words[i];
} else {
line = testLine;
}
}
lines.push(line);
// 绘制文字(居中显示)
const lineHeight = 50;
const totalHeight = lines.length * lineHeight;
let startY = (canvas.height - totalHeight) / 2 + lineHeight / 2;
for (let i = 0; i < lines.length; i++) {
ctx.fillText(lines[i], canvas.width / 2, startY + i * lineHeight);
}
// 将画布转换为图片并上传
try {
canvas.toBlob(async (blob) => {
const filename = `${Date.now()}.png`;
const file = new File([blob], filename, { type: 'image/png' });
const formDataObj = new FormData();
formDataObj.append('file', file);
try {
const res = await api.weblogUploadAPI(formDataObj);
if (res.status === 200) {
ElMessage.success('标题图片生成并上传成功');
// 如果需要将图片地址保存到表单中,可以在这里处理
store.formData.cover = res.data.data; // 假设有返回图片地址
} else {
ElMessage.error(res.data.message || '上传失败');
}
} catch (error) {
ElMessage.error(error.response.data.message || '上传失败');
}
}, 'image/png');
} catch (error) {
ElMessage.error('图片生成失败');
}
}
上一篇
linux设置开机自动执行的命令
下一篇
EJS模板引擎助力SSR项目