truyện được dịch bởi truyentranhyoyo.blogspot.com, vui lòng không reup lên youtube hay bất kỳ nơi nào

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ề TRUYỆN TRANH YoYo

Chú ý:Chữ trên truyện chỉ được hỗ trợ tốt trên trình duyệt Chrome. Đối với trình duyệt Safari của Iphone iPad, quả táo bị cắn sẽ bị lỗi chữ, vui lòng chọn server1 và khoảng cách ảnh để điều chỉnh ảnh,nếu không được nữa vui lòng thay bằng trình duyệt chrome để tiếp tục. Nếu sử dụng Chrome mà chữ trên truyện bị lỗi, không đọc được, tạm thời chuyển thành chữ thường.Nếu chữ vẫn lỗi vui lòng bình luận giúp mình ở trang truyện nhé.TruyenTranhYoYo

list

Chap Sau

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ề

04/04/24

Để 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