向图像 Javascript 添加空格答案

【问题标题】：Add white spaces to image Javascript向图像 Javascript 添加空格
【发布时间】：2021-10-15 08:51:33
【问题描述】：

有没有办法在 javascript 中为图像添加空格？

我是图像 1，我想编辑或创建一个新图像，添加空格，结果将是图像 2.

【问题讨论】：

欢迎来到 StackOverflow！请阅读How do I ask a good question?和How to create a Minimal, Reproducible Example

【解决方案1】：

你可以使用画布对象来做到这一点。如果你有图像

    <img src="some.jpeg" id="myImg">

您可以将其复制到新画布并使用 drawImage 属性进行播放

var img = document.getElementById('myImg');
var canvas = document.createElement('canvas');
canvas.width = img.width; // add here the extra width you want
canvas.height = img.height; // add here the extra height you want
canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height); // play here with the position, 0, 0 are the top x,y axis

这里是 mozilla 文档的链接： https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

【讨论】：

【解决方案2】：

下面的代码实现了这个任务。基本上，我们创建一个画布并将其设置为所需输出的大小。然后我们用白色填充它，然后在 (0,250) 处绘制原始图像。这使图像居中（我应该用代码完成此操作，而是在图像编辑器中查看您的输出图像。（OutputHeight-InputHeight）/2 = Y 偏移量绘制图像。

由于您实际上并未添加任何细节，因此这可能不是实现您想要实现的目标的最佳方式。您可能应该使用边距/填充来扩大图像所占据的空间。

window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
  let img = document.querySelector('img');
  let canvas = document.querySelector('#output');
  let ctx = canvas.getContext('2d');
  ctx.fillStyle = '#fff';
  ctx.fillRect(0,0,759,759);
  ctx.drawImage(img, 0, 250);
}

body{
  background-color: #ddd;
}

<img src='https://i.stack.imgur.com/bN5hp.jpg'/>
<hr>
<canvas id='output' width=760 height=760/></canvas>

【讨论】：