英文:
Combine set of images to create background image
问题
To iterate through the folder books_images and randomly select a specified number of images each time, then combine them into one single image to be used as a background for index.html, you can use Python with libraries like PIL (Pillow) and os. Here's a basic outline of the steps you can follow:
import os
import random
from PIL import Image, ImageDraw
# Set the path to the folder containing your images
folder_path = 'books_images/'
# Set the number of images to pick randomly each time
num_images_to_pick = 3
# List all image files in the folder
image_files = [f for f in os.listdir(folder_path) if f.endswith('.jpg')]
# Randomly select a subset of image files
selected_images = random.sample(image_files, num_images_to_pick)
# Create a blank canvas for combining images
canvas_width = 800
canvas_height = 600
combined_image = Image.new('RGB', (canvas_width, canvas_height))
# Create a drawing context for pasting images onto the canvas
draw = ImageDraw.Draw(combined_image)
# Paste selected images onto the canvas
x_position = 0
for image_file in selected_images:
img = Image.open(os.path.join(folder_path, image_file))
combined_image.paste(img, (x_position, 0))
x_position += img.width
# Save the combined image
combined_image.save('combined_image.jpg')
# Now, 'combined_image.jpg' can be used as a background for your HTML page.
This code selects a specified number of images randomly from the books_images folder, combines them horizontally into one single image, and saves it as combined_image.jpg, which you can then use as a background for your index.html page.
英文:
If i had a folder books_images with set of images
- books_images
-- 1.jpg
-- 2.jpg
-- 3.jpg
-- 4.jpg
-- 5.jpg
-- 6.jpg
How can i iterate through this folder and pick up (number) of images in random way each time and combine all into one single image to be used as background for index.html
just like this one and if you make refresh, it makes different sequences in images.
答案1
得分: 1
这个小演示有效，我只完成了6张图片中的4张选择。您可以根据需要修改对 'randomNo' 的调用。您需要扩展 CSS 规则以适应要一次显示的图像数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>背景演示</title>
</head>
<body onload="randomBackground()">
<script>
function randomNo(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}
function randomBackground() {
var element = document.createElement('style'), sheet;
document.head.appendChild(element); // 创建样式表
sheet = element.sheet;
var styles = 'body {';
styles += 'background: url(images/'+randomNo(1,6)+'.jpg), url(images/'+randomNo(1,6)+'.jpg), url(images/'+randomNo(1,6)+'.jpg), url(images/'+randomNo(1,6)+'.jpg);'; // 构建随机背景
styles += 'background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;';
styles += 'background-size: 50vw 50vh, 50vw 50vh, 50vw 50vh, 50vw 50vh;';
styles += 'background-position: 0 0, 50vw 0, 0 50vh, 50vw 50vh;';
styles += '}';
sheet.insertRule(styles, 0); // 添加规则到新的样式表
}
</script>
</body>
</html>
英文:
This little demo works, I have only done 4 images from a selection of 6. You can amend the calls to 'randomNo' as needed. You would need to expand the css rules to fit the number of images you want to display at once.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Background Demo</title>
</head>
<body onload="randomBackground()">
<script>
function randomNo(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min) + min);
}
function randomBackground() {
var element = document.createElement('style'), sheet;
document.head.appendChild(element); //create a stylesheet
sheet = element.sheet;
var styles = 'body {';
styles += 'background: url(images/'+randomNo(1,6)+'.jpg), url(images/'+randomNo(1,6)+'.jpg), url(images/'+randomNo(1,6)+'.jpg), url(images/'+randomNo(1,6)+'.jpg);'; //Build the random background
styles += 'background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;'
styles += 'background-size: 50vw 50vh, 50vw 50vh, 50vw 50vh, 50vw 50vh;'
styles += 'background-position: 0 0, 50vw 0, 0 50vh, 50vw 50vh;'
styles += '}';
sheet.insertRule(styles, 0); //add rule to new sheet
}
</script>
</body>
</html>
答案2
得分: 0
Here are the translated parts of your code:
if you have for example 20 images in your folder , you should give a random number between 0 and 20 and set it as a variable at end of your folder directory , for example :
let myRandomNumber = Math.random() * 20;
let img = document.querySelector("img");
let randomPath = '/your-folder-name/' + myRandomNumber + '.jpg';
img.src = randomPath;
if you want to iteration through a folder and combine a random number of image :
let images = document.querySelectorAll("img");
let path = '/your-folder-path/';
const myArr = []
while(myArr.length <= images.length){
let randomNumber = Math.floor(Math.random() * images.length);
if (myArr.indexOf(randomNumber) === -1) {
myArr.push(randomNumber);
}
}
if(images){
images.forEach((img , index) => {
img.src = path + myArr[index]
})
}
Is there anything else you'd like me to translate?
英文:
if you have for example 20 images in your folder , you should give a random number between 0 and 20 and set it as a variable at end of your folder directory , for example :
let myRandomNumber = Math.random() * 20;
let img = document.querySelector("img");
let randomPath = '/your-folder-name/' + myRandomNumber + '.jpg';
img.src = randomPath;
if you want to iteration through a folder and combine a random number of image :
let images = document.querySelectorAll("img");
let path = '/your-folder-path/'
const myArr = []
while(myArr.length <= images.length){
let randomNumber = Math.floor(Math.random() * images.length);
if (myArr.indexOf(randomNumber) === -1) {
myArr.push(randomNumber);
}
}
if(images){
images.forEach((img , index) => {
img.src = path + myArr[index]
})
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论