如何通过JavaScript按指定宽高生成空白图并获取对应base64编码

该需求完全可落地，所有实现均基于原生JavaScript完成，无需依赖任何外部图片资源，生成的占位图可直接赋值给img标签的src属性使用，同时可同步获取完整的base64编码。

具体实现思路 #

思路1：矢量SVG转Base64（轻量首选方案） #

该方案生成的占位图为矢量格式，base64体积极小，是绝大多数占位场景的最优选择。
实现逻辑：

• 构造指定宽高的空白SVG字符串，默认支持设置透明背景或自定义填充色
• 对SVG字符串做base64编码，拼接为标准DataURL格式即可
  参考实现代码：

/**
 * 生成指定尺寸空白SVG占位图的base64
 * @param {number} width 图像宽度（单位：px）
 * @param {number} height 图像高度（单位：px）
 * @param {string} fill 填充色，默认透明
 * @returns {string} 可直接作为img src使用的base64编码
 */
function generateSvgPlaceholder(width, height, fill = 'transparent') {
  const svgTemplate = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect width="100%" height="100%" fill="${fill}"/></svg>`;
  // 兼容特殊字符的base64编码处理
  const base64Content = window.btoa(unescape(encodeURIComponent(svgTemplate)));
  return `data:image/svg+xml;base64,${base64Content}`;
}

// 调用示例：生成宽200px、高400px的白底占位图
const whitePlaceholder = generateSvgPlaceholder(200, 400, '#ffffff');

方案特点：200*400尺寸的占位图生成的base64仅两百余字节，几乎无性能开销，矢量格式缩放不会模糊。 #

思路2：Canvas生成位图Base64（位图适配场景） #

如果业务场景要求占位图为标准栅格位图（如需要导出到PDF、传入图片编辑工具等），可使用Canvas实现，生成的编码为标准PNG/JPG格式。
实现逻辑：

• 动态创建Canvas元素，设置宽高为指定尺寸
• 通过2D上下文绘制填充色（默认透明则无需绘制）
• 直接调用Canvas原生方法导出base64编码
  参考实现代码：

/**
 * 生成指定尺寸空白位图占位图的base64
 * @param {number} width 图像宽度（单位：px）
 * @param {number} height 图像高度（单位：px）
 * @param {string} fill 填充色，默认透明
 * @param {string} format 导出格式，可选image/png、image/jpeg
 * @returns {string} 可直接作为img src使用的base64编码
 */
function generateCanvasPlaceholder(width, height, fill = 'transparent', format = 'image/png') {
  // 仅在内存中创建Canvas，无需插入DOM
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  // 非透明填充时绘制矩形
  if (fill !== 'transparent') {
    ctx.fillStyle = fill;
    ctx.fillRect(0, 0, width, height);
  }
  return canvas.toDataURL(format);
}

// 调用示例：生成宽200px、高400px的透明PNG占位图
const transparentPlaceholder = generateCanvasPlaceholder(200, 400);

方案特点：生成的为标准位图格式，适配所有需要位图输入的业务场景，但base64体积会比SVG方案大（同尺寸下通常为几KB到几十KB）。 #

补充注意事项 #

• 两种方案均为纯内存操作，生成过程不会在页面渲染多余元素，无额外DOM开销
• 生成的base64编码可直接存储、复用，无需每次重复执行生成逻辑
• 若需要兼容老旧IE浏览器，代码中的base64编码处理逻辑可直接兼容，无需额外修改

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