将文字转成图片上传

需求:在博客中常见封面图,如果没有合适的图片一般就是标题转成封面图

                                // 标题转图片
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项目

史努比博客