js实现webp转png/jpg
网上保存的图片是webp类型的，但是我把它嵌入flac格式的音频里后导致网页中无法播放
wps要会员，真麻烦。
完整代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebP to PNG Converter</title>
<style> .input-area { margin-bottom: 10px; } .output-area { margin-top: 10px; }
</style>
</head>
<body> <div class="input-area"> <input type="file" id="webp-input" accept=".webp" onchange="javascript:preview()" /><div id="img-preview"></div><button onclick="convertWebp('image/png')">转换成png</button><button onclick="convertWebp('image/jpg')">转换成jpg</button>
</div> <div class="output-area" id="output-area"> <!-- 下载链接将在这里动态生成 -->
</div> <script>
function preview(){const imgContent = document.getElementById('img-preview');const file = document.getElementById("webp-input").files[0];imgContent.innerHTML = '';const img = document.createElement('img');img.src = URL.createObjectURL(file);imgContent.appendChild(img);img.onload = function() {URL.revokeObjectURL(this.src);}
}
function convertWebp(mimeType) { const inputElement = document.getElementById('webp-input'); const file = inputElement.files[0]; if (!file) { alert('Please select a WebP file first.'); return; } const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.onload = function() { const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, img.width, img.height); const pngUrl = canvas.toDataURL(mimeType); const link = document.createElement('a'); link.href = pngUrl;if(mimeType === 'image/png'){link.download = 'converted.png'; }else if(mimeType === 'image/jpg'){link.download = 'converted.jpg';}document.getElementById('output-area').appendChild(link); link.click(); // 触发下载 }; img.src = event.target.result; }; reader.readAsDataURL(file);
}
</script> </body>
</html>相关文章：
js实现webp转png/jpg
网上保存的图片是webp类型的，但是我把它嵌入flac格式的音频里后导致网页中无法播放 wps要会员，真麻烦。 完整代码： <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8">…...
DVWA -File Upload-通关教程-完结
DVWA -File Upload-通关教程-完结 文章目录 DVWA -File Upload-通关教程-完结页面功能LowMediumHighImpossible 页面功能 此页面的功能为选择某个图片文件点击Upload按钮上传，上传成功后得知文件上传路径为DVWA\hackable\uploads。 Low 源码审计 这段 PHP 代码…...
中介者模式：简化对象间通信的协调者
在面向对象的软件开发中，中介者模式是一种重要的行为型设计模式，用于降低多个对象间通信的复杂性。通过提供一个中心化的对象来处理不同组件之间的交互，中介者模式使得组件间不必显式引用彼此，从而使其松散耦合、更易于维护。本文…...
【Python系列】pydantic版本问题
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
深度学习-多尺度训练的介绍与应用
一、引言 在当今快速发展的人工智能领域，多尺度训练已经成为了一种至关重要的技术，特别是在处理具有复杂结构和不同尺度特征的数据时。这种技术在许多应用中发挥着关键作用，例如图像识别、自然语言处理和视频分析等。 多尺度训练的定义 多尺…...
详解单文件组件
当你创建 Vue 单文件组件时，通常会包含三个部分：<template>、<script> 和 <style>。这三个部分分别用于定义组件的模板、逻辑和样式。让我更详细地解释一下它们的作用和用法： <template> <template> 标签用于…...
MLeaksFinder报错
1.报错：FBClassStrongLayout.mm 文件：layoutCache[currentClass] ivars; 解决：替换为layoutCache[(id)currentClass] ivars; 2.编译正常但运行时出现crash indirect_symbol_bindings[i] cur->rebinding FBRetainCycleDetector iOS15 …...
【心路历程】初次参加蓝桥杯实况
送给大家一句话： 寂静的光辉平铺的一刻，地上的每一个坎坷都被映照得灿烂。 – 史铁生 《我与地坛》 初次参加蓝桥杯有感 一点小小的震撼难评的做题过程A题 艺术与篮球问题描述解题 B 题 五子棋问题描述解题 C题 训练士兵问题描述解题 D题 团建解题 E题 …...
微信小程序全屏开屏广告
效果图 代码 <template><view><!-- 自定义头部 --><u-navbar title" " :bgColor"bgColor"><view class"u-nav-slot" slot"left"><view class"leftCon"><view class"countDown…...
记录day1
1.早上 ①协同过滤算法 基于物品基于用户分别是如何实现的 相似度的计算方式 基于用户和基于物品的区别 实时性和新物品这里： 实时性指的是用户有新行为，这样基于物品就好，因为用户新行为了，用户矩阵不会变化，用户…...
stm32GPio的开发基础
上拉输入：高电平（弱高电平，一般默认） 下拉输入：低电平 没有上拉下拉就是处于一个不确定的状态 推挽wan输出：驱动能力比较强，推挽是因为往外推 set就是1，reset就是0 XMX就是封装的…...
DataSource
目录 1、 DataSource 1.1、 * 建立数据库连接的参数对象 1.1.1、 * 数据库url 1.1.2、 * 数据库用户名 1.1.3、 * 数据库密码 1.1.4、 * 数据库驱动名称 <...
Linux防止暴力破解密码脚本
1.认识记录linux记录安全的日志 [roottestpm ~]# cd /var/log/ [roottestpm log]# ls | grep secure secure 2.该日志的内容查看 [roottestpm log]# tail -f secure #表示ssh身份验证失败 Aug 29 23:35:03 testpm sshd[111245]: pam_unix(sshd:auth): authentication fa…...
Unity 遮罩
编辑器版本 2017.2.3f1 学习Unity的三张遮罩方式 1. Mask 遮罩方式 首先，在界面上创建2个Image，一个命名Img_Mask,大小设置 400* 400， 一个命名Img_Show,大小设置500*500。 然后，给 Img_Mask添加Mask,选择Img_Mask,点击Add Com…...
jmeter实验 模拟:从CSV数据到加密请求到解密返回数据再到跨越线程组访问解密后的数据
注意,本实验所说的加密只是模拟加密解密,您需要届时写自己的加解密算法或者引用含有加密算法的相关jar包才行. 思路: 线程组1: 1.从CSV文件读取原始数据 2.将读取到的数据用BeanShell预习处理器进行加密 3.HTTP提取器使用加密后的数据发起请求 4.使用BeanShell后置处理器…...
设计模式——外观（门面）模式10
外观模式：能为系统框架或其他复杂业务流程封装提供一个简单的接口。 例如抽奖过程中 设计模式，一定要敲代码理解 调用1（抽奖系统） /*** author ggbond* date 2024年04月08日 10:34*/ public class Lottery {public String getId…...
第七周周一人工智能导论预告
第一讲 人工智能概述 1.1 简介 1.2人工智能的概念 1.3 人工智能的发展简史 1.4 人工智能研究的基本内容 第一讲 人工智能概述单元测试 第二讲 一阶谓词逻辑表示法 2.1 命题逻辑 2.2 谓词逻辑 2.3 一阶谓词逻辑知识表示法 第二讲 一阶谓词逻辑知识表示法单元测试 第…...
npm install 的不同选项：--save、--save-dev、-S、-D 的区别
Node.js 的包管理器 npm 提供了一个命令 npm install，用于安装 Node.js 项目所需的依赖包。在使用这个命令时，我们可以通过添加不同的选项来控制依赖包的安装方式。本文将详细介绍这些选项：--save、--save-dev、-S 和 -D 的区别。 1. --save…...
设计模式详解（十四）——策略模式
策略模式简介 策略模式定义 策略模式（Strategy Pattern）是一种行为型设计模式，它使能在运行时改变对象的行为。策略模式属于对象行为模式，它定义了一系列的算法，并将每一个算法封装起来，使它们可以互相替换…...
【牛客SQL快速入门】SQL基础（二）
一、高级查询 1. 计算函数 AVG AVG()为平均值函数，通过对表中行数计数并计算其列值之和，求得该列的平均值。 AVG() 可用来返回所有列的平均值，也可以用来返回特定列或行的平均值。 Select avg(gpa) From user_profile COUNT COUNT()函数…...
可配置处理器技术：嵌入式SOC设计的灵活加速方案
1. 可配置处理器技术概述在嵌入式系统芯片(SOC)设计领域，算法实现方式的选择一直是个关键决策点。传统上，开发者面临两种主要选择：要么将算法编译成通用处理器(如RISC或DSP)可执行的软件，要么将其直接实现为专用硬件电路(ASIC)。前…...
无实景不建模 孪生自生成：无改造无感追踪技术路径，重构数字孪生与视频孪生交付逻辑
数字孪生长期深陷建模依赖的行业困局，传统技术路径均以人工建模、激光点云扫描、第三方测绘为前置核心环节，不仅带来高昂的资金投入、漫长的实施周期，更存在模型更新滞后、实景适配性差、运维成本高企等难以破解的行业顽疾。同时，…...
基于MCP协议构建AI Agent链上数据查询与操作工具实践
1. 项目概述：一个连接加密世界与AI的“翻译官”如果你最近在捣鼓AI Agent，特别是想让它帮你分析链上数据、查询钱包余额，甚至执行一些基础的区块链操作，那你可能已经发现了一个痛点：让AI直接理解并操作区块链ÿ…...
DLSS Swapper：3个技巧彻底改变你的游戏性能优化体验
DLSS Swapper：3个技巧彻底改变你的游戏性能优化体验 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper DLSS Swapper是一款革命性的游戏性能优化工具，它让你能够轻松管理NVIDIA DLSS、AMD FSR和Int…...
从S-Function到系统级验证：构建可复用的16QAM Simulink自定义模块库
1. 为什么需要自定义Simulink模块库 在通信系统仿真中，我们经常遇到标准模块库无法满足特定需求的情况。就拿16QAM调制解调来说，虽然Simulink自带通信工具箱，但实际项目中往往需要更灵活的配置和更直观的参数调整界面。我刚开始做通信仿真时…...
深入剖析`ReentrantReadWriteLock`源码——虚拟线程时代机遇、挑战与演进
引言：并发范式的革命性转变 Java 21 正式引入了虚拟线程（Virtual Threads），这标志着 Java 并发编程进入了一个全新的时代。Project Loom 的目标是让编写、维护和观测高吞吐量的并发应用程序变得如同编写顺序代码一样简单。虚拟线程…...
告别恼人的JDK版本警告！手把手教你为IDEA+Maven项目永久锁定Java 8（保姆级避坑图解）
彻底根治IDEAMaven项目的JDK版本警告：从项目配置到环境锁定的终极方案 每次打开IntelliJ IDEA，那个刺眼的黄色警告"Warning:java: 源值1.5已过时"就像代码世界里的蟑螂，虽然无害但令人极度不适。作为有代码洁癖的开发者，…...
利用Taotoken的OpenAI兼容协议快速迁移现有Node点js应用
🚀 告别海外账号与网络限制！稳定直连全球优质大模型，限时半价接入中。 👉 点击领取海量免费额度 利用Taotoken的OpenAI兼容协议快速迁移现有Node.js应用 对于已经基于OpenAI官方Node.js SDK构建了应用或服务的团队，当…...
半导体制造从试生产到量产：变异性、污染、工具差异如何影响良率？
半导体制造工艺从试生产到量产的关键过渡将半导体制造工艺从试生产扩展到量产 (HVM)，是半导体生命周期中最关键、最复杂的过渡阶段之一，也是大多数工艺真正得到验证的阶段。在试生产阶段，目标是证明工艺的有效性。工程师在受控条件下操作&…...
JSBSim飞行动力学引擎技术解析与多领域应用指南
JSBSim飞行动力学引擎技术解析与多领域应用指南 【免费下载链接】jsbsim An open source flight dynamics & control software library 项目地址: https://gitcode.com/gh_mirrors/js/jsbsim JSBSim是一款开源的六自由度飞行动力学模型库，为航空航天领域…...