如何正确使用rasterizeHtml.js的options参数？画布显示异常求助

核心问题分析 #

1. 参数格式错误：drawHTML的宽高选项需传入数字（像素值），而非带单位的字符串；早期代码参数顺序与API要求不匹配，导致配置未生效。
2. 画布尺寸混淆：未区分canvas的实际像素分辨率（canvas.width/canvas.height）和页面显示尺寸（canvas.style.width/canvas.style.height），引发内容拉伸变形。
3. Promise处理错误：drawHTML返回Promise对象，不能直接作为DOM元素调用appendChild，需在回调中处理渲染结果。

正确实现方案 #

步骤1：配置画布基础尺寸 #

先匹配目标内容的实际大小，同时适配设备像素比避免模糊：

const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
const deviceRatio = window.devicePixelRatio || 1;

// 获取目标内容的实际宽高
const content = document.querySelector('#main');
const contentWidth = content.offsetWidth;
const contentHeight = content.offsetHeight;

// 设置canvas实际像素分辨率（适配设备像素比）
canvas.width = contentWidth * deviceRatio;
canvas.height = contentHeight * deviceRatio;

// 设置canvas在页面中的显示尺寸
canvas.style.width = `${contentWidth}px`;
canvas.style.height = `${contentHeight}px`;

// 缩放绘图上下文，匹配设备像素比
context.scale(deviceRatio, deviceRatio);

步骤2：正确调用rasterizeHTML.drawHTML #

将宽高以数字格式传入options参数，正确处理Promise回调：

const html = content.innerHTML;

rasterizeHTML.drawHTML(html, {
  width: contentWidth, // 渲染内容宽度（像素）
  height: contentHeight // 渲染内容高度（像素）
}).then(function(renderResult) {
  // 将渲染结果绘制到画布
  context.drawImage(renderResult.image, 0, 0);
}).catch(function(error) {
  console.error('渲染失败:', error);
});

关键注意事项 #

• options参数要求：宽高必须是纯数字（如1000而非'1000px'），rasterizeHTML 1.2.2版本不支持带单位的字符串配置。
• 避免硬编码宽高：优先获取目标内容的offsetWidth/offsetHeight，确保渲染内容完整适配画布。
• Promise逻辑规范：drawHTML返回的Promise不能直接插入DOM，需在then回调中处理渲染后的图像。

完整可运行代码 #

<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rasterizehtml/1.2.2/rasterizeHTML.allinone.js"></script>
<script>
const canvas = document.getElementById("canvas");
const context = canvas.getContext('2d');
const deviceRatio = window.devicePixelRatio || 1;
const content = document.querySelector('#main');

const contentWidth = content.offsetWidth;
const contentHeight = content.offsetHeight;

// 配置画布分辨率与显示尺寸
canvas.width = contentWidth * deviceRatio;
canvas.height = contentHeight * deviceRatio;
canvas.style.width = `${contentWidth}px`;
canvas.style.height = `${contentHeight}px`;
context.scale(deviceRatio, deviceRatio);

// 渲染HTML到画布
rasterizeHTML.drawHTML(content.innerHTML, {
  width: contentWidth,
  height: contentHeight
}).then(renderResult => {
  context.drawImage(renderResult.image, 0, 0);
}).catch(err => console.error('渲染错误:', err));
</script>

内容的提问来源于stack exchange，提问作者Catalin Briscan