|
|
@@ -13,7 +13,8 @@
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1>粘贴图片并展示</h1>
|
|
|
-<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span> 。 <button onclick="rotateImage()">旋转90度</button></p>
|
|
|
+<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span> 。 <button onclick="rotateImage()">旋转90度</button>
|
|
|
+</p>
|
|
|
<div id="image-container">
|
|
|
<img id="image-display" src="" alt="Image Display">
|
|
|
</div>
|
|
|
@@ -45,6 +46,28 @@
|
|
|
handleClipboardItems(event.dataTransfer.items);
|
|
|
});
|
|
|
|
|
|
+ function compressImage(blobFile) {
|
|
|
+ // 返回一个Promise对象
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ // 创建一个Image对象
|
|
|
+ const image = new Image();
|
|
|
+ // 当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) => {
|
|
|
+ // 解决Promise，并传递压缩后的Blob对象
|
|
|
+ resolve(webpBlob);
|
|
|
+ }, "image/webp", 0.8);
|
|
|
+ // 如果在转换过程中发生错误，拒绝Promise
|
|
|
+ };
|
|
|
+ image.src = URL.createObjectURL(blobFile);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
// 处理粘贴板或拖拽项
|
|
|
function handleClipboardItems(items) {
|
|
|
if (!items) {
|
|
|
@@ -56,40 +79,20 @@
|
|
|
document.getElementById("preSize").innerText = "";
|
|
|
document.getElementById("afterSize").innerText = "";
|
|
|
// 获取图片文件或URL
|
|
|
- const blob = items[i].getAsFile();
|
|
|
- const imageUrl = URL.createObjectURL(blob);
|
|
|
+ const blobFile = items[i].getAsFile();
|
|
|
|
|
|
// 将图片展示
|
|
|
- imageDisplay.src = imageUrl;
|
|
|
document.getElementById("status").innerText = " 压缩中……";
|
|
|
- document.getElementById("preSize").innerText = formatSize(blob.size);
|
|
|
-
|
|
|
+ document.getElementById("preSize").innerText = formatSize(blobFile.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;
|
|
|
+ compressImage(blobFile).then((webpBlob) => {
|
|
|
+ // 将压缩后的webp图片展示在页面上
|
|
|
+ imageDisplay.src = URL.createObjectURL(webpBlob);
|
|
|
|
|
|
- // 转换为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;
|
|
|
+ document.getElementById("status").innerText = " 已压缩 ☺";
|
|
|
+ document.getElementById("afterSize").innerText = formatSize(webpBlob.size);
|
|
|
+ });
|
|
|
|
|
|
// 防止页面跳转
|
|
|
event.preventDefault();
|
tianyun