jquery - 重复多个图像作为不同样式的背景

Question

在我的当前元素中，最终用户将从他的计算机中选择任何图像，然后我们应该以以下格式显示该图像。

以上格式为Normal Repeat、Half-Drop、Half-Brick、Center、镜像分别

为此，我开始研究 CSS 背景图像技巧。但是我没有得到 100% 的解决方案。

我做了什么

1. 采用400px 宽度 和400px 高度

2. 使用 Background-position: 和 Background-repeat: 属性重复图像

3. 根据格式在 repeat-x 和 repeat-y 中重复图像。

4. 以适合400px 高度 和400px 宽度

的方式重复图像

5. 根据我的代码，如果我们想在4 行 中重复图像，那么我们应该编写4 条背景属性线

请通过Js Fiddle以便更好地理解。

我想要的是

1. 解决方案可以在 CSS 或 Jquery

2. 如果 CSS 中有一个解决方案:背景重复应该自动完成，即使我增加了分区的高度。

3. 我不知道要以镜像格式 重复图像(如上文提到的最后一张图像)。

请提出您的建议以使其完善。

注意:请原谅我的拙劣解释。请通过 Js Fiddle 文件(你会明白我想要什么)。

Answer 1

您可以使用 JavaScript 和 canvas 元素来修改背景图像。

对于 half-drop 模式，创建一个宽度为图像两倍的 Canvas 元素，并像这样在 Canvas 上绘制图像:

context.drawImage(image, 0, 0, width, height);
context.drawImage(image, width, height / -2, width, height);
context.drawImage(image, width, height / 2, width, height);

对于镜像模式使用这个:

context.drawImage(image, 0, 0, width, height);
context.save();
context.scale(-1, 1);
context.drawImage(image, -width * 2, 0, width, height);
context.scale(1, -1);
context.drawImage(image, -width * 2, -height * 2, width, height);
context.scale(-1, 1);
context.drawImage(image, 0, -height * 2, width, height);
context.restore();

要将 Canvas 元素设置为背景图像，请使用 canvas.toDataURL():

element.style.backgroundImage = 'url("' + canvas.toDataURL('image/png') + '")';

看看这个JsFiddle一个完整的工作示例。

关于 Canvas 元素的更多信息:Tutorial on MDN