|
|
@@ -13,13 +13,23 @@
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1>粘贴图片并展示</h1>
|
|
|
-<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示<span id="status"></span></p>
|
|
|
+<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span></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) => {
|
|
|
// 获取粘贴板数据
|
|
|
@@ -31,6 +41,7 @@
|
|
|
// 查找图片数据
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
|
if (items[i].type.indexOf("image") !== -1) {
|
|
|
+ document.getElementById("preSize").innerText = "";
|
|
|
// 获取图片文件或URL
|
|
|
const blob = items[i].getAsFile();
|
|
|
const imageUrl = URL.createObjectURL(blob);
|
|
|
@@ -38,6 +49,8 @@
|
|
|
// 将图片展示
|
|
|
imageDisplay.src = imageUrl;
|
|
|
document.getElementById("status").innerText = " 压缩中……";
|
|
|
+ document.getElementById("preSize").innerText = formatSize(blob.size);
|
|
|
+
|
|
|
|
|
|
// 压缩为webp格式
|
|
|
const image = new Image();
|
|
|
@@ -51,7 +64,8 @@
|
|
|
// 将压缩后的webp图片展示在页面上
|
|
|
const webpUrl = URL.createObjectURL(webpBlob);
|
|
|
imageDisplay.src = webpUrl;
|
|
|
- document.getElementById("status").innerText = " 已压缩☺";
|
|
|
+ document.getElementById("status").innerText = " 已压缩 ☺";
|
|
|
+ document.getElementById("afterSize").innerText = formatSize(webpBlob.size);
|
|
|
|
|
|
}, "image/webp", 0.8);
|
|
|
};
|
tianyun