javascript - CSS/JS : How do I copy the edge pixels and repeat them

Question

我有一个 960 像素的横幅(有多个幻灯片)，根据客户的要求，它应该填满整个窗口宽度，但不能缩放。他们提到了“像素复制”，但我还没有找到任何内容。

我必须让横幅边缘(最后 1 像素)重复自身以适应宽度；最后一个左边的像素应该重复到左侧，最后一个右边的像素应该重复到右侧。

我必须用 HTML/CSS/JS 来做，但我还没有找到解决方案，当然我可以通过打开 Photoshop 来完成这个，但是客户端可以通过后端更改横幅，正如我提到的前;它包含幻灯片(每 5 秒左右更换一次......)

我在想:

<script>
   var img = new Image();
    img.src = 'image.jpg';
    var context = document.getElementById('canvas').getContext('2d');
    context.drawImage(img, 0, 0);
    data = context.getImageData(x, y, 960, 1).data;
    // ... Now what?
</script>

我在 Stackoverflow 上找到了该代码，但我的问题不仅是我不知道如何获取像素并复制它，而且横幅从上到下的每个像素都需要重复

有什么建议吗？

Answer 1

考虑这种方法，使用数据 URL:https://stackoverflow.com/a/9971339/36537

本质上，您创建一个 1 像素宽的 Canvas ，设置横幅像素的值，并将其转换为数据 URL。将此数据 URL 传递给 CSS 背景图像属性。

要获取像素值并将它们复制到新 Canvas 中，请遵循 MDN 上的信息:Pixel manipulation with canvas