继上一篇博客使用的python，这里给出一个本地的html网页。保存文html文件双击打开即可使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字转图片</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.container {
display: flex;
flex-direction: row;
}
.options {
flex: 1;
padding: 20px;
}
.preview {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.image-container {
position: relative;
width: 512px;
height: 512px;
border: 2px solid #000;
overflow: hidden;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<div class="options">
<el-form :model="form" label-width="80px">
<el-form-item label="文字内容">
<el-input v-model="form.text" @input="generateImage"></el-input>
</el-form-item>
<el-form-item label="文字字体">
<el-select v-model="form.fontFamily" @change="generateImage">
<el-option v-for="font in fonts" :key="font" :label="font" :value="font"></el-option>
</el-select>
</el-form-item>
<el-form-item label="文字字重">
<el-select v-model="form.fontWeight" @change="generateImage">
<el-option v-for="weight in weights" :key="weight" :label="weight" :value="weight"></el-option>
</el-select>
</el-form-item>
<el-form-item label="文字大小">
<el-slider v-model="form.fontSize" :min="20" :max="512" show-input @input="generateImage"></el-slider>
</el-form-item>
<el-form-item label="旋转角度">
<el-slider v-model="form.rotate" :min="0" :max="360" show-input @input="generateImage"></el-slider>
</el-form-item>
<el-form-item label="文字颜色">
<el-color-picker v-model="form.textColor" @change="generateImage"></el-color-picker>
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="form.backgroundColor" @change="generateImage"></el-color-picker>
</el-form-item>
</el-form>
</div>
<div class="preview">
<div class="image-container">
<canvas id="canvas" width="512" height="512"></canvas>
<div class="draggable-text" :style="{ fontSize: form.fontSize + 'px', color: form.textColor }" ref="draggableText">{{ form.text }}</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
form: {
text: '秋',
fontFamily: 'Arial',
fontWeight: 'normal',
fontSize: 80,
textColor: '#000000',
backgroundColor: '#ffffff',
rotate: 0
},
fonts: ['Arial', 'Verdana', 'Helvetica', 'Times New Roman', 'SimSun', 'SimHei', 'Microsoft YaHei', 'KaiTi'],
weights: ['normal', 'bold']
},
mounted() {
this.generateImage();
},
methods: {
generateImage() {
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const { text, fontFamily, fontWeight, fontSize, textColor, backgroundColor, rotate } = this.form;
// 清空画布
context.clearRect(0, 0, canvas.width, canvas.height);
// 设置背景色
context.fillStyle = backgroundColor;
context.fillRect(0, 0, canvas.width, canvas.height);
// 设置文字样式
context.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
context.fillStyle = textColor;
context.textAlign = 'center';
context.textBaseline = 'middle';
// 计算文字位置
const x = canvas.width / 2;
const y = canvas.height / 2;
// 绘制文字
context.translate(x, y);
context.rotate((rotate * Math.PI) / 180);
context.fillText(text, 0, 0);
// 恢复画布状态
context.rotate((-rotate * Math.PI) / 180);
context.translate(-x, -y);
// 预览图片
const preview = new Image();
preview.src = canvas.toDataURL();
preview.style.maxWidth = '100%';
preview.style.maxHeight = '100%';
const previewContainer = document.getElementById('preview-container');
previewContainer.innerHTML = '';
previewContainer.appendChild(preview);
}
}
});
</script>
</body>
</html>
参与讨论