当前位置： 首页 > news >正文

js实现webp转png/jpg

news 文章来源：https://blog.csdn.net/qq_34188180/article/details/137725519 2024/11/5 17:23:07

网上保存的图片是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类型的&#xff0c;但是我把它嵌入flac格式的音频里后导致网页中无法播放 wps要会员&#xff0c;真麻烦。 完整代码&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8">…...

编程日记 2024/4/13 23:15:33

DVWA -File Upload-通关教程-完结

DVWA -File Upload-通关教程-完结 文章目录 DVWA -File Upload-通关教程-完结页面功能LowMediumHighImpossible 页面功能 此页面的功能为选择某个图片文件点击Upload按钮上传&#xff0c;上传成功后得知文件上传路径为DVWA\hackable\uploads。 Low 源码审计 这段 PHP 代码…...

编程日记 2024/4/13 23:14:32

中介者模式：简化对象间通信的协调者

在面向对象的软件开发中&#xff0c;中介者模式是一种重要的行为型设计模式&#xff0c;用于降低多个对象间通信的复杂性。通过提供一个中心化的对象来处理不同组件之间的交互&#xff0c;中介者模式使得组件间不必显式引用彼此&#xff0c;从而使其松散耦合、更易于维护。本文…...

编程日记 2024/4/13 23:11:29

【Python系列】pydantic版本问题

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...

编程日记 2024/4/13 23:07:25

深度学习-多尺度训练的介绍与应用

一、引言 在当今快速发展的人工智能领域&#xff0c;多尺度训练已经成为了一种至关重要的技术&#xff0c;特别是在处理具有复杂结构和不同尺度特征的数据时。这种技术在许多应用中发挥着关键作用&#xff0c;例如图像识别、自然语言处理和视频分析等。 多尺度训练的定义 多尺…...

编程日记 2024/4/13 23:06:23

详解单文件组件

当你创建 Vue 单文件组件时&#xff0c;通常会包含三个部分&#xff1a;<template>、<script> 和 <style>。这三个部分分别用于定义组件的模板、逻辑和样式。让我更详细地解释一下它们的作用和用法&#xff1a; <template> <template> 标签用于…...

编程日记 2024/4/13 23:04:21

MLeaksFinder报错

1.报错&#xff1a;FBClassStrongLayout.mm 文件&#xff1a;layoutCache[currentClass] ivars; 解决&#xff1a;替换为layoutCache[(id)currentClass] ivars; 2.编译正常但运行时出现crash indirect_symbol_bindings[i] cur->rebinding FBRetainCycleDetector iOS15 …...

编程日记 2024/4/13 23:00:16

【心路历程】初次参加蓝桥杯实况

送给大家一句话&#xff1a; 寂静的光辉平铺的一刻&#xff0c;地上的每一个坎坷都被映照得灿烂。 – 史铁生 《我与地坛》 初次参加蓝桥杯有感 一点小小的震撼难评的做题过程A题 艺术与篮球问题描述解题 B 题 五子棋问题描述解题 C题 训练士兵问题描述解题 D题 团建解题 E题 …...

编程日记 2024/4/13 22:58:14

微信小程序全屏开屏广告

效果图 代码 <template><view><!-- 自定义头部 --><u-navbar title" " :bgColor"bgColor"><view class"u-nav-slot" slot"left"><view class"leftCon"><view class"countDown…...

编程日记 2024/4/13 22:57:12

记录day1

1.早上 ①协同过滤算法 基于物品基于用户分别是如何实现的 相似度的计算方式 基于用户和基于物品的区别 实时性和新物品这里&#xff1a; 实时性指的是用户有新行为&#xff0c;这样基于物品就好&#xff0c;因为用户新行为了&#xff0c;用户矩阵不会变化&#xff0c;用户…...

编程日记 2024/4/13 22:51:03

stm32GPio的开发基础

上拉输入&#xff1a;高电平&#xff08;弱高电平&#xff0c;一般默认&#xff09; 下拉输入&#xff1a;低电平 没有上拉下拉就是处于一个不确定的状态 推挽wan输出&#xff1a;驱动能力比较强&#xff0c;推挽是因为往外推 set就是1&#xff0c;reset就是0 XMX就是封装的…...

编程日记 2024/4/13 22:48:00

DataSource

目录 1、 DataSource 1.1、 * 建立数据库连接的参数对象 1.1.1、 * 数据库url 1.1.2、 * 数据库用户名 1.1.3、 * 数据库密码 1.1.4、 * 数据库驱动名称 <...

编程日记 2024/4/13 22:46:58

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…...

编程日记 2024/4/13 22:42:48

Unity 遮罩

