tianyunperfect
/
web-base--


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>webp</title>
    <style>
        #image-display {
            max-width: 100%;
            max-height: 100%;
            border: 1px solid gray;
        }
    </style>
</head>
<body>
<h1>粘贴图片并展示</h1>
<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span>&nbsp;。&nbsp;<button onclick="rotateImage()">旋转90度</button></p>
<div id="image-container">
    <img id="image-display" src="" alt="Image Display">
</div>
<script>
    const imageDisplay = document.getElementById("image-display");

    function formatSize(sizeInBytes) {
        const sizeInKb = sizeInBytes / 1024;
        const sizeInMb = sizeInBytes / 1048576;
        if (sizeInMb >= 1) {
            return `${sizeInMb.toFixed(2)} MB`;
        } else {
            return `${sizeInKb.toFixed(2)} KB`;
        }
    }

    // 监听粘贴事件
    document.addEventListener("paste", (event) => {
        handleClipboardItems(event.clipboardData.items);
    });

    // 监听拖拽事件
    document.addEventListener("dragover", (event) => {
        event.preventDefault();
    });

    document.addEventListener("drop", (event) => {
        event.preventDefault();
        handleClipboardItems(event.dataTransfer.items);
    });

    // 处理粘贴板或拖拽项
    function handleClipboardItems(items) {
        if (!items) {
            return;
        }
        // 查找图片数据
        for (let i = 0; i < items.length; i++) {
            if (items[i].type.indexOf("image") !== -1) {
                document.getElementById("preSize").innerText = "";
                document.getElementById("afterSize").innerText = "";
                // 获取图片文件或URL
                const blob = items[i].getAsFile();
                const imageUrl = URL.createObjectURL(blob);

                // 将图片展示
                imageDisplay.src = imageUrl;
                document.getElementById("status").innerText = " 压缩中……";
                document.getElementById("preSize").innerText = formatSize(blob.size);


                // 压缩为webp格式
                const image = new Image();
                image.onload = () => {
                    const canvas = document.createElement("canvas");
                    canvas.width = image.naturalWidth;
                    canvas.height = image.naturalHeight;
                    const context = canvas.getContext("2d");
                    context.drawImage(image, 0, 0);
                    canvas.toBlob((webpBlob) => {
                        // 将压缩后的webp图片展示在页面上
                        const webpUrl = URL.createObjectURL(webpBlob);
                        imageDisplay.src = webpUrl;

                        // 转换为base64编码
                        const reader = new FileReader();
                        reader.onloadend = () => {
                            // You can further process or use the base64Data as needed
                            document.getElementById("status").innerText = " 已压缩 ☺";
                            document.getElementById("afterSize").innerText = formatSize(webpBlob.size);
                            imageDisplay.src = reader.result;
                        };
                        reader.readAsDataURL(webpBlob);
                    }, "image/webp", 0.8);
                };
                image.src = imageUrl;

                // 防止页面跳转
                event.preventDefault();
                break
            }
        }
    }

    // 选择90度旋转
    function rotateImage() {
        const image = document.getElementById("image-display");
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");

        // 旋转90度
        canvas.width = image.height;
        canvas.height = image.width;
        context.rotate(90 * Math.PI / 180);
        context.drawImage(image, 0, -canvas.width);

        // 将旋转后的图片展示在页面上
        const rotatedImageUrl = canvas.toDataURL();
        image.src = rotatedImageUrl;
    }

</script>
</body>
</html>