TRUYỆN TRANH YoYo: Cắt Ảnh Thành Nhiều phần theo chiều dọc sau đó tải ảnh đã cắt về

Góc Thủ Thuật Blogspot Nhỏ

mô tả về thiết kế giao diện người dùng cho trang web truyện tranh

1. Trang chủ: Header: Logo của trang web, thanh điều hướng (navigation bar) chứa các liên kết đến trang danh mục, trang tìm kiếm, trang đăng nhập/đăng ký. Phần trình bày: Các truyện tranh mới nhất hoặc được đề xuất, bố cục theo lưới (grid layout) hoặc danh sách (list layout). Sidebar: Danh sách các thể loại truyện tranh để người dùng có thể lọc theo. Footer: Liên kết đến các trang thông tin về trang web, liên hệ, chính sách bảo mật, v.v. 2. Trang danh mục truyện tranh: Header và footer giống như trên. Bố cục danh sách các truyện tranh trong từng thể loại, có thể phân trang nếu cần.

Thủ Thuật Blogspot Thiết Kế Web Cắt Ảnh Thành Nhiều phần theo chiều dọc sau đó tải ảnh đã cắt về

Hiên tại truyện đang bị lỗi font chữ,font chữ trong truyện dùng trên laptop(máy tính để bàn) và điện thoại di động có thể khác nhau, nếu mọi người đọc không được hãy liên hệ qua facebook ở phía dưới cuối trang có địa chỉ. Chú ý có khi nó sẽ mất ảnh, nếu trang không tự động thiết lập lại thì ấn vào chỗ này màn hình điện thoại di động để thiết lập lại ảnh truyện nhé.

Để cho phép người dùng tải lên nhiều tập tin hình ảnh và cắt chúng thành ba phần theo chiều dọc, bạn có thể sửa đổi mã JavaScript để xử lý nhiều tệp tin. Dưới đây là một phiên bản cập nhật của mã HTML và JavaScript để hỗ trợ việc tải lên nhiều tệp tin và Để cho phép người dùng tải xuống các ảnh đã được cắt thành ba phần, bạn có thể thêm một nút "Tải xuống" và viết mã JavaScript để tạo và tải các ảnh đã cắt. Dưới đây là cách bạn có thể thực hiện điều này,Trong mã này, khi người dùng nhấp vào nút "Tải xuống", hàm downloadImages() sẽ được gọi. Hàm này sẽ tạo một tệp nén có chứa các ảnh đã cắt, sau đó tạo một liên kết tải xuống và kích hoạt sự kiện nhấp để tải xuống tệp đã tạo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cắt ảnh thành 3 phần theo chiều dọc</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>

#imageWrapper {
        display: flex;
        overflow: hidden;
    }

.image-section {
        flex: 1;
        overflow: hidden;
    }

.image-section img {
        width: 100%;
        display: block;
    }

#downloadButton {
        display: block;
        margin-top: 20px;
        padding: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
    }
</style>
</head>
<body>

<input type="file" id="inputImage" accept="image/*" multiple onchange="previewImages(event)">
<div id="imageWrapper"></div>
<button id="downloadButton" onclick="downloadImages()">Tải xuống</button>

for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const img = new Image();
            img.src = e.target.result;
            img.onload = function() {
                const totalHeight = img.height;
                const sectionHeight = totalHeight / 3;

for (let j = 0; j < 3; j++) {
                    const canvas = document.createElement("canvas");
                    canvas.width = img.width;
                    canvas.height = sectionHeight;
                    const ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, j * sectionHeight, img.width, sectionHeight, 0, 0, img.width, sectionHeight);
                    const imageSection = document.createElement("div");
                    imageSection.classList.add("image-section");
                    imageSection.appendChild(canvas);
                    imageWrapper.appendChild(imageSection);
                }
            };
        };
        
        reader.readAsDataURL(file);
    }
}

function downloadImages() {
    const imageSections = document.querySelectorAll(".image-section");
    const zip = new JSZip();
    const imagesFolder = zip.folder("images");

imageSections.forEach((section, index) => {
        const canvas = section.querySelector("canvas");
        const imageDataURL = canvas.toDataURL("image/png");
        imagesFolder.file(`image_${index + 1}.png`, imageDataURL.split(',')[1], { base64: true });
    });

zip.generateAsync({ type: "blob" })
        .then(function(content) {
            const zipFile = URL.createObjectURL(content);
            const downloadLink = document.createElement("a");
            downloadLink.href = zipFile;
            downloadLink.download = "images.zip";
            downloadLink.click();
        });
}
</script>

</body>
</html>

Chap Trước

list

Chap Sau