编辑器版本 2017.2.3f1 学习Unity的三张遮罩方式 1. Mask 遮罩方式 首先&#xff0c;在界面上创建2个Image&#xff0c;一个命名Img_Mask,大小设置 400* 400&#xff0c; 一个命名Img_Show,大小设置500*500。 然后&#xff0c;给 Img_Mask添加Mask,选择Img_Mask,点击Add Com…...

编程日记 2024/4/13 22:41:46

jmeter实验 模拟:从CSV数据到加密请求到解密返回数据再到跨越线程组访问解密后的数据

注意,本实验所说的加密只是模拟加密解密,您需要届时写自己的加解密算法或者引用含有加密算法的相关jar包才行. 思路: 线程组1: 1.从CSV文件读取原始数据 2.将读取到的数据用BeanShell预习处理器进行加密 3.HTTP提取器使用加密后的数据发起请求 4.使用BeanShell后置处理器…...

编程日记 2024/4/13 22:40:45

设计模式——外观（门面）模式10

外观模式&#xff1a;能为系统框架或其他复杂业务流程封装提供一个简单的接口。 例如抽奖过程中 设计模式&#xff0c;一定要敲代码理解 调用1&#xff08;抽奖系统&#xff09; /*** author ggbond* date 2024年04月08日 10:34*/ public class Lottery {public String getId…...

编程日记 2024/4/13 22:39:44

第七周周一人工智能导论预告

第一讲 人工智能概述 1.1 简介 1.2人工智能的概念 1.3 人工智能的发展简史 1.4 人工智能研究的基本内容 第一讲 人工智能概述单元测试 第二讲 一阶谓词逻辑表示法 2.1 命题逻辑 2.2 谓词逻辑 2.3 一阶谓词逻辑知识表示法 第二讲 一阶谓词逻辑知识表示法单元测试 第…...

编程日记 2024/4/13 22:38:43

npm install 的不同选项：--save、--save-dev、-S、-D 的区别

Node.js 的包管理器 npm 提供了一个命令 npm install&#xff0c;用于安装 Node.js 项目所需的依赖包。在使用这个命令时&#xff0c;我们可以通过添加不同的选项来控制依赖包的安装方式。本文将详细介绍这些选项&#xff1a;--save、--save-dev、-S 和 -D 的区别。 1. --save…...

编程日记 2024/4/13 22:37:41

设计模式详解（十四）——策略模式

策略模式简介 策略模式定义 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式&#xff0c;它使能在运行时改变对象的行为。策略模式属于对象行为模式&#xff0c;它定义了一系列的算法&#xff0c;并将每一个算法封装起来&#xff0c;使它们可以互相替换…...

编程日记 2024/4/13 22:32:35

【牛客SQL快速入门】SQL基础（二）

一、高级查询 1. 计算函数 AVG AVG()为平均值函数&#xff0c;通过对表中行数计数并计算其列值之和&#xff0c;求得该列的平均值。 AVG() 可用来返回所有列的平均值&#xff0c;也可以用来返回特定列或行的平均值。 Select avg(gpa) From user_profile COUNT COUNT()函数…...

编程日记 2024/4/13 22:31:34

利用Java代码调用Lua脚本改造分布式锁

4.8 利用Java代码调用Lua脚本改造分布式锁 lua脚本本身并不需要大家花费太多时间去研究&#xff0c;只需要知道如何调用&#xff0c;大致是什么意思即可&#xff0c;所以在笔记中并不会详细的去解释这些lua表达式的含义。 我们的RedisTemplate中&#xff0c;可以利用execute方…...

编程日记 2024/4/13 22:27:29

7/8电源连接器航空插头端子

概述 7/8电源连接器是一种工业电源连接器的规格型号之一&#xff0c;常见于工业领域的电力传输和连接应用。它的名称中的“7/8”代表连接器插头的直径尺寸&#xff0c;通常为7/8英寸。这种类型的连接器通常用于较大电流传输和较高功率设备的连接&#xff0c;具有较大的电流承载…...

编程日记 2024/4/13 22:26:27

华为OD-C卷-游戏分组[100分]

题目描述 部门准备举办一场王者荣耀表演赛&#xff0c;有 10 名游戏爱好者参与&#xff0c;分为两队&#xff0c;每队 5 人。 每位参与者都有一个评分&#xff0c;代表着他的游戏水平。为了表演赛尽可能精彩&#xff0c;我们需要把 10 名参赛者分为示例尽量相近的两队。 一队…...

编程日记 2024/4/13 22:25:26

【c++】优先级队列|反向迭代器（vector|list）

优先级队列的常用函数的使用 #include<iostream> #include<queue> using namespace std;int main() {priority_queue<int>st;st.push(1);st.push(7);st.push(5);st.push(2);st.push(3);st.push(9);while (!st.empty()){cout << st.top() << &qu…...

编程日记 2024/4/13 22:24:25

gocron定时任务管理

