如何使用Javascript为图片添加留白？

可以用JavaScript实现给图片加留白的需求，分两种常见使用场景，以下是具体实现方法：

场景1：仅在页面展示时添加留白（无需导出新图） #

如果不需要生成新的图片文件，只需要在前端页面显示时呈现带留白的效果，可以用JS动态给图片元素添加样式即可，示例代码如下：

// 选中需要加留白的图片
const img = document.querySelector('img[alt="图1"]');
// 自定义留白宽度，单位px
const paddingSize = 40;
// 给图片加内边距和白色背景实现留白效果
img.style.padding = `${paddingSize}px`;
img.style.backgroundColor = '#fff';
img.style.boxSizing = 'border-box';

场景2：生成带留白的新图片文件（可保存下载） #

如果需要得到修改后的新图片资源，需要借助Canvas来实现，核心逻辑是创建比原图尺寸更大的Canvas，填充白色背景后再把原图绘制在中间位置，最后导出为图片即可，示例代码如下：

function addPaddingToImage(img, paddingSize = 40, bgColor = '#fff') {
  // 创建Canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 计算新图片的宽高 = 原图宽高 + 左右/上下留白
  canvas.width = img.width + paddingSize * 2;
  canvas.height = img.height + paddingSize * 2;
  // 填充背景色作为留白
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  // 把原图绘制在Canvas中间位置
  ctx.drawImage(img, paddingSize, paddingSize, img.width, img.height);
  // 返回可使用的图片URL，也可以直接触发下载
  return canvas.toDataURL('image/png');
}

// 使用示例
const originalImg = new Image();
// 避免跨域问题，如果是同域名下的图片可忽略
originalImg.crossOrigin = 'anonymous';
originalImg.src = '你的原图地址';
originalImg.onload = function() {
  // 得到带留白的新图片地址
  const newImgUrl = addPaddingToImage(originalImg, 50);
  // 可以插入到页面显示，或者触发下载
  const newImg = new Image();
  newImg.src = newImgUrl;
  document.body.appendChild(newImg);
}

注意：如果处理的是第三方域名下的图片，需要图片所在服务器配置了CORS跨域许可，否则Canvas导出时会触发安全限制报错。

效果参考 #

• 原图（图1）：
  
• 处理后效果（图2）：
  

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