|
|
@@ -4,22 +4,27 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<title>webp</title>
|
|
|
<style>
|
|
|
- #image-display {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 100%;
|
|
|
+ #image-display, #image-display2, #image-display3 {
|
|
|
+ max-width: 45%;
|
|
|
+ max-height: 45%;
|
|
|
border: 1px solid gray;
|
|
|
}
|
|
|
</style>
|
|
|
+ <script src="js/conversion.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
<h1>粘贴图片并展示</h1>
|
|
|
<p>右键粘贴图片，本地图片或网络图片地址都可以，将被压缩为webp格式并展示，压缩前：<span id="preSize"></span>, 压缩后：<span id="afterSize"></span><span id="status"></span> 。
|
|
|
<button onclick="rotateImage()">旋转90度</button> 。
|
|
|
-<!-- <button onclick="bigImage()">放大</button> 。 -->
|
|
|
-<!-- <button onclick="smallImage()">缩小</button> 。 -->
|
|
|
+ <!-- <button onclick="bigImage()">放大</button> 。 -->
|
|
|
+ <!-- <button onclick="smallImage()">缩小</button> 。 -->
|
|
|
</p>
|
|
|
<div id="image-container">
|
|
|
+ <div>base64 webp</div>
|
|
|
<img id="image-display" src="" alt="Image Display">
|
|
|
+ <div>本地 png < 300k</div>
|
|
|
+ <img id="image-display3" src="" alt="Image Display">
|
|
|
+
|
|
|
</div>
|
|
|
<script>
|
|
|
const imageDisplay = document.getElementById("image-display");
|
|
|
@@ -125,7 +130,12 @@
|
|
|
// 将压缩后的webp图片展示在页面上
|
|
|
// imageDisplay.src = URL.createObjectURL(webpBlob);
|
|
|
const reader = new FileReader();
|
|
|
- reader.onloadend = () => {imageDisplay.src = reader.result;};
|
|
|
+ reader.onloadend = () => {
|
|
|
+ imageDisplay.src = reader.result;
|
|
|
+
|
|
|
+ // toWebP();
|
|
|
+ toPng();
|
|
|
+ };
|
|
|
reader.readAsDataURL(webpBlob);
|
|
|
showSize(webpBlob);
|
|
|
});
|
|
|
@@ -161,6 +171,50 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
+ function base64ToPng(base64Data, callBack) {
|
|
|
+ // 创建一个新的 Image 对象
|
|
|
+ const img = new Image();
|
|
|
+
|
|
|
+ // 当图像加载完成时执行转换逻辑
|
|
|
+ img.onload = function () {
|
|
|
+ // 创建一个新的 Canvas 元素
|
|
|
+ const canvas = document.createElement('canvas');
|
|
|
+ const ctx = canvas.getContext('2d');
|
|
|
+
|
|
|
+ // 设置 Canvas 的尺寸与图像一样
|
|
|
+ canvas.width = img.width;
|
|
|
+ canvas.height = img.height;
|
|
|
+
|
|
|
+ // 将 base64 图像绘制到 Canvas 上
|
|
|
+ ctx.drawImage(img, 0, 0);
|
|
|
+
|
|
|
+ // 将 Canvas 转换为 PNG 格式的 Blob 对象
|
|
|
+ canvas.toBlob(function (blob) {
|
|
|
+ // 将 Blob 对象传递给其他地方使用，比如保存到本地或上传到服务器
|
|
|
+ // 这里我们简单地打印 Blob 对象的大小和类型
|
|
|
+ console.log("生成的 PNG Blob 大小:", blob.size, "类型:", blob.type);
|
|
|
+ callBack(blob);
|
|
|
+ }, 'image/png');
|
|
|
+ };
|
|
|
+
|
|
|
+ // 设置图像的 src 为 base64 数据
|
|
|
+ img.src = base64Data;
|
|
|
+ }
|
|
|
+
|
|
|
+ function toPng() {
|
|
|
+ // 将base64图片转为本地路径
|
|
|
+ const image = document.getElementById("image-display");
|
|
|
+
|
|
|
+ base64ToPng(image.src, function (blob) {
|
|
|
+ imageConversion.compressAccurately(blob, 300).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ document.getElementById("image-display3").src = URL.createObjectURL(res);
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