基于gocron定时任务建设 基础环境配置 golang安装 下载 wget https://dl.google.com/go/go1.21.6.linux-amd64.tar.gz export PATH$PATH:/usr/local/go/bin 下载gocron组件 wget https://github.com/ouqiang/gocron/releases/download/v1.5.3/gocron-v1.5.3-linux-amd64.tar.g…...

编程日记 2024/4/13 22:23:24

JCYZ H3CNE-RS+

JCYZ H3CNE-RS 20240413 20240413 https://www.h3c.com/cn/ 支持–软件下载–其他产品–模拟器官方下载 人才研学中心—技术认证—电子资料 按范围划分&#xff1a;局域网 城域网 广域网 按拓扑结构划分&#xff1a;总线型 环型 星型 树型 全网状 部分网状&#xff08;优缺点&a…...

编程日记 2024/4/13 22:22:23

太阳光光照试验耐久性老化试验使用太阳光模拟器系统

上海科迎法电气科技有限公司生产的太阳光模拟器系统主要应用于太阳能研究、材料研究、光伏组件测试、空间环境模拟器、植物生长研究、光热模拟等领域&#xff0c;主要表现特征为&#xff1a; 1. 太阳能研究&#xff1a;可用于模拟不同光照条件下太阳能电池的性能测试和研究&am…...

编程日记 2024/4/13 22:21:21

Centos 7.9.2009 下 Gitlab 完全卸载

一、linux版本&#xff1a;lsb_release -a 二、GtiLab 版本 # 查看gitlab的版本号 cat /opt/gitlab/embedded/service/gitlab-rails/VERSION 三、开始卸载 3.1&#xff0c;停止Gitlab 相关服务 # 停止所有GitLab相关服务&#xff1a; sudo gitlab-ctl stop# 移除GitLab包…...

编程日记 2024/4/13 22:20:19

Navicat Premium 16 for Mac/Win：数据库管理的全能之选

在数字化时代&#xff0c;数据库管理已成为各行各业不可或缺的一环。而Navicat Premium 16作为一款功能强大的数据库管理软件&#xff0c;无疑为数据库管理员和开发者提供了高效、便捷的解决方案。 Navicat Premium 16支持多种主流数据库系统&#xff0c;无论是MySQL、Postgre…...

编程日记 2024/4/13 22:19:18

使用腾讯云服务器如何搭建网站？新手建站教程

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网txyfwq.com整理使用腾讯云服务器建站教程&#xff0c;…...

编程日记 2024/4/13 22:17:16

如何查看网站点击量/查询网站流量的网址

1.触发器 这是一个非常简单直接的解决方案&#xff0c;我们只需要将DTS引擎驻留在比如windows服务中&#xff0c;该引擎通过数据库的触发器事件获取源表数据更新的所有情况&#xff0c;即增量&#xff0c;然后相应的更新目的表。然而&#xff0c;由谁来创建触发器了&#xf…...

编程日记 2024/11/5 14:28:55

wordpress修改html/有哪些免费推广网站

Class对象是没办法用new关键字得到的&#xff0c;因为它是jvm生成用来保存对应类的信息的,换句话说&#xff0c;当我们定义好一个类文件并编译成.class字节码后&#xff0c;编译器同时为我们创建了一个Class对象并将它保存.class文件中。我不知道这样描述是否妥当&#xff0c;因…...

编程日记 2024/11/5 11:17:42

个人博客模板 wordpress/推广专员

1、状态更新 服务端InstanceInfo对象状态更新的流程和续约流程类似&#xff0c;不过该过程不再经过SpringCloud提供的InstanceRegistry类了&#xff0c;即SpringCloud没有再对状态更新过程进行扩展&#xff0c;即没有增加状态变更事件的广播。基本流程如下&#xff1a; Instan…...

编程日记 2024/11/5 10:33:58

广西建设厅官网站/北京seo优化

第1条、考虑用静态工厂方法替代构造器 在基本类型的包装类中&#xff0c;如Boolean存在静态工厂方法&#xff1a; public static Boolean valueOf(boolean b){return b ? Boolean.TRUE : Boolean.FALSE; } 考虑静态工厂方法的优势&#xff1a; 静态工厂方法有自己的名…...

编程日记 2024/11/5 10:14:53

wordpress hide title plugin/小红书推广

---------------------------------------------------------- 机械设计模型制作是设计前期中至关重要的一步 转载于:https://www.cnblogs.com/zff1933/p/7815511.html...

编程日记 2024/11/5 8:17:04

微信导购网站怎么做视频教学/磁力搜索

OSI model&#xff08;open system interconnection&#xff09;存在的原因&#xff1a; 网络模型建立是为了是网络的建造者可以建造出可以相互交流和一起工作的网络&#xff0c;并且描述了从一个电脑上通过网络传数据到另一个网络。 1.physical层 定义了对终端系统之间的连接的…...

编程日记 2024/11/5 8:14:02